@font-face {
    font-family: "f_apple_garamond_light";
    src: url(../fonts/f_apple_garamond_light.ttf);
}

@font-face {
    font-family: "f_apple_garamond";
    src: url(../fonts/f_apple_garamond.ttf);
}

@font-face {
    font-family: "f_grafmassa";
    src: url(../fonts/f_grafmassa.ttf);
}

::selection {
    color: #ff00ab;
    background-color: #75ff4a;
}

* {
    cursor: url(https://cur.cursors-4u.net/nature/nat-9/nat839.cur), auto;
}

body {
    background-color: #404040;
    image-rendering: pixelated;
    background-image: url(../edited_images/backgrounds/ei_halftone_background.png);
    background-size: contain;
}

.caja_madre {
    display: grid;
    grid-template-columns: 12% 12% 12% 12% 12%;
    place-content: center;
    margin: 4vw 0vw;
    background-color: transparent;
    overflow-x: hidden;
    overflow-y: scroll;
}

span.fondo_negro {
    background-color: rgba(0, 0, 0, 80%);
    color: white;
}

span.fondo_negro_break {
    background-color: rgba(0, 0, 0, 80%);
    color: white;
}

span.fondo_blanco_con_pointer {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 90%);
    color:black
}

.subtitulo {
    font-family: "f_grafmassa";
    font-size: 2vw;
    line-height: 2.5vw;
    word-spacing: 1vw;
    margin: 1.1vw 0.9vw 0vw 0.9vw;
    text-shadow: -0.2vw -0.2vw 0vw white,
                 0.2vw -0.2vw 0vw white,
                 -0.2vw 0.2vw 0vw white,
                 -0.2vw -0.2vw 0vw white;
}

.descripcion {
    font-size: 1.1vw;
    font-family: "f_apple_garamond";
    margin: 0.45vw 0.9vw 1.1vw 0.9vw;
    line-height: 1.55vw;
    color: white;
}

.primera_caja_de_menu {
    margin-top: -0.4vw;
    margin-bottom: 0.8vw;
    line-height: 0.7vw;
}

.caja_de_menu {
    margin-bottom: 0.8vw;
    line-height: 0.7vw;
}

.ultima_caja_de_menu {
    margin-bottom: 1vw;
    line-height: 0.7vw;
}

/* vectores */

.vector_uno {
    position: fixed;
    top: 0%;
    left: -11%;
    transform: rotate(90deg);
    width: 40vw;
    opacity: 70%;
    filter: brightness(30%);
}

.vector_dos {
    position: fixed;
    top: 50%;
    left: 76%;
    width: 32vw;
    opacity: 70%;
    filter: brightness(20%);
}

/* intro */

.caja_de_intro {
    width: 110%;
    grid-column: 1 / span 5;
    grid-row: 1 / span 1;
    justify-self: center;
    background-color: #00ffff;
    background-image: url(../edited_images/backgrounds/ei_miku_metro_background.png);
    background-size: cover;
    background-position: 50% -90%;
    color: white;
    border: 0.5vw solid #54FFFF;
    text-align: center;
}

.titulo_de_intro {
    margin: 3vw 1.8vw 2.2vw 1.8vw;
    font-family: "f_grafmassa";
    font-size: 3vw;
    line-height: 0.1vw;
    word-spacing: 1vw;
    text-shadow: -0.3vw -0.3vw 0vw black,
                 0.3vw -0.3vw 0vw black,
                 -0.3vw 0.3vw 0vw black,
                 -0.3vw -0.3vw 0vw black,
                 -0.5vw -0.5vw 0vw cyan,
                 0.5vw -0.5vw 0vw cyan,
                 -0.5vw 0.5vw 0vw cyan,
                 -0.5vw -0.5vw 0vw cyan;
}

.descripcion_de_intro {
    font-size: 1.2vw;
    font-family: "f_apple_garamond";
    margin: 0vw 1.4vw 1.2vw 1.4vw;
}

.enlaces_de_intro {
    font-size: 1.2vw;
    font-family: "f_apple_garamond";
    text-align: center;
    line-height: 0.85vw;
    margin-bottom: 1.5vw;
}

.enlace_para_volver:link, .enlace_para_volver:visited {
    text-decoration: none;
    background-color: rgba(84, 255, 255, 90%);
    color: white;
    cursor: pointer;
}

.enlace_para_volver:hover, .enlace_para_volver:active {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 95%);
    color: #54FFFF;
    cursor: pointer;
}

/* mutuals */

.caja_de_mutuals {
    grid-column: 1 / span 5;
    width: 90%;
    grid-row: 2 / span 1;
    justify-self: center;
    overflow: scroll;
    margin: 1vw;
    border: 0.5vw solid #d260ff;
    background-color: #bc13fe;
    background-image: url(../edited_images/backgrounds/ei_rainbow_metro_background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: screen;
    text-align: center;
}

.enlace_de_mutuals:link, .enlace_de_mutuals:visited {
    text-decoration: none;
    background-color: rgb(210, 96, 255, 80%);
    color: white;
    cursor: pointer;
}

.enlace_de_mutuals:hover, .enlace_de_mutuals:active {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 90%);
    color: #D260FF;
    cursor: pointer;
}

.link_me {
    font-size: 1.1vw;
    font-family: "f_apple_garamond";
    margin: -0.3vw 0.9vw 1.1vw 1.4vw;
    line-height: 1.7vw;
    color: white;
}

.text_area_mi_boton {
    margin: 0.1vw 1vw -0.5vw 11vw;
    color: white;
    background-color: #D260FF;
    background-clip: content-box;
    border: 0.3vw dotted black;
    width: 10vw;
    font-size: 0.8vw;
}

.mi_boton {
    display: inline;
    margin: 1vw 11vw -0.5vw 0.1vw;
    width: 6.111vw;
}

.botones_de_mutuals {
    margin: 0vw 1% 0.8vw 1%;
}

.link_sin_decoracion:link, .link_sin_decoracion:visited, .link_sin_decoracion:hover, .link_sin_decoracion:active {
    text-decoration: none;
}

.boton {
    height: 2.153vw;
    cursor: pointer;
}

/* sitios */

.caja_de_sitios {
    width: 100%;
    background-color: #f435ab;
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    justify-self: left; 
    margin: 1vw;
    margin-top: 0vw;
    border: 0.5vw solid #fb58bc;
    text-align: left;
    font-size: 1.1vw;
    font-family: "f_apple_garamond";
    background-image: url(../edited_images/backgrounds/ei_dancing_metro_background.webp);
    background-size: 80vw;
    background-blend-mode: color-dodge;
}

.enlace_de_sitios:link, .enlace_de_sitios:visited {
    background-color: rgba(255, 255, 171, 90%);
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.enlace_de_sitios:hover, .enlace_de_sitios:active {
    background-color: rgba(0, 0, 0, 80%);
    color: #FFFFAB;
    text-decoration: none;
    cursor: pointer;
}

/* especifico */

.caja_de_especifico {
    grid-column: 2 / span 4;
    grid-row: 4 / span 1;
    justify-self: right;
    margin: 1vw;
    margin-top: 0vw;
    border: 0.5vw solid #CFFF0A;
    background-color: #CFFF04;
    background-image: url(../edited_images/backgrounds/ei_city_metro_background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: screen;
    text-align: right;
    font-size: 1.1vw;
    font-family: "f_apple_garamond";
    width: 100%;
}

.enlace_de_especificos:link, .enlace_de_especificos:visited {
    background-color: rgba(255, 255, 171, 90%);
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.enlace_de_especificos:hover, .enlace_de_especificos:active {
    background-color: rgba(0, 0, 0, 80%);
    color: #FFFFAB;
    text-decoration: none;
    cursor: pointer;
}