@font-face{
    font-family: Technology;
    src: url(./fonts/Technology.otf) format("opentype");
    src: url(./fonts/Technology.ttf) format("truetype");
}

html, body {
    height: 100%;
    margin: 0;
    background-color: #141414;
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Technology', sans-serif;
    line-height: 0.2;
}

/* Estilo para telas de celulares (até 719px) */
@media only screen and (max-width: 719px) {
    #counter {
        font-size: 80px; 
        color: #ffffff; 
        text-shadow: 
            .2vw 0vw .3vw #ffffff,
            .4vw 0vw .3vw #f0f0f0, 
            .6vw 0vw .3vw #e0e0e0, 
            .2vw 0vw .2vw #d0d0d0, 
            .4vw 0vw .2vw #c0c0c0, 
            .6vw 0vw .2vw #b0b0b0, 
            .2vw 0vw 1.5vw #a0a0a0, 
            .4vw 0vw 1.5vw #909090, 
            .6vw 0vw 1.5vw #808080; 
    }

    .quote {
        font-size: 18px; 
        color: #ffffff; 
        text-shadow: 
            .2vw 0vw .2vw #ffffff, 
            .4vw 0vw .2vw #f0f0f0, 
            .6vw 0vw .2vw #e0e0e0, 
            .6vw 0vw 1.5vw #b0b0b0, 
            .6vw 0vw 6vw #808080; 
    }
}

/* Estilo para telas de tablets (entre 720px e 1280px) */
@media only screen and (min-width: 720px) and (max-width: 1280px) {
    #counter {
        font-size: 150px; 
        color: #ffffff;
        text-shadow: 
            .2vw 0vw .5vw #ffffff, 
            .4vw 0vw .5vw #f0f0f0, 
            .6vw 0vw .5vw #e0e0e0, 
            .2vw 0vw .4vw #d0d0d0, 
            .4vw 0vw .4vw #c0c0c0, 
            .6vw 0vw .4vw #b0b0b0, 
            .2vw 0vw 2vw #a0a0a0, 
            .4vw 0vw 2vw #909090, 
            .6vw 0vw 2vw #808080;
    }

    .quote {
        font-size: 35px;
        color: #ffffff;
        text-shadow: 
            .1vw 0vw .2vw #ffffff, 
            .2vw 0vw .2vw #f0f0f0, 
            .3vw 0vw .2vw #e0e0e0, 
            .1vw 0vw 1.5vw #d0d0d0, 
            .2vw 0vw 1.5vw #c0c0c0, 
            .3vw 0vw 1.5vw #b0b0b0, 
            .1vw 0vw 3vw #a0a0a0, 
            .2vw 0vw 3vw #909090, 
            .3vw 0vw 6vw #808080;
    }
}

/* Estilo para telas de computadores (acima de 1280px) */
@media only screen and (min-width: 1281px) {
    #counter {
        font-size: 250px; 
        color: #ffffff;
        text-shadow: 
            .1vw 0vw .25vw #ffffff, 
            .2vw 0vw .25vw #f0f0f0, 
            .4vw 0vw .25vw #e0e0e0, 
            .1vw 0vw .1vw #d0d0d0, 
            .2vw 0vw .1vw #c0c0c0, 
            .4vw 0vw .1vw #b0b0b0, 
            .1vw 0vw 2vw #a0a0a0, 
            .2vw 0vw 2vw #909090, 
            .4vw 0vw 5vw #808080;
    }

    .quote {
        font-size: 50px;
        color: #ffffff;
        text-shadow: 
            .1vw 0vw .2vw #ffffff, 
            .2vw 0vw .2vw #f0f0f0,  
            .3vw 0vw .2vw #e0e0e0,  
            .3vw 0vw 1.5vw #b0b0b0, 
            .3vw 0vw 6vw #808080;
    }
}