@font-face {
    font-family: 'Yu Gothic';
    src: url('../fonts/YuGothic-Light.eot');
    src: url('../fonts/YuGothic-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/YuGothic-Light.woff2') format('woff2'),
        url('../fonts/YuGothic-Light.woff') format('woff'),
        url('../fonts/YuGothic-Light.ttf') format('truetype'),
        url('../fonts/YuGothic-Light.svg#YuGothic-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Yu Gothic', sans-serif;
}

main{
    background-image:url(../images/dot-grid.png) ; 
}

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
/*     margin: auto; */
    gap:15px;
    font-size: 2vw;
    margin-bottom: 5px;
}

#navbar > h2 {
    margin-left:5vw ;
    font-size: 2vw;
    margin-bottom: inherit;
}


#navbar > a {
    margin: inherit;
}

header > p {
    margin-left:5vw;
/*    margin: auto;        */
/*    text-align: center;  */
}

header > hr {
    width:95%;
}

header{
    border-radius:15px;
    position:sticky;
    top:0;
    margin: auto;
    height: fit-content;
    background-color:#9ba9fa; 
}

#important_quote{
    font-weight:500; 
    font-style:italic;
    padding-bottom: 5mm;
}

#welcome-section{
    display:flex;
    flex-direction:column; 
    justify-content: center;
    align-items: center;
    height:100vh;
    background-color:#fac79b;
    border-radius:15px;
    margin-bottom: 2%;
}

.project-tile{
    display:flex;
    flex-direction:row;
    align-items: center;
    margin-left:2.5%;
    margin-bottom:1%;
    gap:5%;
}

.project-tile > ul {
    padding-left:20px;
    font-size:1.5vw;
}
.project-tile > img {
    margin:1% 0 1% 0;
    width: 25vw;
    border-radius:10px;
}

#contact{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius:10px;
    height:35vh;
    background-color:#c49bfa;   
}

#contact-header{
    text-align:center;
}

#contact-header > h1 {
    font-size:3.3vw;
}

#contact-header > p {
    font-size:15px;
    font-style:italic;
}

#contact-links{
    display:flex;
    flex-direction:row;
    
    width: 80%;
    height: 50%;
    justify-content: center;
    /*! gap: 25px; */
    font-size: 2vw;
    /*! height: fit-content; */
    margin-bottom: 5%;
    /*! align-items: baseline; */
}

.contact-link {
    height:80%;
    margin:auto;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.contact-link > img {
    height:2em;
    margin:auto;
}

#hello-block{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    font-size:4.4vw;
}

#hello-block > p {
    font-size:1.4vw;
    text-align: center;
}

a {
    color:#3367d6;
    text-decoration: none;
}

#profile-link {
    
    font-size:1.5vh;
}


@media screen and (max-width: 480px)  {
    
    #navbar {
        gap:10px;
    }
    
    #navbar > a {
        font-size:4vw;
    }
    
    #navbar > h2 {
        font-size:4.5vw;
    }
    
    #navbar > img {
        width:2em;
    } 
    
    header > p {
        font-size:3vw;
        margin-left:5vw;
    }

    header > hr {
        width:95%;
    }
    
    header{
        border-radius:5px;
        height: 80%;
    }
    
    #welcome-section{
    height:80vh;
    border-radius:5px;
    }
    
    #hello-block{
    font-size:4.5vh;
    }

    #hello-block > p {
        font-size:3vw;
    }
    
    #important_quote{
        padding-bottom:1.5mm;
    }
    
    .project-tile > ul {
        font-size:3vw;
    }
    .project-tile > img {
        margin:1% 0 1% 0;
        width: 35vw;
        border-radius:7px;
    }
    
    #contact{
        border-radius:7px;
        height:fit-content;
    }
    
    #contact-header{
        text-align:center;
        margin-top:5%;
    }

    #contact-header > h1 {
        font-size:3vh;
    }

    #contact-header > p {
        font-size:60%;
    }

    #contact-links{
        width: 100%;
        height: 15%;
        font-size: 2vh;
        /*! margin:auto; */
        margin-bottom: 10%;
    }

    a > img {
        height:50%;
    }

}

@media  screen and (max-width: 1024px) and (min-width: 480px) {
    
    
    #navbar { 
    font-size:inherit; 
    }
    #navbar > h2 { 
    font-size: 3.5vh;
    }
    #navbar > img { 
        width:auto;
    }
    
    #welcome-section{ 
    height:65vh;
    }
    
    #hello-block { 
    font-size: 4.4vh
    }
    
    #hello-block  > p{
        font-size :3.5vh;
    }
    
    .project-tile > ul{ 
    font-size : 3.5vh;
    }
}