@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@300;400;500;600;700&display=swap');
@import url(fonts.css);

/* Kirby - https://www.cursors-4u.com/cursor/kirby-walking-13 */
* {
    cursor: url('https://cdn.cursors-4u.net/previews/nintendo-game-boy-pocket-e1353550-32.webp') 32 32, auto !important;
}

html {
    scrollbar-color: #353632 #87b954;
}

html::selection {
    color: #87b954;
    background-color: #353632;
    text-shadow: 1px 1px 2px #87b954;
}

body {
    background-color: #353632;
}

header {

    height: 100px;
    background-image: url('patterns/batpattern.png');

    background-size: 20%;
    display: flex;
    border: #8245bb 3px dashed;
    border-radius: 10px;

}

/* roxo : #9a58d8 
roxo escuro: #8245bb 
roxo claro: #b077e6
roxo mais escuro: #472468
cinza: #353632
verde: #87b954*/
header p {
    font-family: "basic", sans-serif;
    align-content: end;
    margin-left: 70%;
}

footer {
    background-image: url(patterns/webpattern.png);
    background-size: 50%;
    height: 150px;
    display: flex;
    text-align: center;

    border: #472468 5px dashed;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

footer p {

    font-family: 'punk4';
    color: #472468;
    font-size: 30px;
    font-weight: 500;
}

.header2 ul {
    display: flex;
    list-style: none;

}

.header2 li {
    margin-left: 35px;
    font-family: pixelpunk;
    font-weight: 400;
    font-size: 35px;

}

.header2 li a {
    text-decoration: none;
    color: #472468;
}

.header2 li a:hover {
    color: #2f1548;
}

.header2 {

    height: 70px;
    background-image: url('patterns/alien.png');
    margin-top: 30px;
    background-size: 20%;
    display: flex;
    border: #472468 2px dashed;
    border-radius: 10px;


}

.container {
    display: flex;
    width: 100%;
}

.box1 {
    width: 1000px;
    height: 800px;
    min-width: 1000px;
    min-height: 800px;
    background-color: #8245bb;
    margin: 10px;
    margin-right: 20px;
   border-radius: 2px;
}

.box2 {
    width: 500px;
    height: 800px;
    min-width: 500px;
    min-height: 800px;
    background-color: #8245bb;
    margin: 10px;
   border-radius: 2px;
}

.box3 {
    width: 450px;
    height: 800px;
    min-width: 450px;
    min-height: 800px;
    background-color: #8245bb;
    margin: 10px;
   
    border-radius: 2px;
}

/* ---------------------TALK BOX1 ----------------------*/
.s_box32 {
    background: #b077e6;
    border: 2px solid #472468;
    box-sizing: border-box;
    margin: 20px;
    /* 中央寄せは0をautoに変更 */
    padding: 1em;
    position: relative;
    width: 70%;

}

.s_box32::before,
.s_box32::after {
    border: 8px solid transparent;
    content: '';
    left: 30px;
    /* 三角の位置 */
    position: absolute;
    top: 100%
}

.s_box32::before {
    border-top: 8px solid #472468
}

.s_box32::after {
    border-top: 8px solid #b077e6;
    margin-top: -3px
}

.s_box32 p {
    margin: 0;
    font-family: vcr;
}

/* ----------------- */
.games {
    background-image: url(/patterns/plaid.png);
    width: fit-content;
    padding: 10px;
    border-radius: 8px;
    margin: 30px;
    border: #1d1d1b 2px dotted;
    margin-top: 3px;

}

.games p {
    font-size: 20px;
    margin-left: 10px;
    font-family: alagard;
    color: #729d47;

}

.games li {
    font-family: 'typecast';
    font-size: 20px;
    color: #87b954;
    list-style: none;
}

.divider {
    border: #472468 1px solid;
    background-color: #4724684e;

}

.img-alien {
    background-image: url(https://64.media.tumblr.com/23d71cd11ac1d0e71f2f2723dc3293df/a9761444703e0a25-6a/s1280x1920/ad3f3d4585323d11bc73b22665ef3cee48f4e144.pnj);
    transition: transform 0.5s ease;
    height: 100px;

    width: 100%;
    background-repeat: repeat;
}

.img-alien:hover {
    transform: scale(1.01)
}

.flex {
    display: flex;
}

.talk {
    background-image: url(https://64.media.tumblr.com/37a2510005ade822362aa7eefe5394b9/c7d5cb4694d9bbe6-68/s250x400/df287d27e6d0ce853d9c6c599a39bc0db6f6bb6c.gifv);
    width: 70%;
    height: fit-content;
    margin-top: 3px;
    padding: 10px;
    border: #729d47 1px solid;
}

.talk p {
    color: #87b954;
    font-family: basic;
}

.frank {
    width: 190px;
    margin-top: -15px;
    border: 2px solid #472468;
    transition: transform 0.5s ease;
}

.imgfrank {
    display: grid;
}

.tv1 {
    position: absolute;
    width: 190px;

    border: 2px solid #472468;
    margin-top: 25px;
    transition: transform 0.5s ease;
    z-index: 5;
    opacity: 0.6;
    position: absolute;

}

.tv1:hover {
    transform: scale(1.05)
}

small {
    font-family: web;
    margin-top: 10px;
}

.plataformas {
    background-image: url(https://i.pinimg.com/1200x/86/e5/bd/86e5bdb5e2c7b207c8ececfdeade5820.jpg);
    width: 95%;
    height: 150px;
    margin-top: -15px;
    padding: 10px;
    padding-top: 5px;
    margin-left: 10px;
    border: #729d47 1px solid;
}

.plataformas p {
    color: #87b954;
    font-family: basic;
    margin-top: -1px;
}

marquee {
    color: #68319c;
    height: 23px;

}

/* --------------BOX2----------------- */

.flexstardew {
    display: flex;

}

.box2 h2 {
    font-family: alk;
    margin: 10px;
    color: #2f1548;
    font-size: 40px;
}

.tv2 {
    position: absolute;
    width: 500px;
    height: 70px;

    border: 2px solid #472468;
    margin-top: -216px;
    margin-left: -2px;
    transition: transform 0.5s ease;
    z-index: 5;
    opacity: 0.6;
    position: absolute;

}

.tv3 {
    width: 136px;
    height: 136px;
    border: 2px solid #472468;
    margin-top: -140px;
    margin-left: 77px;
    z-index: 5;
    opacity: 0.6;
    position: absolute;
}

.tv4 {
   width: 136px;
    height: 136px;
    border: 2px solid #472468;
    margin-top: -140px;
    margin-left: 217px;
    z-index: 5;
    opacity: 0.6;
    position: absolute;

}

.tv5{
    width: 136px;
    height: 136px;
    border: 2px solid #472468;
    margin-top: -140px;
    margin-left: 357px;
    z-index: 5;
    opacity: 0.6;
    position: absolute;

}
.divider2{
    background-image: url(https://64.media.tumblr.com/a1282ef4b628dea394d64ab4de4a16c0/84665aab32fa0824-b4/s1280x1920/e3550216228b914284b0e8b5675d8982b3568053.gifv);
    width: 100%;
    height: 50px;
    background-repeat: repeat;
    margin-top: 10px;
    border: #2f1548 1px solid;
}
.skin{
    width: 300px;
    border: #729d47 1px solid;
    margin: 10px;
}
.codtalking{
    font-family: notepen;
    width: 50%;
    font-size: 20px;
    color: #2f1548;
    margin: 10px;
}
.gametable{
    margin-top: -90px;
    margin-left: 20px;
}
.tablep{
     
    
   color: #729d47;
    font-size: 20px;
    font-family: web;
}
.tablep2{
   
   
   color: #729d47;
    font-size: 20px;
    font-family: web;
}
table{
  
  
   background-color: #5c803941;
    border: #5c8039 1px dotted;
    font-size: 20px;
    color: #729d47;
}
th{
    padding-left: 9px;
    font-family: web;
}
td{
    padding: 5px;
    border: #5c8039 1px dotted;
    font-family: web;
}
/* -------------------------BOX3--------------------- */
.box3 h2 {
    font-family: alk;
    margin: 10px;
    color: #2f1548;
    font-size: 40px;
}
.v1{
    border: #2f1548 1px solid;
    background-color: #2f154846;
   margin: 10px;
}
.v2{
    border: #2f1548 1px solid;
    background-color: #2f154846;
   margin: 10px;
}
.v3{
    border: #2f1548 1px solid;
    background-color: #2f154846;
   margin: 10px;
}
.v4{
  position: absolute;
  margin-left: -130px;
  margin-top: -20px;
  z-index: 2;
}
.cyberpunk{
    font-family: typecast;
   width: 170px;
    position: absolute;
    margin-left: 270px;
    font-size: 25px;
    margin-top: -160px;
    color: #472468;
}
.divider3{
    background-image: url(https://64.media.tumblr.com/28dd29c1d5ac6e1b09484da5a954dc16/84665aab32fa0824-96/s1280x1920/4aba4546dd369501f34a6c92343ed9f2077a515f.gifv);
    width: 100%;
    height: 20px;
    background-repeat: repeat;
    margin-top: 315px;
    border: #2f1548 1px solid;

}
/* --------STICKERS------------ */
.stickers-box3-bottom{
    position: relative;
    inset: 0;
    height: 0;
}
.stickers-box3-top{
    position: relative;
    inset: 0;
    height: 0;
}
.stickers-box2-bottom{
    position: relative;
    inset: 0;
    height: 0;
}
.stickers-box1-bottom{
    position: relative;
    inset: 0;
    height: 0;
}
.stickers-box1-top{
    position: relative;
    inset: 0;
    height: 0;
}
.tvsp{
    width: 250px; 
    position: absolute;
    z-index: 3;
    margin-top: 130px;
    margin-left: 10px;
}
.alienqueen{
    width: 190px; 
    position: absolute;
    z-index: 1;
    margin-top: 40px;
    margin-left: 10px;
}
.bill{
    width: 60px; 
    position: absolute;
    z-index: 1;
    margin-top: -350px;
    margin-left: -10px;
}
.cat{
    width: 30px; 
    position: absolute;
    z-index: 1;
    margin-top: -420px;
    margin-left: 15px;
}
.hand{
    position: absolute;
    width: 50px;
    margin-left: 310px;
    margin-top: 100px;
}
.mars{
    position: absolute;
    width: 50px;
    margin-left: 900px;
    margin-top: -235px;
    z-index: 1;

}
.mars:hover{
    animation: girarENaoVoltar 1s forwards;
}
@keyframes girarENaoVoltar {
    from { transform: rotate(0deg); }
    to { transform: rotate(5turn); }
}
.sign{
    position: absolute;
    width: 100px;
    margin-top: -175px;
    margin-left: 230px;
}
.aliens{
    display: flex;
    gap: 100px;
    margin-left: 18%;
    background-color: #1d1d1b7d;
    border-radius: 8px;

}
.see{
    width: 90px;
    height: 75px;
    transition: 1s ease;
}
.see:hover{
    transform: scale(1.1);
}
.hear{
   width: 90px;
    height: 75px;
    transition: 1s ease;
}
.hear:hover{
transform: scaleX(-1);
}
.talkalien{
   width: 90px;
    height: 75px;
    transition: 1s ease;
}
.talkalien:hover{
    transform: rotate3d(1, 2, 3, 10deg);
}
.ufo{
    position: absolute;
    width: 70px;
    margin-top: -790px;
    margin-left: 900px;
    z-index: 9;
    transform: rotate(8deg);
}