:root {
    --main-color: white;
    --main-bg-color:black;
    -webkit-font-smoothing: antialiased;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Akkurat-mono';
    letter-spacing: -0.5;
}


body{
    background-color: black;
    color: white;
}

.container #header-img {
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: 200px;
    background-size: cover;
}

h1{
    text-align: center;
    font-size: 45px;
    font-family: 'Snell Roundhand';
    color: white;
    margin: 15px;
    -webkit-font-smoothing: antialiased;
}

p{
    font-size: 25px;
    font-family: 'Snell Roundhand';
}

.gallery-highlight{
    margin-top: 20px;
    height: 75%;
    margin-top: 1px;
}

section{
    display: flex;
    height: 100vh;
}

.photo-gallery{
    margin-top: 1px;
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.photo-description{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.photo-description :hover{
    cursor: pointer;
    color: #90e0ef;
}

.photo-preview {
    display: flex;
    width: auto;
    border: 1px solid #e2d2c0;
    
}

.photo-preview img {
    
    height: 100px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3 ease;
}

.photo-preview img:hover {
    transform: scale(1.1);
    transition: ease-in-out;
}

img.photo-active {
    opacity: 1;
}

a {
    text-decoration: none;
    color: var(--main-color);
    font-size: 25px;
}

@media only screen and (max-device-width: 768px){

    * {
        background-color: black;
        font-style: 'Akkurat-Mono';
        -webkit-font-smoothing: antialiased;
    }

    .photo-description h1, p{
        visibility: hidden;
    }
    .photo-gallery{
        margin-top: 1px;
        display: flex;
        width: 50%;
        justify-content: center;
        align-items: center;
    }
    .photo-preview {
        display: flex;
        justify-content: center;
        width: auto;
        border: 1px solid #e2d2c0;
    }
    .photo-preview img {
        height: 100px;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3 ease;
    }
}

@media (min-width: 300px) and (max-width: 900px) {
    .photo-description, .header{
        display: none;
    }
    .photo-gallery, .photo-preview img{
      
        align-items: center;
    }
    .photo-preview {
        display: flex;;
        width: auto;
        height: 100px;
    }
}