*{
    padding:0px;
    margin:0px;
}


html{
font-size: 62.5;
}
body{
font-family: 'Oswald', sans-serif;
background-image: url(../image/fundo.jpg);
}

.instrucoes{
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
    width: 100%;
    left: 500px;
    text-align: justify;
     padding: 10px;
    color: black;
    font-size: 1.3rem;
    
}
.paragrafos{
     margin:10px;
    color:#4000FF;
}

.container-fluid{
    display: block;
    padding: 10px;
     justify-content: center;
    margin-bottom:10px;
 }
 .container-fluid h1{
     text-align:center;
 }

.container-jogo{
display: none;
width: 480px;
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
}
.title{
    font-size: 3.5rem;
    margin-top: 0px;
    padding-left: 0.4rem;
    padding-top: 3rem;
}
.circulo-jogo{
   width: 480px;
   height: 480px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
   
}

.pad{
width: calc(100% - 50%);
height: calc(100% - 50%);
border: 0.5rem solid black;
}
/*cor do topo esquerdo*/
.pad-top-left{
    background-color: green;
    border-top-left-radius: 100%;
}
.pad-top-left.pad--active{
    background-color: lightgreen;
}
/*cor do topo direito*/
.pad-top-right{
    background-color: red;
    border-top-right-radius: 100%;
}
.pad-top-right.pad--active{
    background-color:  #ff4c4c;
}
/*cor de baixo lado esquerdo*/
.pad-botton-left{
    background-color: yellow;
    border-bottom-left-radius: 100%;
}
.pad-botton-left.pad--active{
    background-color: lightyellow;
}
/*cor de baixo lado direito*/
.pad-botton-right{
    background-color: blue;
    border-bottom-right-radius: 100%;
}
.pad-botton-right.pad--active{
    background-color: lightblue;
}

/*reconhecer botões do circulo*/
.pad-btn{
    cursor: pointer;
} 
.controles{
position:absolute;
background-color:white;
width: calc(100% /2);
height: calc(100% /2);
top: calc(100% / 4);
left: calc(100% / 4);
border-radius: 50%;
border: 0.8rem solid black;
}
.inter-graf{
padding-left: 0.2rem;
display: flex;
margin-right: 1rem;
margin-top: 0px;
}
.group{
    margin-right: 1rem;
    margin-top: 0px;
    ;
}
.count{
    display: flex;
    width: 3rem;
    margin-left: 8px;
    border: 0.2rem solid black;
    border-radius: 0.5rem;
    font-weight: bold;
    text-align: right;
    background-color:darkolivegreen;
    font-size: 1rem;
    font-family: "Iceland",cursive;
    color: black;
}
.count-ativo{
       color: #FF6961;
 
}
.n-cont{
     margin-left: 1rem; 
    font-size: 1rem;
    font-weight: bold;
}
.btn-start{
    background-color: green;
    width: 3.2rem;
    height: 2.5rem;
     border-radius: 5rem;
    box-shadow: .3rem .3rem  .3rem black;
    border: .2rem solid black;
    cursor: pointer;
}

.btn-stop{
  background-color: yellow; 
   width: 3.2rem;
    height: 2.5rem;
     border-radius: 5rem;
    box-shadow: .3rem .3rem  .3rem black;
    border: .2rem solid black;
    cursor: pointer;
}

.btn-comecar{
margin-top: 30px;
width:200px;
margin:auto;
text-align:center;
}

/*rodapé*/
.rodape{
    background:black;
    color:white;
    padding:15px;
    text-align: center;
    margin-bottom: 0px;
    margin-top:10px;
 }