@font-face {
    font-family: Felix;
    src: url(fonts/Felix-Titling.ttf);
  }

  @font-face {
    font-family: Sprat;
    src: url(fonts/Sprat-Regular.otf);
  }

  
  ::selection {
    background-color: #B6B6B6;
    color: #B6B6B6;
}


        html,
        body {
            margin: 0px;
        overflow-x: hidden;
        width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: Felix;
    }

        .question {
            font-size: 5vw;
            margin-bottom: 20px;
        }

        .btn {
            width: 200px;
            height: 100px;
            margin: 20px;
            border: none;
            font-family: Felix;
            font-size: 24px;
        }

        .btn:hover {
            box-shadow: 0px 0px 60px 40px #b6b6b6;
            animation-name: welcome;
            animation-timing-function: ease-in-out;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }



        @keyframes welcome {
            0%   {box-shadow: 0px 0px 60px 10px #b6b6b6;}
            50%  {box-shadow: 0px 0px 60px 30px #343434;}
            100%  {box-shadow: 0px 0px 60px 10px #b6b6b6;}
          }
        

.btn-q1-1, .btn-q1-2, .btn-q1-3 {

    width: 200px;
    height: 200px;
    margin: 20px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    background-position: center;
    background-repeat: no-repeat;
    
}

.btn-q7-1, .btn-q7-2, .btn-q9-1, .btn-q9-2, .btn-q12-1, .btn-q12-2 {

    width: 180px;
    height: 180px;
    margin: 20px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    background-position: center;
    background-repeat: no-repeat;
    
}


.btn-q1-1:hover, .btn-q1-2:hover, .btn-q1-3:hover, .btn-q7-1:hover, .btn-q7-2:hover, .btn-q9-1:hover, .btn-q9-2:hover, .btn-q12-1:hover, .btn-q12-2:hover {
    box-shadow: 0px 0px 60px 40px #b6b6b6;
    animation-name: welcome;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}


.btn-q1-1 {
    background-image:url(images/quiz/dia.svg);
    background-size: 80%;
}

.btn-q1-2 {
    background-image:url(images/quiz/tarde.svg);
    background-size: 100%;
}

.btn-q1-3 {
    background-image:url(images/quiz/noite.svg);
    background-size: 100%;
}

.question-q5 {
    width: 400px;
    height: 120px;
    background-image: url(images/quiz/ser-tempo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.btn-q7-1 {
    background-image:url(images/quiz/triangulo.svg);
    background-size: 80%;
}

.btn-q7-2 {
    background-image:url(images/quiz/quadrado.svg);
    background-size: 80%;
}

.question-q8 {
    width: 400px;
    height: 200px;
    background-image: url(images/quiz/horario.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0px;
}




.btn-q9-1 {
    background-image:url(images/quiz/simples.svg);
    background-size: 100%;
}

.btn-q9-2 {
    background-image:url(images/quiz/complexo.png);
    background-size: 80%;
}

.btn-q10-1 {
    width: 200px;
    height: 100px;
    margin: 20px;
    border: none;
    font-family: Felix;
    font-size: 24px;
    transition: background-color 150ms ease-in-out;
    background-color: rgba(0, 0, 0, 0);
    animation-name: welcome;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.btn-q10-2 {
    width: 200px;
    height: 100px;
    margin: 20px;
    border: none;
    font-family: Felix;
    font-size: 24px;
    transition: background-color 150ms ease-in-out;
    background-color: rgba(0, 0, 0, 0);
    animation-name: welcome;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.btn-q10-1:hover {
    background-color: white;
}

.btn-q10-2:hover {
    background-color: black;
}

.btn-q12-1 {
    background-image:url(images/quiz/bolacheia.svg);
    background-size: 80%;
}

.btn-q12-2 {
    background-image:url(images/quiz/bolavazia.svg);
    background-size: 80%;
}


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

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
    }


    .btn-q1-1, .btn-q1-2, .btn-q1-3 {

        width: 150px;
        height: 150px;
        margin: 10px;
        border: none;
        background-color: rgba(0, 0, 0, 0);
        background-position: center;
        background-repeat: no-repeat;
        
    }


    .btn-q10-1 {
        background-color: white;
    }
    
    .btn-q10-2 {
        background-color: black;
    }






}