@font-face {
    font-family: Roboto;
    src: url('./assets/Roboto/Roboto-Regular.ttf');
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    overflow-x: hidden;
}

:root{
    --tea-green: hsl(74, 32%, 76%);
    --beige: hsl(67, 50%, 86%);
    --cornsilk: hsl(52, 94%, 94%);
    --papaya-whip: hsl(43, 82%, 89%);
    --buff: hsl(30, 53%, 64%);

    --background: var(--beige);
    --secondary-background: var(--tea-green);
    --button-border: var(--cornsilk);
    --button-marker: var(--buff);
}

/* [data-theme='light']{
} */
/* [data-theme='dark']{
    
} */
body{
    font-family: Roboto;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background);
}
button{
    border:3px solid var(--button-border);
    border-radius:0.2rem;
    padding:0.25rem;
    margin: 0.1rem 0.1rem 0.1rem 0.1rem;
}
button:hover{
    border:3px solid var(--button-marker);
}
.markedButton{
    border: 3px solid var(--button-marker);
}
select, input{
    border:3px solid var(--button-border);
    border-radius:0.2rem;
    background-color: buttonface;
    margin: 0.1rem 0.1rem 0.1rem 0.1rem;
    /* padding:0.25rem; */
}
select:hover, input:hover{
    border:3px solid var(--button-marker);
}
header{
    padding:1rem;
}
.mainDisplayWrapper{
    background-color: var(--secondary-background);
    border-radius:0.5rem;
    margin:0.5rem;
}
.moviesDisplayWrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
}
nav{
    display:flex;
    flex-direction: column;
    row-gap: 1rem;
    padding:1rem;
}
.searchWrapper{
    display:flex;
    flex-direction: column;
}
.filterWrapper{
    display: flex;
    flex-direction: column;
}
.filter{
    display:flex;
    flex-direction: column;
}
.filterRow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}
.miniHeader{
    /* margin:auto; */
    margin-bottom: 0.2rem;
    font-size: 1.15rem;
}
.paginationDiv{
    padding:1rem;
}
.moviesDisplay{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.hidden{
    display:none;
}

/* movie card display */
.imgDiv{
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    padding:1rem;
    background-color: var(--papaya-whip);
    margin:1rem;
    width:250px;
    min-width: 250px;
    border-radius: 0.5rem;
    border:3px solid var(--button-border);
}
.imgDiv:hover{
    border:3px solid var(--button-marker);
}
.imgDiv img{
    align-self: center;
    max-width: 185px;
    /* margin-bottom: 1rem; */
}
.imgText{
    align-self:center;
    width:185px;
}
.likeButton{
    text-align: center;
    align-self: center;
    padding: 0;
    /* width:2rem; */
    font-size: 24px;
    background:none;
    border:none;
}
.likeButton:hover{
    scale:1.15;
    border:none;
}
.liked{

}


.aboutPage{
    padding:1rem;
}
.bold{
    font-weight: 600;
}

/* a{
    display: flex;
    justify-content: center;
    align-items: center;
} */
.logosDiv{
    margin-top:1rem;
    height:80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.miniLogo{
    width:45px;
}
/* .miniLogo:hover{
    scale:1.05;
} */

a:hover{
    scale:1.05;
}

.singleMovieDisplayWrapper{
    max-width: 374px;
    /* justify-self: center; */
    margin:auto;
}
.singleMovieDisplay{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding:1rem;
    margin:1rem;
    background-color: var(--papaya-whip);
}
.singleMovieDisplay button{
    margin:1rem;
}
.singleMovieDisplay img{
    border-radius: 0.5rem;
    aspect-ratio: 155/87;
}
.singleMovieTextDiv{
    max-width:320px;
    align-self: center;
    padding:1rem;
}

@media(min-width:750px){
    .singleMovieDisplayWrapper{
        /* justify-self: unset; */
        max-width: 972px;
    }
    .singleMovieDisplay{
        display:grid;
        grid-template-rows: 2rem 1fr 1fr;
        grid-template-columns: repeat(7,1fr);

        row-gap: 0.5rem;
    }
    .singleMovieDisplay button{
        margin:0;
        grid-column:1/3;
        height:100%;
    }
    .singleMovieDisplay img{
        grid-column:1/5;
        grid-row:2/4;

        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-bottom-left-radius: 0.5rem;
        border-top-left-radius:0.5rem;
        width:100%;
    }
    .singleMovieTextDiv{
        grid-column: 5/8;
        grid-row: 2/4;
        align-self: self-start;
        
        margin:0 0 0 1rem;
        padding:0;
        max-width: 100%;
    }
}

@media(min-width:500px){
    .mainDisplayWrapper{
        width:95%;
        /* max-width: 1368px; */
        max-width: 1200px;
    }
    .moviesDisplayWrapper{
        width:100%;
    }
    nav{
        width:100%;
        flex-direction: row;
        justify-content: space-around;
    }
    .searchWrapper{
        width:40%;
        max-width: 376px;
    }
    .filterWrapper{
        width:40%;
        max-width: 376px;
    }
    .moviesDisplay{
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
        width:100%;
        column-gap: 1rem;
        padding: 1rem;
        justify-items: center;
    }

    .favoritesPage{
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
        width:100%;
        column-gap: 1rem;
        padding: 1rem;
        justify-items: center;
    }
}