@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root{
    --thegreen: rgb(0, 193, 29);
    --thedefault: rgb(255, 247, 230);
    --thepurple: rgb(70, 56, 161);
}

*{
    margin: 0;
}

#downloadResume{
    background-color: rgb(67, 57, 134);
    color:white;
    border:none;
    font-size:2em;
    width:60%;
    align-self: center;
    border: white 0.01em solid;
    font-family: 'Source Serif 4', serif;
    font-weight:300;
    text-align: center;
    margin-right:2em;
}

#downloadResume:hover{
    background-color: white;
    cursor: pointer;
    color:rgb(67, 57, 134);
}

body {
    display:grid;
    grid-template-areas: "header"
    "about"
    "skills"
    "experience"
    "projects"
    "contact"
    "footer";
    grid-template-rows: 7.5vh 92.5vh repeat(5, 1fr);
    position:absolute;
    height:100%;
}

header{
    grid-area: header;
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right, var(--thedefault) 45%, var(--thepurple) 45%);
}

header h1{
    color:black;
}

#experience h1{
    color: white;
    text-align: center;
}

h1{
    font-size:3em;
    font-family:'Source Serif 4', serif;
    font-weight: 300;
}

h2{
   /*font-family: "Roboto", sans-serif;*/
   font-family:'Source Serif 4', serif;
    font-weight: 300;
    font-size: 2em;
}

h3{
    /*font-family: "Roboto", sans-serif;*/
    font-family:'Source Serif 4', serif;
    font-weight: 300;
    font-size: 1.5em;
}

.content{
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: var(--thedefault);
}

.mainContent{
    display: grid;
    grid-template-areas: ". . . ."
    ". img . ."
    ". img text ."
    ". . . .";
    grid-template-rows: 15vh 10vh 40vh 20vh;
    grid-template-columns: 1fr 35em 40em 1fr;
    width:100%;
}

.mainContent img{
    grid-area: img;
}

.textSection{
    grid-area: text;
    position:relative;
    display:flex;
    flex-direction: column;
}

.mainContent p{
    font-size:2em;
    font-family:'Source Serif 4', serif;
    font-weight: 300;
    color:white;
}

i{
    font-size:2em;
    margin-top:0.25em;
}

#about{
    grid-area: about;
    background: linear-gradient(to right, var(--thedefault) 45%, var(--thepurple) 45%);
    display:flex;
    flex-direction: column;
}

#about h1{
    color:white;
    font-size:4em;
    border-bottom: 0.01em solid white;
}

#about img{
    width:30em;
    border-radius: 10em;
    position:relative;
}

#skills{
    grid-area: skills;
    display:flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--thedefault);
}

#skills h2{
    text-align: center;
}

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

.skill{
    margin:1em;
    background-color: white;
    border: 0.1em solid black;
    width:10em;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
    position:relative;
    padding-top:1em;
    transition: ease 0.1s;
}

#skills .skills{
    opacity:0;
    position: relative;
    left: 10em;
}

.skill img{
    width:5em;
}

#experience{
    grid-area: experience;
    background-color: var(--thepurple);
    display: flex;
    align-items: center;
    flex-direction: column;
}

#projects{
    grid-area: projects;
    background-color: var(--thedefault);
    display:flex;
    flex-direction: column;
    align-items: center;
}

#projects h1{
    text-align: center;
}

#contact{
    grid-area: contact;
    background-color: var(--thepurple);
    display:flex;
    flex-direction: column;
    align-items: center;
}

#contact h1{
    text-align: center;
    color:white;
}

.job{
    background-color: white;
    width:80%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.jobHeading{
    width:90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job h3{
    text-align: center;
}

.job hr{
    border: solid black 0.1em;
    width:90%;
}

.project{
    background-color: white;
    border: 0.1em solid black;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5vw;
    position: relative;
    transition: 0.1s ease;
}

.project img{
    width:90%;
}

.project h2{
    text-align: center;
    font-family:'Source Serif 4', serif;
    font-weight: 300;
}

.project p{
    width: 90%;
    font-family:'Source Serif 4', serif;
    font-weight: 300;
    font-size: 1.5em;
}

.jobMainContent{
    width:90%;
}

.jobMainContent li{
    margin-bottom: 0.5em;
    font-family:'Source Serif 4', serif;
    font-weight: 300;
    font-size: 1.2em;
}

.job{
    border: solid 0.1em black;
}

a{
    text-decoration: none;
    color:black;
}

#projects a{
    width: 80%;
}

header nav{
    display: flex;
    flex-direction: row;
    /*font-family:"Roboto", sans-serif;*/
    font-family:'Source Serif 4', serif;
    font-weight: 300;
    width:100%;
    justify-content: end;
}

header a, header h1{
    text-decoration: none;
    margin: 0.5em 1em 0.5em 1em;
    font-size:2em;
}

header a{
    color: white;
}

header a:visited{
    color:white;
}


@media screen and (max-height: 800px){
    body{
        grid-template-rows: repeat(6, 1fr);
    }

    .mainContent{
        grid-template-rows: 7.5em 5em 20em 10em;
    }
}

@media screen and (max-width: 1600px){


    .mainContent p{
        margin:0;
        padding: 0;
    }

    #about h1{
        height:auto;
    }

    #about p{
        font-size:200%;
        width:100%;
        color:white;
        border-bottom:0;
    }

    #scrollForMore{
        padding-top:3em;
    }

    #scrollForMore p{
        font-size: 1em;
    }
}

@media screen and (max-width:1600px) and (min-height:1200px){
    .mainContent p{
        margin-top:10vh;
    }

    .mainContent img{
        margin-top:5vh;
    }
}

@media screen and (max-width:1330px) {

    .title{
        height:10em;
        flex-direction: row;
        justify-content:auto;
        border-right:none;
    }

    header{
        background: var(--thepurple);
    }

    header h1{
        color:white;
    }

    #about{
        background: var(--thepurple);
    }

    .mainContent{
        display:flex;
        flex-direction: column;
        align-items: center;
        margin-top:1em;
    }

    #downloadResume{
        margin:1vw;
    }

    .mainContent p, .mainContent h1{
        text-align: center;
    }

    .textSection{
        width:80%;
    }

}

@media screen and (max-width: 1230px){

    .mainContent p, .mainContent h1{
        text-align: center;
    }

    .textSection{
        width:80%;
    }
}

@media screen and (max-width: 930px){
    header h1{
        display:none;
    }
}

@media screen and (max-width: 775px){
    .project p{
        font-size: 1em;
    }

    .project h2{
        font-size: 1.5em;
    }

    .jobHeading{
        flex-direction: column;
        align-items: start;
    }

    .job h3{
        text-align: start;
        margin-bottom:0.5em;
    }

    header a{
        font-size:1.5em;
    }
}

@media screen and (max-width: 715px){
    #about img{
        width:17.5em;
    }

    #about h1{
        font-size:3.5em;
    }
}

@media screen and (max-width: 585px){
    header a{
        font-size:1.2em;
    }
}

@media screen and (max-width: 540px){

    #border p{
        font-size:150%;
    }

    .title{
        height:5em;
    }

    .project h2{
        font-size: 1.2em;
    }

    .content p{
        font-size:1.5em;
    }

    header h1{
        font-size: 2em;
    }
}

@media screen and (max-width: 605px) and (min-height:800px){
    body{
        grid-template-rows: 10vh 90vh repeat(5, 1fr);
    }
    header a{
        font-size:1em;
    }
}

@media screen and (max-width:450px){
    #about h1{
        font-size:2.5em;
    }

    #about p{
        font-size: 1.5em;
    }
}

@media screen and (max-width:405px){
    header a{
        font-size: 0.75em;
    }

    header h1{
        font-size:1.5em;
    }
}

@media screen and (max-width: 470px) and (max-height:800px){
    header a{
        font-size: 0.75em;
    }

    header h1{
        font-size:1.5em;
    }

    #about img{
        width: 12em;
    }
}

@media screen and (max-width: 420px) and (min-height: 800px){
    body{
        grid-template-rows: 7.5vh 92.5vh repeat(5, 1fr);
    }
}