/* =========================
   FUENTE
========================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* =========================
   CONTENIDO
========================= */

.window-content{
    padding:20px;
}

.header-window,
.miku-assistant,
.character-window,
.footer-window{
    background:#85cddb;
    border:3px solid white;
    outline:3px solid #8a78ff;
    margin-bottom:25px;
    position:relative;
    box-shadow:
    0 0 10px #8a78ff,
    0 0 25px rgba(138,120,255,.5);
}

/* =========================
   TITULOS
========================= */


/* BOTONES FALSOS */
.window-title::after{
    content:"◯ ◯ ◯";
    float:right;
    letter-spacing:4px;
    font-size:1rem;
}


/* =========================
   MIKU
========================= */

.miku-assistant{
    position:relative;
    overflow:visible;
}

.miku-assistant img{
    max-width:250px;
    display:block;
    margin:auto;
}

.assistant-text{
    text-align:center;
    margin-top:15px;
}


/* MIKU SOBRE LA VENTANA */

.miku-overlay{
    position:absolute;
    right:-30px;
    bottom:-20px;
    width:220px;
    z-index:999;
    pointer-events:none;
}


/* =========================
   PERSONAJES
========================= */

.characters{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
}


/* TARJETAS */

.character-window{
    transition:.3s;
}


/* IMAGENES */

.character-window img{
    width:100%;
    display:block;
    border-bottom:2px solid #9d8dff;
}


/* TEXTO */
.character-info{
    padding:15px;
}

.character-info h2{
    font-size:2rem;
    margin-bottom:10px;
    color:#6a53ff;
}

.character-info p{
    font-size:1.4rem;
    margin-bottom:15px;
}

/* SHIN HAEIN */
.haein{
    outline-color:#ff9fd8;
}

.haein .window-title{
    background:linear-gradient(
    90deg,
    #7ee7ff,
    #ff9fd8,
    #7ee7ff);
}

/* ZAIDA */
.zaida{
    outline-color:#74d97f;
}

.zaida .window-title{
    background:linear-gradient(
    90deg,
    #7ee7ff,
    #74d97f,
    #7ee7ff);
}

/* MARIN */
.marin{
    outline-color:#ffd966;
}

.marin .window-title{
    background:linear-gradient(
    90deg,
    #7ee7ff,
    #ffd966,
    #7ee7ff);
}

/* NAZUNA */
.nazuna{
    outline-color:#b388ff;
}

.nazuna .window-title{
    background:linear-gradient(
    90deg,
    #7ee7ff,
    #b388ff,
    #7ee7ff);
}

/* AMITY */
.amity{
    outline-color:#7f5cff;
}

.amity .window-title{
    background:linear-gradient(
    90deg,
    #7ee7ff,
    #7f5cff,
    #7ee7ff);
}

/*BRILLOS*/

.haein:hover{
    box-shadow:
    0 0 20px #7ee7ff,
    0 0 40px #ff9fd8;
}

.zaida:hover{
    box-shadow:
    0 0 20px #7ee7ff,
    0 0 40px #74d97f;
}

.marin:hover{
    box-shadow:
    0 0 20px #7ee7ff,
    0 0 40px #ffd966;
}

.nazuna:hover{
    box-shadow:
    0 0 20px #7ee7ff,
    0 0 40px #b388ff;
}

.amity:hover{
    box-shadow:
    0 0 20px #7ee7ff,
    0 0 40px #7f5cff;
}

/* =========================
   BOTONES REDES
========================= */

.social-links{

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.social-links a{
    text-decoration:none;
    color:#5f48aa;
    background:
    linear-gradient(
    #ffffff,
    #d9e7ff);
    border:2px solid white;
    outline:2px solid #9d8dff;
    padding:8px 15px;
    font-size:1.2rem;
    transition:.2s;
}

.social-links a:hover{
    background:#7ee7ff;
    color:white;
    transform:translateY(-3px);
    box-shadow:
    0 0 10px #7ee7ff;
}


/* =========================
   STICKERS
========================= */

.sticker{

    position:fixed;
    pointer-events:none;
    z-index:100;
}


/* EJEMPLOS */

.miku1{
    width:180px;
    right:-50px;
    top:150px;
    transform:rotate(8deg);
}

.star1{
    width:60px;
    left:-15px;
    top:400px;
}

.heart1{
    width:70px;
    right:40px;
    bottom:150px;
}