body {background-color: #31327b; animation-name: fondo; animation-duration: 5s; animation-iteration-count: infinite; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 17px;}
@keyframes fondo{
    0% {background-color: #5e3882;}
    25% {background-color: #31327b;}
    50% {background-color: #001F53;}
    75% {background-color: #31327b;}
    100% {background-color: #5e3882;}
}
ul,ol {list-style: none; padding-inline-start: 0px !important;}

a { text-decoration: none !important; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .2s;}
a:hover, a:focus { background-size: 100% 2px; }

.wrapper {max-width: 1200px; margin:0px auto}
header {border-bottom: 1px solid rgba(255,255,255,0.1)}
header ul li a{color: #ffffff; text-decoration: none; padding: 5px 20px;}
header ul li a:hover {color: #fcc027 !important}
header ul li a.active {font-weight: 500; color: #fcc027;}
.menu-responsive ul li {padding: 5px 20px;}

.button-download {color: #fcc027; margin-bottom: 10px; color: #fcc027; transition: all ease .2s; border-right: 1px solid #ffffff; padding: 2px 15px}
.button-download:hover {color: #ffffff}

.btn-warning-index {background-color: #fcc027 !important; border: 0px !important; border-radius: 0px !important; font-weight: bold; color: #35337c; 
position: absolute; bottom: 60px; left: 0; right: 0; max-width: 400px; margin:0px auto;}
.btn-warning {background-color: #fcc027 !important; border: 0px !important; border-radius: 0px !important; font-weight: bold; color: #35337c;}

.front .titulo {position: absolute; top: -70px; left: 0; right:0; margin: 0px auto }
.decoration #star-01 {position: absolute; left: 20px; top: 20px}
.decoration #star-02 {position: absolute; right: 20px; bottom: 20px}
.decoration #circles-01 {position: absolute; left: 20px; bottom: 20px}
.decoration #star-03 {position: absolute; right: 20px; top: 50px}

@media (max-width: 575.98px) { 
    .front .titulo{ top: -40px }
    .front .base {width: 300px !important;}
}

@keyframes rotate {from {transform: rotate(0deg);}
    to {transform: rotate(360deg); }}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}}
.rotating{
    -webkit-animation: 3s rotate linear infinite;
    animation: 3s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
#rotanting-i {
    -webkit-animation-direction: reverse;
}

.links {border-top: 1px solid rgba(255,255,255,0.1)}
.links a {color: #fcc027 !important}

::-webkit-scrollbar { width: 7px; height: 7px; }
/* Track */
::-webkit-scrollbar-track {border-radius: 0; }
/* Handle */
::-webkit-scrollbar-thumb {border-radius: 0; background: #21b6c1; }
::-webkit-scrollbar-thumb:window-inactive { background: #21b6c1; }

.description {color: #fcc027}

.message {font-size: 3rem; font-weight: 400; background-color: #ffffff; color: #777777; max-width: 800px; line-height: 50px;}
@media (max-width: 575.98px) { 
    .message {font-size: 1.5rem; line-height: 30px !important;}
}

.btn-menu {background-color: transparent !important; border: 0px !important; color: #fff; font-weight: 800; padding: 5px 20px}

.bi-volume-up-fill {color: #fcc027; cursor: pointer}
.bi-volume-mute-fill {color: #ffffff; cursor: pointer}

/*Css print*/
@media print {
    *,
    *:before,
    *:after {
        color: #000 !important;
        text-shadow: none !important;
        color-adjust: exact;  -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body, p, small {color: #000000 !important; font-size: 12px;}
    header {display: none !important;}

    /*puzzle*/
    #puzzle {padding: 10px !important; background-color: #cccccc}
    #custom-words .word {border-bottom: 1px solid #000000 !important;}
    .links, .btn {display: none !important;}
    #puzzle .puzzleSquare {height: 25px !important; width: 30px !important };

    /*crossword*/
    #container-crossword .solved-crossword .crossword-input{ background-color: #000000; box-shadow: inset 0 0 0 1000px gold;}
}