.recipe {
    width: clamp(300px, 75%, 400px);
    height: 600px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    padding: var(--tt-layout-large);
    background-color: var(--tt-light-yellow);

    overflow-x: hidden;
    overflow-y: auto;
}

span.hand {
    color: var(--tt-red);
    font-family: 'Just Another Hand', cursive;
    font-style: normal;
    font-size: 1.5rem;
}

.recipe-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 75%;
    padding: var(--tt-layout-medium);

    h3 {
        font-size: var(--tt-font-size-medium);
        margin: 0;
        text-align: center;
    }

    label {
        font-size: var(--tt-font-size-small);
    }

    .recipe-meta{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: 100%;
    }

    .meta-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: 100%;
    }

    .meta-value-container {
        width: 100px;
        
        padding-left: var(--tt-layout-medium);
        border-bottom: 1px solid var(--tt-black);
        text-align: center;
    }
}

.recipe-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

    width: 100%;
}

.ingredients {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    width: 100%;

    border: solid thin var(--tt-black);
    
    .grid-item{
        border: solid thin var(--tt-black);
        height: 75 px;

        padding: var(--tt-layout-medium);
    }

    .ingredient-name{
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            font-size: var(--tt-font-size-small);
            text-transform: uppercase;
            text-align: center;
        }
    }

    .number-box {
        display: flex;
        justify-content: flex-end;
        padding: var(--tt-layout-small);

        font-size: var(--tt-font-size-small);
        color: var(--tt-light-gray);
        position: relative;
    }

    .quantity {
        position: absolute;
        top: 25%;
        left: 40%; 

        span {
            font-size: 1.25rem;
            text-align: center;
        }
    }

    
}

.instructions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
    align-items: center;
    width: 100%;
    flex-grow: 1;

    padding: var(--tt-layout-small);

    
    border: solid var(--tt-layout-x-small) var(--tt-black);
    border-top: none;

    .instructions-header{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: 100%;
    }

    .meta{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        h4{
            font-size: 1rem;
            text-align: center;
        }
    }

    .serial-stamp-container{
        font-family: monospace;
        color: var(--tt-red);
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-grow: 1;

        span{
            opacity: 50%;
        }
    }

    ul.instruction-list{
        list-style-type: none;
        margin: 0;
        padding-left: var(--tt-layout-medium);
        width: 100%;
        max-height: 400px;
        overflow-y: scroll;

        li {
            margin-bottom: var(--tt-layout-small);
        }
        
        span.hand {
            color: var(--tt-black);
            line-height: .75;
        }


    }
}

.swoosh{
    animation: swoosh 1s;
}

.in{
    animation-direction: reverse;
    animation-timing-function: ease-in;
}

.out{
    animation: swoosh 1s ease-in-out;
}


@keyframes swoosh {
    0%{
        transform: translateX(0);
    }
     
    100%{
        transform: translateX(-500%);
    }
    
}

@media screen and (max-width: 425px) {
    .ingredients{
        .grid-item.ingredient-name {
            span {
                font-size: var(--tt-font-size-small);
            }
        }
    }
    span.hand {
        font-size: 1.25rem;
    }

    .recipe-header{
        width: 100%;
        
        .recipe-meta{
            flex-direction: column;
        }
    }
    
}