@import url(https://fonts.googleapis.com/css?family=Alatsi);
@font-face {
    font-family: 'Alatsi';
    src: url('./fonts/Alatsi-Regular.ttf') format('truetype');
	font-style: normal; 
	font-weight: 400; 
	font-display: fallback; 

}

body{
    font-family: 'Alatsi', Helvetica, Arial, sans-serif;;
    text-align: center;
    background-color: #ffffff;
    color:#353535;
    font-size: 135%;

}
.header{
    display: inline;
}
img#help{
    float: right;
    position: absolute;
    right: 3vw;
    top: 21px;
    cursor: pointer;
}
img#home{
    position: absolute;
    left: 3vw;
    top: 21px;
    cursor: pointer;
}
a{
    text-decoration: none;
    color:#353535;
}
a.link{
    display: block;
    margin: 3rem;
    font-weight: 700;
}
#links{
    margin-top: 12rem;
}
#barritos_pt{
    color: #f7c900;
    font-size: 35px;
    text-decoration: none;
}
#eu_nunca{
    color: #0575ff;
    font-size: 35px;
    text-decoration: none;
}

#quem_e{
    color: #00db1a;
    font-size: 35px;
    text-decoration: none;
}

#divirtam-se{
    display: inline-block;
    cursor: pointer;
}

div#score-div{
    font-size: 120%;
    margin: 2rem auto;
}
div#cartas{
    height: 225px;
}

div#questions{
	margin-top: 6rem;
	height: 180px
}
#cartas img{
    margin-top: 1rem;
    height: 200px;
}
button {
  color: #353535;
}

.buttons{
    margin-top: 1rem;
}
.button {
    border: solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 12px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 14px 16px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 40%;
    margin: 10px 7px;
}



.button#vermelho{
    transform: rotate(-0.5deg);
    background-color: #f3514f;
}
.button#preto{
    transform: rotate(0.5deg);
    background-color: #d4d4d4;
}
.button#cima{
    transform: rotate(-0.5deg);
    background-color: #c8e265;
    opacity: 20%;
}
.button#baixo{
    transform: rotate(0.5deg);
    background-color: #8aacda;
    opacity: 20%;
}
.button#barritos{
    transform: rotate(-0.5deg);
    width: 81%;
    background-color: #f7c900;
}
.button#ligeiro{
	font-size: 110%;
    margin-top: 7rem;
    transform: rotate(-0.5deg);
    width: 50%;
    background-color: #6ff860;
	border-radius: 20px;
}
.button#hot{
	font-size: 110%;
    transform: rotate(0.5deg);
    width: 50%;
    background-color: #ee483c;
	border-radius: 20px;
}
.button#mix{
	font-size: 110%;
    transform: rotate(-0.5deg);
    width: 50%;
    background-color: #f7c900;
	border-radius: 20px;
}

.modal {
    display: none;
    position: fixed; 
    z-index: 1;
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}

#htpModal{
    padding-top: 50px;
}

  
.modal-content {
    background-color: #fefefec7;
    margin: auto auto 3rem auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}



h1 {
    position: relative;
    display: inline;
    
}

h1::before {
    background-color: #f7c900;
    content: "";
    position: absolute;
    width: calc(60% + 4px);
    height: 60%;
    left: 20px;
    bottom: 5px;
    z-index: -1;
    transform: rotate(-4deg);
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 54px;
    font-weight: bold;
    height: 10px;

  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

#score-final{
    font-size: 150%;
}