@font-face {font-family: "Avenir Book"; src: url("../fonts/avenir-book.woff2")}
@font-face {font-family: "Avenir Medium"; src: url("../fonts/avenir-medium.woff2")}
@font-face {font-family: "Avenir Black"; src: url("../fonts/avenir-black.woff2")}

/* Reset CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family: "Avenir Book", sans-serif;
	font-weight:normal;
	font-style:inherit;
	text-shadow: none;
}
html{
    width: 100%;
    height: 100%;
}
body{
    background: url("../img/background.svg") left bottom no-repeat;
    background-size: 40%;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo{
    background: url("../img/logo.svg") center center no-repeat;
    background-size: contain;
    max-width: 350px;
    width: 95%;
    height: 95px;
    margin: 0 auto 60px auto;
}
h1{
    font-family: "Avenir Black", sans-serif;
    color: #777777;
    font-size: 40px;
    display: block;
    text-align: center;
    margin: 0 auto 20px auto;
}
p{
    font-family: "Avenir Medium", sans-serif;
    color: #666666;
    font-size: 20px;
    padding-inline: 20px;
    display: block;
    text-align: center;
    margin: 0 auto 20px auto;
    &.small{
        font-family: "Avenir Book", sans-serif;
        color: #333333;
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.cards{
    display: flex;
    justify-content: center;
    margin: 0 auto 20px auto;
    .card{
        background: #F48120;
        color: #FFFFFF;
        margin:10px;
        padding: 15px;
        min-width: 40px;
        text-align: center;
        font-size: 20px;

        transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;

        &:hover{
            background: #F4731F;
        }
    }
}

@media screen and (max-width: 767px) {
    body{
        background-size: 90%;
    }
    p{
        font-size: 18px;
        &.small{
            font-size: 13px;
        }
    }
    .cards{
        .card{
            margin:10px 5px;
            min-width: 30px;
        }
    }
}