body {background-color: #73ab2d; animation-name: fondo; animation-duration: 12s; animation-iteration-count: infinite; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 17px;}
@keyframes fondo{
    0% {background-color: #73ab2d;}
    25% {background-color: #2daba5;}
    50% {background-color: #0cc2b9;}
    75% {background-color: #2daba5;}
    100% {background-color: #73ab2d;}
}
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;font-size: 1.1rem;font-weight: 600;}
header ul li a:hover {color: #ffdca2 !important;}
header ul li a.active {font-weight: 500;color: #91d1f1;}
.menu-responsive ul li {padding: 5px 20px;}

.button-download {color: #fcc027;margin-bottom: 10px;color: #ffdca2;transition: all ease .2s;border-right: 1px solid #ffdca2;padding: 2px 15px;font-weight: 500;margin-top: 10px;display: inline-block;}
.button-download:hover {color: #ffffff}

.btn-warning-index {background-color: #ffffff !important;border: 0px !important;border-radius: 10px !important;font-weight: bold;color: #35337c;position: absolute;bottom: 50px;left: 0;right: 0;max-width: 400px;margin:0px auto;padding: 15px;}
.btn-warning-index:hover {border:0px !important; background: none}

.btn-warning {background-color: #4295be !important;border: 0px !important;border-radius: 0px !important;font-weight: bold;color: #ffffff !important;}

.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;}
}

.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: #ffdca3; }
::-webkit-scrollbar-thumb:window-inactive { background: #ffdca3; }

.description {color: #f5ceec;}

.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;}
}