:root {
    --white-color: white;
    --navbar-color: #f8f9fa;
    --black-color: black;
    --black-color-footer: black;
    --white-color-footer: white;
    --grey-color: grey;
    --baixo-banner: #00B2FF;
    --topo-banner: #006B99;
    --vote-hoverr: #00b3ff34;
    --color-quenaotenhonome: #0075a8;
    --go: rgb(0, 133, 242);
    --shadow:17, 37, 47, 0.52;
    --numero: 100%;
}

.darkmode {
    --numero: 100%;
    --white-color: #0f0f0f;
    --navbar-color: #0f0f0f;
    --black-color: #D7D7D7;
    --grey-color: grey;
    --baixo-banner: #085f85;
    --topo-banner: #0378aa;
    --vote-hoverr: #00b3ff34;
    --color-quenaotenhonome: #190F26;
    --black-color-footer: black;
    --white-color-footer: white;
    --go: #8CCBFF;

    h3.concorrenteVot{
        color: var(--black-color) !important;
    }
    .votasao{
        color: white;
    }
    option{
        color: var(--white-color);
    }.votation-create, .grupo-create{
        h5.card-title {
            color: var(--black-color) !important;
        }
        ul{
            .concorrentes-container{
                background-color: var(--white-color);
            }
            li.list-group-item{
                --bs-list-group-bg: var(--white-color) !important;
                border: none;
            }
            .no-nothing{
                background-color: var(--white-color);
            }
        }
    }
    .svgprofile, .pokeimage{
        filter: invert(1) brightness(1);
    }
    .swal2-popup{
        background-color: var(--white-color);
        .form-control{
            background-color: var(--black-color);
        }
       color: var(--black-color);
    }
}

.easteregg {
    --numero: 100%;
    --white-color: #092713;
    --navbar-color: #011b08;
    --black-color: #f1f1f1;
    --grey-color: grey;
    --baixo-banner: #1F7334;
    --topo-banner: #0378aa;
    --vote-hoverr: #00b3ff34;
    --color-quenaotenhonome: #190F26;
    --black-color-footer: black;
    --white-color-footer: white;
    --white-color-footer2: white;
    --go: #8cffa5;
    --gogo: #8cffa509;
    --shadow:240, 240, 240, 555.52;
    .concorrenteVot{
        color: var(--black-color);
    }
.votasao{
    color: white;
}
    .card.text-center{
        .card-body{
            h1{
                color: var(--black-color);
            }
        }
    }
    .swal2-popup{
        background-color: var(--white-color);
        .form-control{
            background-color: var(--black-color);
        }
       color: var(--black-color);
    }
    .bannerz {
        background-image: url(https://wallpaperbat.com/img/850630-baby-ninja-turtles-wallpaper.jpg);
        width: calc(100vw - overflow-y);
        height: 100vh;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .img-fluid.imagin {
        background-image: url(imgs/equemsomos.jpg) !important;
        background-size: cover;
        background-repeat: no-repeat;
        }
    .card-body.allyson {
        color: var(--black-color);
        background-color: rgb(109, 2, 2) !important;
    }
    .card-body.giovane {
        color: var(--black-color);
        background-color: #c44004 !important;
    }
    .card-body.kaua {
        color: var(--black-color);
        background-color: #040477 !important;
    }
    .card-body.gustavo {
        color: var(--black-color);
        background-color: #3e0268 !important;
    }
    .card-img.allyson {
        height: 30vh;
        background-image: url(imgs/efoto1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .card-img.giovane {
        height: 30vh;
        background-image: url(imgs/efoto2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .card-img.kaua {
        height: 30vh;
        background-image: url(imgs/efoto3.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .card-img.gustavo {
        height: 30vh;
        background-image: url(imgs/efoto4.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .image img{
        background-image: url(https://cdn11.bigcommerce.com/s-b70w3e4554/images/stencil/1280x1280/products/346/6881/001_PCS_TMNT_manhole__15647.1717096788.jpg?c=1);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .gradiente-banner {
        background-image: url(imgs/easteregg-home.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .form-control:focus{
        color:var(--white-color-footer2);
    }
    .form-control:hover{
        color:var(--white-color-footer);
    }
    label{
        color: var(--grey-color) !important;
    }
    .cardzin.card-body{
   background-color: var(--gogo);
    }
    .card-title{
        color: var(--white-color-footer);
    }
    div.card.text-center h2{
        color: var(--black-color);
    }
    .masrapaz{
        background-image: url(imgs/ecrie.png);
    }.masrapaze{
        background-image: url(imgs/ecriegrupo.png);
    }.votation-create, .grupo-create{
        ul{
            .concorrentes-container{
                background-color: var(--gogo);
            }
            li.list-group-item{
                --bs-list-group-bg: var(--gogo) !important;
                border: none;
            }
            .no-nothing{
                background-color: var(--gogo);
            }
        }
    }
    
    button.navbar-toggler{
        color: var(--white-color-footer);
        background-color: var(--white-color-footer);
    }
    @media (max-width:1023px){
        .bannerz {
            background-image: url(imgs/tmnt.png);
            height: 100vh;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }@media (max-width:768px){
        .masrapaz {
            background-image: url(imgs/ecrietablet.png);
    
        }.masrapaze {
            background-image: url(imgs/ecriegrupotablet.png);
        }.gradiente-banner {
            background-image: url(imgs/easteregg-home-tab.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
    }@media (max-width: 767px){
        .bannerz {
            background-image: url(imgs/mob-e.webp);
            height: 100vh;
            background-size: cover;
            background-repeat: no-repeat;
        }}
    @media (max-width:425px){
        .masrapaz {
            background-image: url(imgs/ecriemob.png);
    
        }.masrapaze {
            background-image: url(imgs/ecriegrupomob.png);
        }.bannerz {
            background-image: url(imgs/mob-e.webp);
            height: 100vh;
            background-size: cover;
            background-repeat: no-repeat;
        }
}}
.getup .modal .modal-dialog .modal-content{
    background-color: var(--white-color) !important;
    color: var(--black-color);
}
/* ------------------ Dark mode, switch e etc.------------------ */

#theme-switch {
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

#theme-switch svg {
    fill: var(--black-color);
}

#theme-switch svg:last-child {
    display: none;
}

.darkmode #theme-switch svg:first-child {
    display: none;
}

.darkmode #theme-switch svg:last-child {
    display: block;
}

/* ------------------ Navbar e seus itens ------------------ */
.navbar {
    background-color: var(--navbar-color) !important;
}

.navbar.link {
    color: var(--black-color) !important;
}

strong.rapaz {
    color: var(--white-color) !important;
}

button.rapaz {
    background-color: var(--black-color) !important;
    color: var(--white-color) !important;
    margin-left: 1.2vh;
    border-radius: 10vh;
    padding: 1vh;
    transition: background-color 0.3s, color 0.3s;
    border: none;
    margin-top: 1vh;
}

button.rapaz:hover {
    background-color: var(--white-color);
    color: var(--black-color);
}

button.rapaz a {
    color: inherit;
    text-decoration: none;
}

button.rapaz a:hover {
    color: inherit;
}

li.dropdown:last-child .dropdown-menu {
    right: 0;
    left: auto;
}

.dropdown-toggle::after {
    vertical-align: 0em;
}


/* ------------------ Banner ------------------ */
.bannerz {
    background-image: url(imgs/julio.png);
    width: calc(100vw - overflow-y);
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.gradiente-banner {
    background: linear-gradient(0deg, var(--baixo-banner) 0%, var(--topo-banner) 100%);
    font-family: 'Montserrat', sans-serif;
    height: 40rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

.dontget {
    background-color: #ffffff4f;
    text-align: center
}

.dontget:hover {
    background: linear-gradient(0deg, var(--vote-hoverr) 0%, var(--topo-banner)48 100%);
}

.amore {
    margin-top: 1vh;
}

.mfdoom {
    padding-top: 30vh;
    padding-bottom: 30vh;
}

.allcaps {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.onomatopeia {
    font-family: "Fredoka", sans-serif;
    font-size: 2.5rem;
    color: var(--white-color);
    margin-left: -23rem;
    animation: mexe 0.5s linear;
}

.onomatopeias {
    font-family: "Fredoka", sans-serif;
    font-size: 2.5rem;
    animation: mexe 0.5s linear;
}

.ayo {
    display: inline-block;
    animation: mexe 0.5s linear;
}

.rapaze {
    font-weight: 400;
    font-family: "Fredoka", sans-serif;
    background-color: var(--black-color-footer);
    color: var(--white-color-footer);
    padding-left: 5vh;
    padding-right: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-radius: 1vh;
    transition: background-color 0.3s, color 0.3s;
    border: none;
}


.rapaze:hover {
    background-color: var(--white-color);
    color: var(--black-color);
}

/* ------------------ Keyframes :) ------------------ */

@keyframes mexe {
    0% {
        transform: translateX(-1%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* ------------------ Próprios ------------------ */

body {
    background-color: var(--white-color);
    margin: 0;
}

html {
    scrollbar-color: var(--color-quenaotenhonome) var(--white-color);
}

footer {
    position: relative;
    background-color: var(--black-color-footer);
    color: var(--white-color);
    padding: 20px;
}

select {
    font-family: 'Montserrat', sans-serif !important;
}

option {
    color: var(--black-color);
    transition-property: color;
    transition-duration: 0.3s;
}

option:hover {

    border-left: 3px solid var(--grey-color);
    transform: scale(1.02);
}

p {
    color: var(--black-color);
}

strong {
    color: var(--black-color);
}

table,
th,
td {
    background-color: var(--white-color) !important;
    color: var(--black-color) !important;
    border: 1px solid;
    font-family: "Montserrat", sans-serif;
}

td {
    padding-right: 3vh;
}
datalist option{
    background-color: var(--white-color);
}
/* ------------------ Cards ------------------ */
.col {
    margin-top: 10vh;
    animation: mexe 0.5s linear;
}

/* ------------------ Multiplas funcoes / nao faço ideia ------------------ */

.computerzerapower {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 1.375rem;
    font-family: 'Montserrat', sans-serif !important;
}
.img-fluid.imagin {
background-image: url(imgs/quemsomosfoto.jfif) !important;
background-size: cover;
background-repeat: no-repeat;
}.cardzin.card-body{
   border-radius: 0.7%;
     }
.card-img.allyson {
    height: 30vh;
    background-image: url(imgs/foto1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.card-img.giovane {
    height: 30vh;
    background-image: url(imgs/foto2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.card-img.kaua {
    height: 30vh;
    background-image: url(imgs/foto33.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.card-img.gustavo {
    height: 30vh;
    background-image: url(imgs/foto4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.card-body.allyson {
    color: var(--black-color-footer) !important;
}
.card-body.giovane {
    color: var(--black-color-footer) !important;
}
.card-body.kaua {
    color: var(--black-color-footer) !important;
}
.card-body.gustavo {
    color: var(--black-color-footer) !important;
}
.image img{
    background-image: url(imgs/back-placeholder.jfif);
    background-size: cover;
    background-repeat: no-repeat;
}
.container {

    flex-grow: 1;
    min-height: var(--numero);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.profileGo {
    font-size: 1.5rem;
    color: var(--go);
    text-decoration: underline;
}

.card {
    background-color: var(--white-color);
    width: 100%;
}

.card-body {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.image-card {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.containerera {
    margin-top: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.text,
.image {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 10px;
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.miles {
    color: var(--black-color);
    font-size: 2.5rem;
}

.position-absolute {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
}

.footer-item {
    text-align: center;
    margin: 10px 0;
}

.footer-item p {
    color: var(--white-color-footer);
}

.footer-item .subtext {
    color: var(--grey-color);
}

.subtext {
    color: rgb(192, 191, 191);
    margin: 0;
    font-size: 0.8em;
}

.alo {
    border-radius: 10px;
    border-color: var(--grey-color);
}

.alo:hover {
    background: linear-gradient(0deg, var(--vote-hoverr) 0%, var(--topo-banner)48 100%);
}

.eusou {
    color: var(--black-color);
    padding: 1.5vh;
    font-size: 2.5rem;
}

.dora {
    color: var(--black-color);
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    font-size: 1.5rem;
}

.masrapaz {
    width: 100%;
    height: 75vh;
    background-image: url(imgs/crie.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    background-position: center;
    justify-content: center;
    text-align: center;
}

.masrapaze {
    width: 100%;
    height: 75vh;
    background-image: url(imgs/criegrupo.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    background-position: center;
    justify-content: center;
    text-align: center;
}
.ghettobird{
    color: var(--black-color);
}
.keepthepeace input, .keepthepeace datalist, .keepthepeace button{
    border-radius: 10px;
    border-color: var(--black-color);
    color: var(--black-color);
    background-color: var(--white-color);
}
.playagain{
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border-color: var(--black-color);
    color: var(--white-color-footer);
    background-color: red;
}

/* ------------------ MEDIAS!!!!!!!!!! ------------------ */


@media (max-width: 1024px) {
    .gradiente-banner {
        height: 40rem;
    }

    .addic {
        width: 80% !important;
    }
}

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        --bs-modal-width: 400px !important;
    }
}


@media (max-width: 768px) {
    .pokeimage{
        width: 40vw;
        height: 30vh;
    }
    .modal .g-recaptcha {
        transform: scale(0.90);
        -webkit-transform: scale(0.90);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        width: 100%;
    }
    #theme-switch {
      margin-left:45vw !important;
    }
    .aviso {
        display: none;
    }

    .container {
        flex-direction: column;
    }

    .containerera {
        flex-direction: column;
    }

    .swiper {
        width: 50vw !important;
        height: 30vh !;
    }

    .text,
    .image {
        flex: 1 1 100%;
    }

    .miles {
        font-size: 2em;
    }

    .collapse {
        text-align: center;
    }

    .bannerz {
        background-image: url(imgs/bannertablet.png);
    }

    .masrapaz {
        background-image: url(imgs/crietablet.png);

    }

    .masrapaze {
        background-image: url(imgs/criegrupotablet.png);
    }

    @media (max-width:712px) {
        .onomatopeia {
            margin-left: -1rem;
        }
    }
}

@media (max-width: 425px) {
    .pokeimage{
        width: 50vw;
        height: 30vh;
    }
    .gradiente-banner {
        height: 30rem;
    }
    #theme-switch {
        margin-left:41vw !important;
      }
    .onomatopeia {
        margin-left: -1rem;
    }

    .bannerz {
        background-image: url(imgs/bannermob.png);
        margin-top: -0.1rem;
    }

    .masrapaz {
        background-image: url(imgs/criemob.png);
        width: 100%;
        height: 60vh;
    }

    .masrapaze {
        background-image: url(imgs/criegrupomob.png);
        width: 100%;
        height: 60vh;
    }
}

@media (max-width: 320px) {
    .pokeimage{
        width: 60vw;
        height: 30vh;
    }
    .bannerz {
        background-image: url(imgs/bannermob2.jpg);
    }
    #theme-switch {
        margin-left:37vw !important;
      }
    .modal .g-recaptcha {
        transform: scale(0.90);
        -webkit-transform: scale(0.90);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        width: 100%;
    }

    .rapaze {
        display: none;
    }

    .masrapaz {
        width: 100%;
        height: 50vh;
    }

    .aviso {
        display: none;
    }
}