@font-face {
    font-family: ClubPenguin;
    src: url("Fontes/bumbastika.regular.ttf");
}

@font-face {
    font-family: Burbankbig;
    src: url("Fontes/BurbankBigCondensed/burbankbigcondensed_black.ttf");
}

@font-face {
    font-family: ACME;
    src: url("Fontes/ClubPenguinFonts/A.C.M.E.\ Secret\ Agent\ Bold.ttf");
}

@font-face {
    font-family: BarnetSans;
    src: url("Fontes/BarnetSans-Regular.otf");
}

@font-face {
    font-family: squares;
    src: url("Fontes/Square.ttf");
}

/*Fontes que serão usadas no blog :)*/

body {
    background-color: #33aaff;
}

.blog {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.elementos-principais {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.aba-pinguim {
    height: 120px;
    margin-top: 50px;
    margin-left: 40px;
}

.corpo {
    width: 1200px;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 50px;
}

.topo-corpo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
}

#logo {
    width: 300px;
}

.titulo {
    font-size: 40px;
    font-family: ClubPenguin;
    color: #036cb7;
}

#titulo h2 {
    margin: 0;
}

.subtitulo {
    padding-left: 40px;
    font-size: 35px;
    font-family: Burbankbig;
    color: #FFA71B;
}

.infos h2 {
    margin: 0;
}

.infos {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.imagem {
    width: 700px;
}

#introducao {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}

.texto {
    font-size: 25px;
}

#comunidade {
    display: flex;
    flex-direction: column;
}

#parte1-comunidade {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
    align-items: center;
}

#parte2-comunidade {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fanarts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.img-fanart {
    width: 350px;
}

.img-fanart2 {
    width: 200px;
}

#festas {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

#parte1-merchandise {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 40px;
}

#parte2-merchandise {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end
}

.imagem-merchandise {
    width: 300px;
}

#imagem-merchandise2 {
    height: 260px;
}

/*#img-mapa {
    height: 115px;
} */

.mapa {
    position: fixed;
    right: 22px;
    bottom: 30px;
}

.mapinha {
    width: 115px;
    height: 115px;
    background-image: url("Fotos/mapa.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.mapinha:hover {
    background-image: url("Fotos/mapa\ aberto.webp");
    cursor: pointer;
}

/* CSS da aba Personagens*/

.cards {
    height: 400px;
}

.cards:hover {
    scale: 1.04;
    cursor: pointer;
}

#linha-do-tempo {
    display: flex;
    gap: 30px;
}

#linha-tempo {
    display: flex;
    flex-direction: column;
}

.bolinha {
    height: 30px;
    width: 30px;
    background-color: #036cb7;
    border-radius: 50%;
}

.linha {
    height: 490px;
    width: 9px;
    background-color: #036cb7;
    align-self: center;
}

.img-tempo {
    height: 400px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.ano {
    font-family: ACME;
    font-size: 20px;
    /*color: #036cb7;*/
}

p.ano {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.div-linhatempo {
    display: flex;
    gap: 40px;
    align-items: center;
}

.tela-inteira {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.400);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapa-inteiro {
    width: 1100px;
    height: 700px;
    background-image: url("Fotos/Map_June_2015.png");
    background-size: cover;
    border: 9px solid white;
    position: relative;
}

.localizacao {
    position: absolute;
    color: rgba(255, 255, 255, 0);
}

.montanha {
    position: absolute;
    width: 200px;
    left: 133px;
    top: 175px;
}

.montanha:hover {
    scale: 1.1;
    cursor: pointer;
}

.montanha:hover+#locmontanha {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 270px;
    top: 180px;
}

.EPF {
    position: absolute;
    height: 57px;
    top: 306px;
    left: 280px;
}

.EPF:hover {
    scale: 1.1;
    cursor: pointer;
}

.EPF:hover+#locEPF {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 340px;
    top: 280px;
}

.farol {
    position: absolute;
    height: 109px;
    bottom: 217px;
    left: 23px;
}

.farol:hover {
    scale: 1.1;
    cursor: pointer;
}

.farol:hover+#locpersonagens {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 50px;
    top: 370px;
}

.catalogo {
    position: absolute;
    height: 80px;
    bottom: 250px;
    left: 316px;
}

.catalogo:hover {
    scale: 1.1;
    cursor: pointer;
}

.catalogo:hover+#loccatalogo {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 440px;
    top: 360px;
}

.plaza {
    position: absolute;
    height: 91px;
    bottom: 241px;
    right: 308px;
}

.plaza:hover {
    scale: 1.1;
    cursor: pointer;
}

.plaza:hover+#loclinhatempo {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 740px;
    top: 380px;
}

.dojo {
    position: absolute;
    height: 43px;
    top: 173px;
    right: 402px;
}

.dojo:hover {
    scale: 1.1;
    cursor: pointer;
}

.dojo:hover+#locdojo {
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    background-color: #ffef80;
    border: 2px solid #986b03;
    box-shadow: 0px 0px 0px 1px #bd9a30 inset;
    left: 660px;
    top: 160px;
}

.xis {
    position: absolute;
    height: 50px;
    top: 10px;
    right: 9px;
}

.xis:hover {
    scale: 1.1;
    cursor: pointer;
}

.imagem-personagens {
    width: 330px;
}

#rock {
    display: flex;
    flex-direction: row;
    gap: 150px;
    text-align: center;
}

.titulo-personagem {
    font-family: Burbankbig;
    font-size: 55px;
    color: #c21717;
}

#rock p {
    width: 500px;
}

.voce-sabia {
    margin-top: 40px;
}

.infos-personagem {
    display: flex;
    gap: 40px;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}

.infos-personagem p {
    width: 400px;
}

#foto-arctic {
    height: 300px;
    align-self: center;
}

#arct {
    display: flex;
    flex-direction: row;
    text-align: center;
    gap: 150px;
    margin-right: 40px;
}

.seta {
    rotate: -90deg;
    width: 80px;
    position: fixed;
    left: 20px;
}

.seta:hover {
    scale: 1.1;
    cursor: pointer;
}

.telefone {
    position: fixed;
    left: 22px;
    bottom: 30px;
}

.telefoninho {
    width: 115px;
    height: 115px;
    background-image: url("Fotos/EPF_Spy_Phone_icon.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.telefoninho:hover {
    background-image: url("Fotos/EPF_Phone_New_Message.webp");
    cursor: pointer;
}

#corpo-login {
    position: fixed;
    height: 600px;
    width: 800px;
    background-color: #fffbcb;
    align-self: center;
    border-radius: 30px;
    border: 2.5px solid #e4c35a;
    box-shadow: #e4c45a5c 0px -13px 25px 0px inset, #e4c45a5c 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    display: flex;
    flex-direction: column;
}

#topo-corpologin {
    display: flex;
    justify-content: center;
    margin: 15px;
    margin-bottom: 0;
}

#topo-corpologin h2 {
    color: white;
    font-family: ACME;
    font-size: 40px;
    -webkit-text-stroke: 3px #014da7;
}

#resto-corpo {
    display: flex;
}

#corpo-nome {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#corpo-nome h2 {
    font-family: BurbankBig;
    color: #5087ad;
}

#nome_pinguim {
    font-family: BurbankBig;
    color: #5087ad;
    text-align: center;
    height: 30px;
}

#img_pinguim {
    width: 300px;
}

.inserir {
    width: 250px;
    height: 30px;
    border: 2px solid #FFA71B;
    font-family: ACME;
    color: rgb(80, 80, 80);
}

#todas-cores {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cores {
    display: flex;
    gap: 4px;
}

.botaoCOR {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    border: 2px solid black;
}

.botaoCOR:hover {
    cursor: pointer;
}

#cor1 {
    background-color: #003366;
}

#cor2 {
    background-color: #009900;
}

#cor3 {
    background-color: #ff3399;
}

#cor4 {
    background-color: #333333;
}

#cor5 {
    background-color: #cc0000;
}

#cor6 {
    background-color: #ff6600;
}

#cor7 {
    background-color: #ffcc00;
}

#cor8 {
    background-color: #660099;
}

#cor9 {
    background-color: #996600;
}

#cor10 {
    background-color: #ff6666;
}

#cor11 {
    background-color: #006600;
}

#cor12 {
    background-color: #0099cc;
}

#cor13 {
    background-color: #8ae302;
}

#cor14 {
    background-color: #03a797;
}

#cor15 {
    background-color: #f0f0d8;
}

#cor16 {
    background-color: #c478cf;
}


#final-corpo {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-top: 20px;
}

#btn_continue {
    position: fixed;
    margin-right: 18px;
    font-family: ACME;
    font-size: 20px;
    background-color: #ffb30d;
    border: 3px solid #d47b00;
    border-radius: 20px;
    color: white;
    height: 45px;
    width: 160px;
    -webkit-text-stroke: 1.5px black;
}

#btn_continue:hover {
    cursor: pointer;
}

#entrarlogin {
    margin: 0;
    margin-top: 20px;
    margin-left: 20px;
    font-family: BurbankBig;
    color: #5087ad;
}

#entrarlogin:hover {
    cursor: pointer;
}

#xis {
    font-family: ACME;
    font-size: 15px;
    color: #e4c35a;
    position: absolute;
    margin: 0;
    right: 20px;
    top: 20px;
}

#xis:hover {
    scale: 1.1;
    cursor: pointer;
}

.aba-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 470px;
    width: 400px;
    border: 3px solid #003366;
    background: #4173e8;
    background: radial-gradient(circle, rgba(65, 115, 232, 1) 0%, rgba(41, 106, 217, 1) 14%, rgba(17, 76, 143, 1) 100%);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 24px;
    gap: 40px;
}

.aba-login .campos {
    display: flex;
    flex-direction: column;
    gap: 30px;

}

.aba-login .campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aba-login h2 {
    font-family: BarnetSans;
    font-size: 26px;
    font-style: normal;
    color: rgb(0, 0, 0);
    font-weight: 400;
    margin: 0;
}

.pwd {
    width: 250px;
    height: 40px;
    border: 1.7px solid rgb(65, 65, 65);
    font-family: BarnetSans;
    font-size: 20px;
    color: #333333;
    border-radius: 7px;
}

#caixas {
    display: flex;
    align-self: center;
    gap: 10px;
}

#boxes {
    display: flex;
    flex-direction: column;
}

#btn_entrar {
    height: 80px;
    width: 250px;
    border-radius: 20px;
    border: 2.4px solid #003366;
    box-shadow: rgba(17, 17, 26, 1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    background: #5aa4ed;
    background: linear-gradient(180deg, rgba(90, 164, 237, 1) 0%, rgba(9, 83, 153, 1) 48%, rgba(10, 93, 171, 1) 82%, rgba(96, 168, 235, 1) 100%);
    color: white;
    font-size: 20px;
    cursor: pointer;
}

#btn_entrar:hover {
    background: #2d8ceb;
    background: linear-gradient(180deg, rgba(45, 140, 235, 1) 0%, rgba(7, 70, 130, 1) 48%, rgba(10, 81, 148, 1) 82%, rgba(27, 130, 227, 1) 100%);
}

#fechar-login {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 60px;
    width: 140px;
}

#fechar-login {
    font-size: 20px;
    margin: 0;
    justify-self: center;
}

#fechar-login {
    cursor: pointer;
}

.telainteira {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #27282951;
}

#mensagem {
    width: 525px;
    height: 375px;
    background-color: #ff6600;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

#mensagem button {
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    width: 250px;
    height: 80px;
    background-color: #ff6600;
    border: 3.5px solid #983901;
    border-radius: 25px;
    box-shadow: #ffc700 2px 2px 3px 1px, #ffc700 2px 1.3px 3px 0px inset;
}

#mensagem button:hover {
    scale: 0.970;
    cursor: pointer;
}

#mensagem h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: lighter;
    text-align: center;
    line-height: 30px;
    max-width: 400px;
    margin: 0;
}

/* BOX SHADOW - MENSAGEM */
#mensagem {
    border: 3.5px solid #983901;
    box-shadow: #ffffff 0px 0px 2px 2px, #85a6bc 0px 0px 2px 4.5px, #ffc700 3px 3px 2px 0px inset;
}

#celular {
    position: relative;
    width: 450px;
    height: 730px;
    background-image: url("Fotos/BLANK_EPF_PHONE_HD.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.icons {
    position: absolute;
    width: 120px;
}

.icons:hover {
    scale: 1.08;
    cursor: pointer;
}

#escudoicon {
    top: 125px;
    left: 85px;
}

#pinguimicon {
    top: 115px;
    right: 85px;
}

#mensagemicon {
    top: 310px;
    right: 85px;
}

#celular h2 {
    font-family: squares;
    color: #6da39b;
}

#excudotxt {
    position: absolute;
    text-align: center;
    width: 120px;
    top: 230px;
    left: 85px;
}

#mensagemtxt {
    position: absolute;
    text-align: center;
    width: 120px;
    top: 405px;
    left: 85px;
}

#pinguimtxt {
    position: absolute;
    text-align: center;
    width: 120px;
    top: 230px;
    right: 85px;
}

#btnsair {
    position: absolute;
    width: 56px;
    bottom: 20px;
    left: 198px;
}

#btnsair:hover {
    scale: 1.05;
    cursor: pointer;
}

#LOGINicon {
    top: 290px;
    left: 85px;
}

#TABELASicon {
    top: 460px;
    left: 85px;
}

#doctxt {
    position: absolute;
    text-align: center;
    top: 405px;
    right: 65px;
}

#modelagemtxt {
    position: absolute;
    text-align: center;
    top: 570px;
    left: 80px;
}

#imgmodelagem {
    width: 900px;
    border: 4.5px solid white;
    border-radius: 40px;
    box-shadow: #ffffff 0px 0px 2px 2px, #85a6bc 0px 0px 2px 4.5px, #ffc700 3px 3px 2px 0px inset;
}

#imgmodelagem:hover {
    cursor: pointer;
}

#TOAST {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 265px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.92);
    border: 4px solid #30beec;
    border-radius: 20px;
}

#TOAST img {
    width: 80px;
}

#TOAST h4 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

#subagradecimentos {
    text-align: center;
    font-size: 50px;
    padding-left: 0px;
}

#subagradecimentos h2 {
    margin-top: 10px;
}

.subcred {
    text-align: center;
    font-family: BurbankBig;
    font-size: 45px;
    color: #036cb7;
}

.conteudo {
    justify-self: center;
    margin: 40px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    max-width: 600px;
}

.conteudo img {
    width: 400px;
}

.imagens-familia {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.imagens-familia img {
    width: 300px;
}

#pnina {
    margin: 20px;
    text-align: center;
    font-family: BurbankBig;
    font-size: 100px;
    color: rgb(249, 109, 156);
}

#divjuntos {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

#divjuntos img {
    width: 500px;
}

.itemescondido:hover {
    cursor: pointer;
    font-style: italic;
}

#botoculto {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #00336600;
    margin-left: 145px;
    margin-top: 15px;
}

#botoculto:hover {
    cursor: pointer;
}

#botcaveira {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #00336600;
    margin-left: 790px;
    margin-top: 760px;
}

#botcaveira:hover {
    cursor: pointer;
}

#divimg {
    position: fixed;
    left: 42px;
    bottom: 160px;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 50%;
    border: 3.5px solid #003e8a;
}

#fotoPinguim {
    margin-top: 22px;
    max-width: 100%;
    scale: 2.5;
}