@font-face {
    font-family: "evolver-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 700;
    src: url(https://use.typekit.net/gty3bjc.css);
}
.example {
    font-family: "evolver-variable",sans-serif;
    font-variation-settings: 'wght' 700, 'slnt' 0;
}

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    height: 100%;
    overflow-x: hidden;
    scroll-snap-align: center;
    scrollbar-width: none;
    background-color: rgb(253, 250, 245);
}

#container::-webkit-scrollbar {
    display: none;
}


.section {
    height: 69vh;
    margin-right: 3%;
    margin-left: 3%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    border-radius: 10vw;
    box-shadow: 2px 1px 3px rgb(0 0 0 / .09);
    position: relative;
    scroll-snap-type: auto;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* animation: sectionSlide .4s ease-in-out; */
    transition: height 0.15s ease-in-out, margin 0.15s ease-in-out, border-radius 0.15s ease-in-out;
}

#section4 {
    background-color: rgb(103, 183, 162);
    margin-top: calc(50vh);
    display: flex;
}

#section0 {
    background-color: rgb(253, 250, 245);
    flex-direction: column;
    box-shadow: none;
    color: rgb(35, 16, 3);
}

#section1 {
    background-color: rgb(244, 186, 104);
}

#section2 {
    background-color: rgb(151, 108, 193);
}

#section3 {
    background-color: rgb(232, 96, 103);
    margin-bottom: calc(50vh);
}

.title {
    z-index: 5;
    height: 20%;
    font-size: 6vh;
    font-family: "evolver-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'slnt' -4;
    color: rgb(253, 250, 245);
    opacity: 0%;
    font-weight: bold;
    text-shadow: 2px 1px 3px rgb(0 0 0 / .1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15%;
    transition: padding-top .3s ease-in-out;
    cursor: default;
    user-select: none; 
    -moz-user-select: none; 
    -webkit-text-select: none; 
    -webkit-user-select: none; 
}

/* .greenTitle {
    font-size: 6vh;
    font-family: "evolver-variable", sans-serif;
    font-variation-settings: 'wght' 600, 'slnt' -4;
    color: rgb(253, 250, 245);
    height: 7vh;
    width: 60vw;
    display: flex;
    justify-content: space-between;
    padding-bottom: 4vh;
} */

.email {
    font-size: 3.5vh;
    text-decoration: none;
    height: 10%;
    padding-top: 8vw;
    padding-bottom: 7vw;
    justify-content: space-between;
    padding-left: 10vw;
    padding-right: 10vw;
}

.icon {
    padding-top: 2vw;
    padding-bottom: 0vw;
}

.info {
    height: 5vh !important;
    width: 60vw !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    row-gap: 25px !important;
    font-family: Arial, Helvetica, sans-serif;
}

.blacktext {
    color: rgb(169, 169, 169);
    text-shadow: none;
    font-size: 2.4vh;
    padding-right: 15vw;
    padding-left: 15vw;
    cursor: default;
    text-align: center;
    user-select: none; 
    -moz-user-select: none; 
    -webkit-text-select: none; 
    -webkit-user-select: none; 
}

.mainTitle {
    color: rgb(35, 16, 3);
    padding-top: 10vh;
}

.nav {
    /* height: 70%;
    width: 100%;
    display: flex;
    align-items: center; */
}

.hidden {
    opacity: 0%;
}

.slideIn {
    animation: slideIn .4s ease-in-out;
    opacity: 95%;
}

.slideOut {
    animation: slideOut .4s ease-in-out;
    opacity: 95%;
}

.slideText {
    animation: slideInText .4s ease-in-out;
    opacity: 95%;
}

.slideOutText {
    animation: slideOutText .4s ease-in-out;
    opacity: 95%;
}

@media (min-aspect-ratio: 1.8/3){
    #container {
        height: 100%;
        /* overflow-y: auto; */
        overflow-x: hidden;
        scroll-snap-align: center;
        scrollbar-width: none;
    }
    
    #container::-webkit-scrollbar {
        display: none;
    }
    
    .section {
        height: 69vh;
        margin-right: 3%;
        margin-left: 3%;
        margin-top: 5vh;
        margin-bottom: 5vh;
        border-radius: 10vw;
        box-shadow: 2px 1px 3px rgb(0 0 0 / .09);
        position: relative;
        scroll-snap-type: none;
        align-items: center;
        justify-content: center;
        overflow: visible;
        /* animation: sectionSlide .4s ease-in-out; */
        transition: height 0.15s ease-in-out, margin 0.15s ease-in-out, border-radius 0.15s ease-in-out;
    }

    .title {
        padding-top: 5%;
        z-index: 5;
        height: 20%;
        font-size: 7vh;
        font-family: "evolver-variable", sans-serif;
        font-weight: bold;
        text-shadow: 2px 1px 3px rgb(0 0 0 / .1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .email {
        font-size: 3.5vh;
        text-decoration: none;
        height: 13%;
        justify-content: space-between;
        padding-top: 6vh;
        padding-bottom: 5vw;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .info {
        height: 5vh !important;
        width: 60vw !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        row-gap: 40px !important;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .icon {
        padding-top: 0vw;
        padding-bottom: 0vw;
    }

    .blacktext {
        color: rgb(217, 208, 199);
        text-shadow: none;
        font-size: 2.2vh;
        padding-right: 15vw;
        padding-left: 15vw;
    }
    
    .mainTitle {
        padding-top: 10vh;
    }
}

@media (min-aspect-ratio: 21/24){
    #container {
        height: 100%;
        overflow-y: hidden;
        overflow-x: hidden;
        scroll-snap-align: center;
        scrollbar-width: none;
        background-color: rgb(253, 250, 245);
    }
    
    #container::-webkit-scrollbar {
        display: none;
    }
    
    .section {
        height: 102vh;
        width: 100vw;
        margin-right: 100%;
        margin-left: 0vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
        border-radius: 0vw;
        box-shadow: 2px 1px 3px rgb(0 0 0 / .09);
        display: flex;
        flex-direction: auto;
        position: relative;
        scroll-snap-type: none;
        align-items: center;
        justify-content: center;
        overflow: visible;
        /* animation: sectionSlide .4s ease-in-out; */
        transition: none;
    }

    .title {
        z-index: 5;
        height: 100%;
        width: 60%;
        font-size: 9vh;
        font-family: "evolver-variable", sans-serif;
        opacity: 0%;
        font-weight: bold;
        text-shadow: 2px 1px 3px rgb(0 0 0 / .1);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0%;
    }

    .slideIn {
        animation: slideInBig .5s ease-in-out;
        opacity: 95%;
    }

    .slideOut {
        animation: slideOut .4s ease-in-out;
        opacity: 95%;
    }

    .email {
        font-size: 3.5vh;
        text-decoration: none;
        height: 10%;
        padding-bottom: 5vw;
        justify-content: space-between;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .info {
        height: 7vh !important;
        width: 60vw !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        row-gap: 40px !important;
        font-family: Arial, Helvetica, sans-serif;
    }

    .slideText {
        animation: slideInTextBig .4s ease-in-out;
        opacity: 95%;
    }

    #section4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mainTitle {
        height: 30vh;
        padding-top: 40vh;
    }
}

@media (min-aspect-ratio: 4.5/3){
    #container {
        height: 100%;
        overflow-y: hidden;
        overflow-x: hidden;
        scroll-snap-align: center;
        scrollbar-width: none;
        background-color: rgb(253, 250, 245);
    }
    
    #container::-webkit-scrollbar {
        display: none;
    }
    
    .section {
        height: 102vh;
        width: 100vw;
        margin-right: 100%;
        margin-left: 0vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
        border-radius: 0vw;
        box-shadow: 2px 1px 3px rgb(0 0 0 / .09);
        display: flex;
        flex-direction: auto;
        position: relative;
        scroll-snap-type: none;
        align-items: center;
        justify-content: center;
        overflow: visible;
        /* animation: sectionSlide .4s ease-in-out; */
        transition: none;
    }

    .title {
        z-index: 5;
        height: 100%;
        width: 60%;
        font-size: 9vh;
        font-family: "evolver-variable", sans-serif;
        opacity: 0%;
        font-weight: bold;
        text-shadow: 2px 1px 3px rgb(0 0 0 / .1);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0%;
    }

    .slideIn {
        animation: slideInBig .5s ease-in-out;
        opacity: 95%;
    }

    .slideOut {
        animation: slideOut .4s ease-in-out;
        opacity: 95%;
    }

    .email {
        font-size: 3.5vh;
        text-decoration: none;
        height: 10%;
        padding-bottom: 5vw;
        justify-content: space-between;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .info {
        height: 7vh !important;
        width: 60vw !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        row-gap: 40px !important;
        font-family: Arial, Helvetica, sans-serif;
    }

    .slideText {
        animation: slideInTextBig .4s ease-in-out;
        opacity: 95%;
    }

    #section4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mainTitle {
        height: 30vh;
        padding-top: 40vh;
    }
}

@keyframes sectionSlide {
    0%{
        margin-top: 20vh;
        margin-bottom: 20vh;
    }
    100%{
        margin-top: 5vh;
        margin-bottom: 5vh;
    }
}

@keyframes slideIn {
    0%{
        transform: translateX(-100vw);
        opacity: .9;
    }
    100%{
        transform: translateX(0vw);
        opacity: 1;
    }
}

@keyframes slideInBig {
    0%{
        transform: translateY(-100vh);
        opacity: .9;
    }
    100%{
        transform: translateY(0vh);
        opacity: 1;
    }
}

@keyframes slideOut {
    0%{
        transform: translateX(0vw);
        opacity: .9;
    }
    100%{
        transform: translateX(-100vw);
        opacity: 1;
    }
}

@keyframes slideOutBig {
    0%{
        transform: translateY(0vw);
        opacity: .9;
    }
    100%{
        transform: translateY(-100vw);
        opacity: 1;
    }
}

@keyframes slideInTextBig {
    0%{
        transform: translateY(100vh);
        opacity: .9;
    }
    100%{
        transform: translateY(0vh);
        opacity: 1;
    }
}

@keyframes slideInText {
    0%{
        transform: translateX(100vw);
        opacity: .9;
    }
    100%{
        transform: translateX(0vw);
        opacity: 1;
    }
}

@keyframes slideOutText {
    0%{
        transform: translateX(0vw);
        opacity: 1;
    }
    100%{
        transform: translateX(100vw);
        opacity: .9;
    }
}