@font-face{
    font-family: "GT Ultra Median";
    src: url("../fonts/solstice/GtUltraMedian/GT-Ultra-Median-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family: "Aktiv Grotesk";
    src: url("../fonts/solstice/AktivGrotesk/WebStaticFonts/AktivGrotesk_W_Rg.woff") format("woff");
    font-weight: 400 500;
    font-style: normal;
}

@keyframes text-enter {
    from{
        transform: translate(-100%);
    }
    to{
        transform: translate(0px);
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #173F35;
}
h1{
    font-size: 3rem;
    margin-top: 0;
    font-family: "GT Ultra Median", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2{
    font-size: 1.5rem;
    margin-bottom: 0.5em;
}
.underline{
    text-decoration: underline;
}
.wrapper{
    position: relative;
}
.header, .footer{
    width: 100vw;
    height: 7em;
    background-color: #173F35;
}
.header:after{
    content:"";
    height: 2em;
    background-color: #E0EC89;
    width: 100vw;
    position: absolute;
    bottom: -2em;
}
.container, .header, main{
    display: flex;
    justify-content: center;
    align-items: center;
}
main {
    height: calc(100vh - 14em);
    min-height: 20em;
    padding: 0 2em;
}
.mask:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    border-right: 5px solid #173F35;
    z-index: 99;
    background-color: white;
}
.content{
    padding: 0 4em;
    animation: text-enter 1.75s ease-out;
}

img {
    width: 20em;
}

@media (max-width: 800px) {

    img{
        width: 16em;
    }
    h1{
        font-size: 1.5rem;
    }
    h2{
        font-size: 1rem;
    }
    .content{
        padding: 0 2em;
    }
    .mask:before{
        border-right: 3px solid #173F35;
    }
}