html, body{
    margin: 0;
}

html{
    background: white;
    font-family: 'alte_haas_groteskbold', sans-serif;
}
body {
    background-color: #FFF;
    color: #0072ce;
}

main{
    width: 100vw;
    height: 100vh;
    display: grid;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    padding: 1em;
}

footer{
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1em;
}

header a{
    text-decoration: none;
}

footer a{
    text-decoration: none;
    color: rgb(125, 125, 125);
}

#card{
    margin: auto;
}   


#card .logo{
    border-radius: 0%;
}
#card img {
    width: 30%;
    height: auto;
}
#card a {
    color: #0072ce;
    text-decoration: none;
}

#card h1{
    margin: 0;
    font-size: 5.2em;
    font-weight: 800;
}

#card p{
    font-weight: 500;
    font-size: 1.5em;
    margin: .5em .1em;
}

#card small{
    display: inline-block;
    color: rgb(125, 125, 125);
    font-size: .8em;
    margin-top: .5em;
}

#socials{
    text-align: center;
    margin-top: 1em;
}

@media (max-width: 900px){
    #card{
        text-align: center;
    }
    #card .logo {
        width: 80%;
    }
}

@media (max-width: 580px){
    #card{
        text-align: center;
    }

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

    #card p{
        font-size: 1.2em;
    }
}


@font-face {
    font-family: 'alte_haas_groteskbold';
    src: url('altehaasgroteskbold-webfont.woff2') format('woff2'),
         url('altehaasgroteskbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'alte_haas_groteskregular';
    src: url('altehaasgroteskregular-webfont.woff2') format('woff2'),
         url('altehaasgroteskregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}