@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto&display=swap');

body h1 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 4em;
}

body p {
    font-family: 'Lato', sans-serif;
}

body {
    background-image: url(../img/pexels-fauxels-3184418.jpg);
    background-repeat: no-repeat;
}

@media screen and (orientation: portrait) {
    body {
        background-size: auto;
        background-position: center;
    
    }
}

@media screen and (orientation: landscape) {
    body {
        background-size: cover;
    }
}

#logo {
    height: 5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.compteur {
    text-align: center;
    color: white;
    font-size: 3em;
}

#vertical-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

footer {
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

a {
    text-decoration-style: dotted;
}

a:visited {
    color: white;
}

a:hover {
    text-decoration: none;
}

@media screen and (max-width: 530px) {

    #logo {
        height: 3em;
    }

    .compteur {
        font-size: 2em;
    }

}

@media screen and (max-width: 330px) {

    body h1 {
        font-size: 2.5em;
    }

    #logo {
        height: 2em;
    }
    .compteur {
        font-size: 1.5em;
    }
}