body{
    flex-direction:row;

}.wrapper1{
    z-index:2;
    width:20%;
    height:auto;
    left:0px;
    top:0px;
    position:fixed;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    border-right:solid rgb(183, 169, 155);
}

.title{
    justify-content:center;
    text-align:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:80%;
    height:auto;
    position:relative;
    top:0px;
    color:rgb(183, 169, 155);
    font-family:'Fjalla One';
    font-size:220%;
    padding:10px;
    margin:auto;
    border-bottom:solid;
    margin-bottom:10px;
}

.tl_img{
    margin-bottom:20px;
    filter: sepia(100%);
}

.email{
    width:100%;
    justify-content:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    color:rgb(183, 169, 155);
    font-family:'Century';
    margin-bottom:30px;
}

.email a:hover{
    color:rgb(135, 124, 113);
}

.socials{
    justify-content:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}

.socials>*{
    width:15%;
    margin:1vh;
    margin-top:0;
    justify-content:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    position:relative;
    background-color:rgb(54, 53, 44);
    padding:10px;
    border-radius:30px;
    cursor:pointer;
}

.socials>*:hover{
    filter:brightness(70%);
}


.navbar{
    margin-top:10vh;
    margin-bottom:100%;
}
.navbar>*>*{
    justify-content:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:80%;
    height:auto;
    position:relative;
    color:black;
    font-family:'Fjalla One';
    font-size:20px;
    background-color:rgb(54, 53, 44);
    margin:auto;
    margin-bottom:10px;
    padding:10px;
    border-radius:5px;
}

.navbar>*>*:hover{
    background-color:rgb(36, 36, 30);
    color:rgb(135, 124, 113);
}

.about{
    margin-top:40px;
}

@media (max-width: 1050px){
    .wrapper1{
        width:25%;
    }

    .socials>*{
        padding:1vh;
        width:15%;
    }

    .navbar>*>*{
        width:80%;
    }

    .tl_img{
        width:10vh;
    }

    .wrapper2{
        width:75%;
    }
}


@media (max-width: 900px) and (min-height:600px){

    .wrapper1{
        width:100%;
        height:200px;
        background-color:black;
        border:none;
    }

    .wrapper2{
        top:200px;
        width:100%;
        justify-content:center;
        margin:auto;
    }

    .title p{
        right:0;
        font-size:100%;
    }
    
    .tl_img{
        height:50px;
        width:auto;
        left:0;
    }

    .featured_images>*>*{
        width:100%;
        height:auto;
        object-fit:initial;
        flex-direction:column;
    }

    .featured_images>*{
        flex-direction:column;
        height:auto;
    }

    .socials{
        position:fixed;
        top:20px;
        margin-left:10%;
        flex-direction:column;
        width:35%;
    }

    
    .navbar>*{
        position:fixed;
        width:25%;
        margin:0;
        margin-bottom:10px;
        top:20px;
        margin-left:7%;
        margin-right:7%;
    }

    .navbar>*>*{
        font-size:13px;
        padding:4px;
    }


    .nav1{
        position:fixed;
        right:0;
    }

    .about{
        margin-top:0px;
    }

    
    
}


@media (max-width: 600px){

    .title p{
        font-size:80%;
    }

    .socials>*{
        padding:1vh;
        width:20%;
    }
}

@media (max-width: 500px){

    .title p{
        font-size:60%;
    }

    .socials>*{
        padding:1vh;
        width:30%;
    }
}

@media (max-height:720px){

    .navbar>*>*{
        font-size:17px;
        padding:4px;
    }

    .about{
        margin-top:0;
    }

}

@media (max-height:600px){
    .wrapper1{
        width:23%;
        height:auto;
        border-right:solid rgb(183, 169, 155);
    }

    .email{
        font-size:80%;
    }
    
    .wrapper2{
        width:80%;
    }

    .socials>*{
        padding:1.5vh;
        margin-bottom:10vh;
    }

    .navbar{
        margin-top:-10%;
    }

    .navbar>*{
        position:relative;
        top:auto;
        right:auto;
        left:auto;
        width:80%;
        font-size:11px;
        justify-content:center;
        margin:auto;
    }

    .navbar>*>*{
        font-size:11px;
        padding:5px;
    }

    .about{
        margin-top:0;
    }

    .wrapper2{
        margin-top:auto;
    }
}

@media (max-height:450px){

    .email{
        margin-bottom:2vh;
    }

    .navbar{
        margin-top:-8vh;
    }
}

@media (max-width: 900px) and (max-height:600px){

    .title p{
        font-size:80%;
    }

    .socials>*{
        padding:1.5vh;
        width:20%;
    }
}