:root {
    --blue_ly:rgb(30, 150, 219);
    --white: #ffffff;
  }
*{
    border: 0;
    padding: 0;
    margin: 0;
}
body{
    background-color: rgb(30, 150, 219);
}
nav{
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
nav ul li{
    display: inline-flex;
    padding: 10px;
}
nav ul li a{
    text-decoration: none;
    color: black;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 10px;
    border:  1px solid transparent;
}
nav ul li a:hover{
    color: white;
    background-color: rgb(30, 150, 219);
    color: white !important;
    border:  1px solid silver;
}
main{
    background-color: white;
    border-radius: 12px;
    margin: 3% 12%;
    padding: 4%;
}
main section{
    max-width: 100%;
}
main section img{
width: 32%;
}

.title-program{
    display: inline-flex;
}

.fr form{
    display: flex;
    flex-direction: column;
}
.fr form label{
    margin-left: 0;
    margin-bottom: 2px;
}
.fr form input[type="email"],input[type="password"]{
    border:none;
    border-width: 0;
    outline: 0;
    width: 90%;
    margin: auto auto;
    line-height: 2;
    border-bottom: 1px solid var(--blue_ly);
    padding-left: 10px;
}
input:focus{
    background-color: rgb(247, 244, 244);
    border-radius: 3px;
}
.fr form input[type="submit"]{
    background-color: var(--blue_ly);
    padding: 1%;
    width: 50%;
    justify-content: flex-end;
    color: white;
    font: 1.2em sans-serif;
}
.fr form div{
    display: flex;
    justify-content: space-between;
}
.fr form div a{
    text-decoration: underline;
    color: var(--blue_ly);
}

/*FORM LOGIN */
.fr1 form{
    display: flex;
    flex-direction: column;
}
.fr1 form label{
    margin-left: 0;
    margin-bottom: 2px;
}
.fr1 form input[type="email"],input[type="password"],
input[type="text"],input[type="number"],input[type="url"],select,textarea{
    border:none;
    border-width: 0;
    outline: 0;
    width: 90%;
    margin: 20px auto;
    line-height: 2;
    border-bottom: 1px solid var(--blue_ly);
    padding-left: 10px;

}
.fr1 input:focus{
    background-color: rgb(247, 244, 244);
    border-radius: 3px;
}
.fr1 form input[type="submit"],input[type="button"]{
    background-color: var(--blue_ly);
    padding: 1%;
    width: 50%;
    justify-content: flex-end;
    color: white;
    font: 1.2em sans-serif;
    border: 1px solid transparent;
    cursor:pointer;

}
.fr1 form div input[type="submit"]:hover ,input[type="button"]:hover{
    background-color: white;
    color:black;
    border: 1px solid silver;
}

.fr1 form div{
    display: flex;
    justify-content: space-between;
    margin: 10px;
}
.fr1 form div a{
    text-decoration: underline;
    color: var(--blue_ly);
}
/*Login */
.logo-title{
    display: inline-flex; 
    align-items: center;
}
.logo-title :not(img){
    margin-left: 10px;
}
.links{
    text-align: center;
    padding-bottom: 10px;
    margin-top: 20px;
}
.links a{
    text-decoration: dotted;
    color:var(--blue_ly);
}
/* dropdown */

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 2vw;
    border-left: 1px solid #80808070;
}

.dropbtn {
    color: black;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content li {
    text-decoration: none;
    display: block;
}
.dropdown-content li a{
    padding: 12px 16px;
    display: block;
}
.dropdown-content li:hover{
    color: #f9f9f9;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.btn-navegation{
    background-color: var(--blue_ly);
    padding: 5px;
    float: right;
    vertical-align: middle;
    border-radius: 9px;
    text-decoration: dashed; 
    color: white;
}
.btn-navegation svg{
    vertical-align: middle;
}
.btn-navegation:hover{
    background-color: white;
    color:black;
    border: 1px solid silver;
}
.content-categorias{
    margin: auto;
    padding: 2.5%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content-categorias a{
    width: 40%;
    padding: 10px;
   /* border-radius: 9px; */
    border: 1px solid transparent;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    margin: 10px;
}
.content-categorias a.m{
    background-color: #b04f32;
    color: white;
}
.content-categorias a.g{
    background-color: #e9ce21;
    color: rgb(0, 0, 0);
}
.content-categorias a.h{
    background-color: #3293b0;
    color: white;
}
.content-categorias a.f{
    background-color: #65ef77;
    color: rgb(0, 0, 0);
}
.content-categorias a.q{
    background-color: #6575ef;
    color: rgb(0, 0, 0);
}
.content-categorias a.p{
    background-color: #c7c8cf;
    color: rgb(0, 0, 0);
}
.content-categorias a.i{
    background-color: #2c0ac3;
    color: rgb(255, 255, 255);
}
.content-categorias a.c{
    background-color: #f43444;
    color: rgb(255, 255, 255);
}
.content-categorias a.filo{
    background-color: #122c4d;
    color: rgb(255, 255, 255);
}
.content-categorias a.fis{
    background-color: #bd2bda;
    color: rgb(255, 255, 255);
}
.content-categorias a.red{
    background-color: #ff091e;
    color: rgb(255, 255, 255);
}
.content-categorias a.soc{
    background-color: #459848;
    color: rgb(255, 255, 255);
}

.content-categorias a:hover{
    background-color: white;
    color:black;
    border: 1px solid silver;
}
.content-categorias a.art{
   background:url("https://franciscobeltrao.pr.gov.br/wp-content/uploads/2018/02/28471581_905134789611455_7440261184004297706_n.jpg");
    color: white;
    text-shadow: 1px 1px 1px #292929;
    background-attachment: fixed;
}
.content-categorias a.art:hover{
    background: none;
    color: black;
}
.card-ano img{
    border: 6px solid #c1bebe;
    border-radius: 9px;
    width: 30%;
}
.card-ano.p img:hover{
    border: 6px solid #ed6d6d;
    border-radius: 9px;
}
.card-ano.b img:hover{
    border: 6px solid var(--blue_ly);
    border-radius: 9px;
}
.card-ano.y img:hover{
    border: 6px solid #e5ce67;
    border-radius: 9px;
}
.card-ano.s img:hover{
    border: 6px solid #67e3e5;
    border-radius: 9px;
}
.card-ano.t img:hover{
    border: 6px solid #4aab2a;
    border-radius: 9px;
}
.card-ano.q img:hover{
    border: 6px solid #ec2415;
    border-radius: 9px;
}
/* -------NOVIDADES -----*/
.novidades {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 300px;
    margin: 10px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

.card img {
    width: 100%;
    height: auto;
}

.card h3 {
    font-size: 1.5em;
    margin: 10px 0;
}
.card h3 a{
    text-decoration: none;
    color: black;
}
.card h3 a:hover{
    text-decoration: underline;
}

.card p {
    padding: 0 15px 15px;
    color: #555;
}
/* -------NOVIDADES -----*/
/*Historico*/
.content-historico table {
    width: 100%;
    border-collapse: collapse;
}

.content-historico th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.content-historico th {
    background-color: #f2f2f2;
}

.content-historico tr:nth-child(even) {
    background-color: #f9f9f9;
}

.content-historico tr:hover :not(thead){
    background-color: var(--blue_ly);
    color: white;
}
.content-historico thead tr:first-child:hover {
    color: black;
}
/* Dados Pessoais */

.content-dados-pessoais {
    padding: 20px;
}

.perfil {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}

.img-perfil {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-right: 20px;
}

.info-usuario {
    font-size: 1.4rem;
}
.content-dados-pessoais h2{
    margin-left: 20px;
}
.btn-editar {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.btn-editar:hover {
    background-color: #0056b3;
}
/* Pontuação do usuario*/

.icone-ranking {
    width: 30px; /* Ajuste o tamanho conforme necessário */
    height: 30px; /* Ajuste o tamanho conforme necessário */
    vertical-align: middle; /* Alinha o ícone com o texto */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}

.content-ranking {
    padding: 20px;
    text-align: center;
}

.content-ranking table {
    width: 100%;
    border-collapse: collapse;
}

.content-ranking th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.content-ranking th {
    background-color: #f2f2f2;
}

.content-ranking tr:nth-child(even) {
    background-color: #f9f9f9;
}

.content-ranking  tr:hover {
    background-color: var(--blue_ly);
    color: var(--white);
    }

.content-ranking thead tr:first-child:hover {
    color: black;
}

/*  footer */

footer {
    background-color: #fffdfd;
    color: rgb(0, 0, 0);
    padding: 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: space-around;
}

.footer-section {
    width: 30%;
}

.footer-section h4 {
    margin-bottom: 10px;
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin: 5px 0;
}

.footer-bottom {
    margin-top: 20px;
}

/* teste trailer */
.card-jogo img{
    border: 6px solid #c1bebe;
    width: 30%;
}
.card-jogo.b img:hover{
    border: 6px solid var(--blue_ly);
}
.game-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.game-container button{
    padding: 5px;
    background-color: var(--blue_ly);
    color: var(--white);
    cursor: pointer;
}
.game-image {
    width: auto; /* ajuste conforme necessário */
    height: auto;
    max-width: 100%;
}

.trailer {
    /* inicialmente oculto   */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* para que fique sobre a imagem */
    width: 100%;
}
.container-jogos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
}
.container-jogos a{
    text-decoration: none;
}
.menu-ranking{
    background: var(--blue_ly);
    color: white;
    border-radius: 23%;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}
nav ul li a:hover span{
border:2px solid white;
border-radius: 50%;
}
@media only screen and (max-width: 600px) {
    .logo-title{ margin-bottom: 15px;}
   .logo-title h2{ font-size: 90%; margin-bottom: 10px; }
   .fr1 form input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="url"], select, textarea {
    line-height: 1;
   }
   main {
    margin: 5% 5%;
   }
   footer{
    margin-top: 12%;
   }
   .content-categorias a {
    width: 100%;
    }
    section.content-ano{
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .card-ano{
        display: block;
    }
    .card-ano img{width: 100%;}
    .footer-container {justify-content: flex-start;}
    .footer-section{ width:auto;}
    /* correções trilha estudos
    */
    .master{ flex-direction:column;}
    .title-cat{
        max-width:50% !important;
    }
    #input-option356{
    max-width: 100%;
    display: flex
    }
    .radio{height: 40px !important;}
    .btn-navegation{width:auto !important;}
    .progress {flex-direction: column !important;}
    .progress .left{ margin-bottom:5px;}
    /* dados pessoais */
    .content-dados-pessoais { padding:0;}
    .info-usuario {font-size: 1.1rem; margin-top:15px;}
    .perfil{
        flex-direction: row;
        justify-content: center;
    }
    .content-dados-pessoais h2 {text-align: center;}
    .img-perfil {margin-right: 0px;}
}
.pontos{
     display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    padding:20px;
}
.pontos p{
    /*background-color: #b04f32;*/
    border-radius: 50%;
    padding: 8%;
    text-align: center;
    color: white;
    scale: 1.35;
    font-size:15px;
}
.pontos a{
    margin: 0;
    width: auto;
    border-radius: 10px;
    margin-left: -13px;
    padding: 20px 20px 20px 35px;
}
.retorno_cat_jogo{
    display: block;
    background: #1e96dbb0;
    color: white;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}
.btn-lg{
padding:1.4%;
font-size:1.2rem;
letter-spacing: .1rem;
}

.btn-1{
    display: flex;
    flex-direction: column;
}
.btn-1 a{
    text-decoration:none;
    color:white;
}

/*teste respostas radio*/

.input-option356 {
 
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-option356:after {
  content: "";
  clear: both;
}

.radio {
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius:9px;
  float: left;
  height: 70px;
  position: relative;
  width: 120px;
}

.radio + .radio {
  margin-left: 25px;
  margin-bottom: 9px;
}

.radio label {
  background: #b04f32 no-repeat center center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  white-space: pre-wrap;
  border-radius:9px;
}

.radio label span {
  z-index: 1;
}
.radio label input[type=radio] {
  all: unset;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius:9px;
}
.radio label input[type=radio]:checked {
  background-color: white;
  outline: solid;
    outline-color: #b04f32;
}
.radio label input[type=radio]:checked + span{
  color: black;
}
progress{
        border-radius: 9px;
}
progress-perguntas {
  /* Altera a cor do background no Firefox e navegadores da Microsoft */
  background: #b04f32;
    
  /* É necessário alterar o valor para none */
  -webkit-appearance: none;
   border-radius:9px;
}

/* Altera a cor de fundo em navegadores com webkit (Chrome, Safari etc) */
/*::-webkit-progress-value {
  background-color: #b04f32;
  border-right:1px solid silver;
   border-radius:9px;
}*/

/* Altera a cor da barra em navegadores com webkit (Chrome, Safari etc) */
::-webkit-progress-bar {
  background-color: white;
    border:1px solid silver;
    border-radius:9px;

}

/* Altera a cor da barra em navegadores com moz (Firefox) */
::-moz-progress-bar {
  background-color: #b04f32;
     border-radius:9px;

}

/* Altera a cor da barra em navegadores da Microsoft (IE e Edge) */
::-ms-fill {
  background-color: #b04f32;
     border-radius:9px;

}
.respostas{
     display: flex;
  justify-content:center;
}

.alt-margin input[type="text"]:not(:first-child){
    margin-left: 10px;
}
.alt-margin input[type="text"]{
    border: 1px solid var(--blue_ly);
    width: calc(100% / 4);
}
.separador{
    background: #1e96db;
    margin-left: -6% !important;
    margin-right: -6% !important;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom:20px;
}

#btn-close, btn-menu{
    background:none;
    border:none;
}
/* animações e ajustes menu e footer */

nav svg:not(#cadastrar_jogo svg){
    display: inline;
    vertical-align: baseline;
}
#cadastrar_jogo svg{
    display: inline;
    vertical-align: text-bottom !important;
}
#cadastrar_jogo:hover > svg{
    rotate: 180deg;
    transition: all 0.3s ease;
}
#sair svg{
    vertical-align: sub !important;
}
#sair:hover > svg{
    transform: translateX(-5px);
    transition: all 0.3s ease;
}
.ft-icons svg{
    display: inline;
}
footer a:hover{
    color: #3b82f6;
}
footer a:hover > svg{
    scale: 1.2;
    rotate: 10deg;
    transition: all 0.3s ease;
}