html, body {
    margin:0;
    padding:0;
    font-family: 'Inter', sans-serif;
    background:#F5E8DF;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
}

h1 {
    font-size: 4rem;
}

a {
    color: inherit;
}

*::-moz-selection { 
    color:white;
    background: #769EA4;
}

*::selection {
    color:white;
    background: #769EA4;
}

.main-container, .header-container, .school-container {
    box-sizing: border-box;
    padding:2rem;
    padding-top:0rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    
}

.header-container {
    background: #769EA4;
    color:#2B303A;
}

.school-container {
    background: #76a478;
    color:#2b3a2f;
}


header {
    max-width:1000px;
    display: grid;
    grid-template-areas:
    "name        name        menu        menu"
    "intro-txt   intro-txt   intro-txt   intro-txt"
    ".           profile-txt profile-txt profile-img ";
    /* grid-template-rows: auto auto auto auto auto auto auto; */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 3rem;
    grid-column-gap:2.5rem;
    margin: 0;
    box-sizing: border-box;
    padding-top:1rem;
    padding-bottom:5rem;
}

.projects {
    max-width: 950px;
    margin-top:1rem;
    position: relative;
    display: grid;
    grid-template-areas: 
    "heading heading heading heading"
    "rooms rooms . . "
    ". lambda lambda lambda"
    "koda koda identicon identicon"
    "hacke hacke hacke .";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 3rem;
    grid-column-gap:2.5rem;
}

.cv {
    margin-top:10rem;
    margin-bottom:5rem;
    width:100%;
    max-width:950px;
    display: flex;
}

.cv-heading {
    max-width:28rem;
    font-size:1.2rem;
}

.cv h1 {
    margin:0;
}


.cv .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: cv-links;
    width:100%;
}

.cv .links .linkedin {
    opacity:0.4;
    transition: opacity 0.3s;
}
.cv .links .linkedin:hover {
    opacity:1;
}


.cv .or-text {
    display: block;
    position: relative;
    opacity:0.7;
    margin-bottom:0.2rem;
    margin-top:1rem;
}

.projects .links {
    width: 100%;
}

.projects .links a {
    margin-right: 1.5rem;
}

.menu {
    display:flex;
    justify-content: flex-end;
    align-items:center;
    font-size:1.1rem;
    grid-area: menu;
}

.menu a {
    text-decoration: none;
    position: relative;
    margin-left:1rem;
    transition: all 0.2s;
}

.menu a:active {
    color:white;
}

.menu .icon {
    text-decoration: none;
}

.name {
    grid-area: name;
    font-family: 'Epilogue', sans-serif;
    font-weight: 200;
    font-size:2.5rem;
    margin-bottom: 1rem;
    margin-top:1rem;
}

.name a {
    text-decoration: none;
}

.intro {
    margin-top:1rem;
    grid-area: intro-txt;
}

.intro > h1 {
    position: relative;
    animation:slide-in 0.3s ease-in-out;
    margin-top:0;
    font-weight:800;
    max-width:900px;
}

.profile-img {
    position: relative;
    animation:slide-in 0.5s ease-in-out;
    grid-area: profile-img;
    border-radius:100%;
    max-height:200px;
    justify-self: end;
}

.about-me {
    position: relative;
    font-size: 1.1rem;
    grid-area: profile-txt;
    animation:slide-in 0.4s ease-in-out;
}

.projects-heading {
    grid-area: heading;
}

.projects-heading > h1 {
    margin-bottom:0;    
}

.projects-heading > p {
    max-width:600px;
    font-size:1.2rem;
}


.project {
    position: relative;
    width: 100%;
}

.project img {
    max-width:100%;
    height:auto;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.project img:hover {
    transform:scale(1.03);
}

.project p {
    max-width:35rem;
}


.cv .links a {
    font-size:1.2rem;
    display: block;
    padding:1rem;
    text-decoration: none;
    border-radius: 0.5rem;
    border:solid 1px grey;
    margin-bottom:1rem;
    width:17rem;
    text-align:left;
    box-sizing: border-box;
    font-size:1.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cv .links .download {
    background:#769EA4;
    color:white;
    border:none;
}


.cv .links a img {
    margin-right:0.5rem;
}

.school {
    max-width:1000px;
    display: grid;
    grid-template-areas:
    "name        name        menu        menu"
    "school-heading school-heading . . "
    "school-text school-text school-text . ";
    /* grid-template-rows: auto auto auto auto auto auto auto; */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 0rem;
    grid-column-gap:2.5rem;
    margin: 0;
    box-sizing: border-box;
    padding-top:1rem;
    padding-bottom:5rem;
}

.school h1 {
    position: relative;
    margin-bottom:0;
    animation:slide-in 0.3s ease-in-out;
}


.school-text {
    position: relative;
    grid-area: school-text;
    font-size:1.2rem;
    animation:slide-in 0.4s ease-in-out;
}

.school-list {
    margin-left:auto;
    margin-right:auto;
    padding:2rem;
    max-width:1000px;
}

.school-list p {
    max-width:30rem;
}

.school-list h2 {
    position: relative;
    margin-top:2.2rem;
    font-size:1.2rem;
}

@keyframes slide-in {
    0% {
        transform: scale(0.95);
        right:30px;
        opacity:0;
    }

    100% {
        right:0;
        opacity:1;
    }
  }

@media screen and (max-width: 800px) {
    .cv {
        flex-direction: column;
    }

    .cv .links a {
        width:100%;
    }

    .projects {
        grid-template-columns:100%;
        grid-template-areas: 
        "heading"
        "rooms"
        "lambda"
        "koda"
        "hacke"
        "identicon";
    }
    
    h1 {
        font-size:2.8rem;
    }

    .intro {
        margin-top:2rem;
    }

    .intro h1 {
        margin:0;
    }

    header {
        grid-row-gap: 0;
        grid-template-columns: 1fr;
        grid-row-gap: 1rem;
        grid-template-areas:
        "name"
        "menu"
        "intro-txt"
        "profile-img"
        "profile-txt";
    }

    .name {
        margin-bottom:0;
    }

    .menu {
        margin:0;
        padding:0;
        max-width:280px;
        justify-content:space-between;
    }

    .menu a {
        margin:0;
    }

    .profile-img {
        margin-top:4rem;
        max-width: 180px;
        justify-self: start;
    }

    .school {
        grid-template-areas:
        "name"
        "menu"
        "school-heading"
        "school-text";
        grid-row-gap: 0;
        grid-template-columns: 1fr;
        grid-row-gap: 1rem;
    }

    .about-me {
        font-size:1.2rem;
        max-width:35rem;
    }

}