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

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

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

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

body {
    background-color: #ffe8f3;
    background-image: radial-gradient(#c79273 15%, transparent 16%),
                      radial-gradient(#c79273 15%, transparent 16%);
    background-size: 50px 50px; 
    background-position: 0 0, 25px 25px;
    image-rendering: pixelated;
}

.caja_madre {
    display: grid;
    grid-template-columns: 35% 21% 21% 21%;
    place-content: center;
    margin: 0vw;
    background-color:transparent;
}

.cabezera {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    margin: 2vw;
    padding: 0vw;
    position: relative;
    background-color: transparent;
}

.caja_de_titulo {
    position: relative;
    text-align: center;
}

.sobre_con_papel {
    width: 80%;
    rotate: -5deg;
}

.titulo {
    position: absolute;
    color: #333333;
    top: 39%;
    left: 58%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-family: "f_cutie_pop";
    letter-spacing: 2px;
    rotate: -34deg;
}

.estuche {
    grid-column: 2 / span 3;
    grid-row: 1 / span 1;
    margin: 2vw;
    padding: 2vw;
    margin-left: 0vw;
}

.espejo {
    position: absolute;
    width: 66%;
    rotate: 9deg;
    top: 0vw;
    right: 3svw;
}

.primer_lapiz {
    position: absolute;
    width: 35%;
    rotate: 2deg;
    top: 4vw;
    right: 2vw;
}

.primer_lapiz:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.lipgloss {
    position: absolute;
    width: 23%;
    rotate: 20deg;
    top: 5vw;
    right: 5vw;
}

.lipgloss:hover {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

.diario {
    grid-column: 1 / span 4;
    grid-row: 2 / span 1;
    background-color: transparent;
    margin: 1vw;
    margin-bottom: 0vw;
    padding: 2vw;
    background-image: url("../edited_images/pngs/e_diary_open.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.caja_de_diario {
    width: 88vw;
    height: 69vw;
    color: #333333;
    font-family: "f_xiomara";
    font-weight: 90;
    font-size: 1.4rem;
}

.caja_de_texto {
    display: grid;
    grid-template-columns: 51% 48%;
    margin: 2vw;
    width: 82vw;
    height: 61vw;
    color: #333333;
    font-family: "f_xiomara";
    font-size: 1.5rem;
}

.navegador {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    padding: 1.5vw;
    overflow: scroll;
}

.titulo_del_navegador {
    font-size: 3rem;
    font-family: "f_retroma_vibes";
    text-align: center;
    margin-bottom: 0vw;
    padding: 1vw;
}

.links_de_entrada {
    text-align: right;
    margin-bottom: 0vw;
    padding: 1vw;
}

a.enlace_de_entrada:link, a.enlace_de_entrada:visited {
    color: #ffa8d0;
    text-shadow: 1px 1px 5px rgba(255, 234, 222, 0);
    text-decoration-color:#c79273 !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 5px !important;
    cursor: pointer !important;
}

a.enlace_de_entrada:hover, a.enlace_de_entrada:active {
    color: #c79273;
    text-shadow: 1px 1px 5px rgba(255, 234, 222, 0);
    text-decoration-color:#ffa8d0 !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 5px !important;
    cursor: pointer !important;
}

.contenido {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    padding: 1.5vw;
    padding-left: 3.5vw;
    overflow: scroll;
}

h2 {
    display: inline-block;
    margin: 0vw;
    font-size: 1.7rem;
    font-weight: 100;
    color: #C79273;
    text-align: left;
}

h2:target {
    display: inline-block;
    margin: 0vw;
    font-size: 1.7rem;
    font-weight: 100;
    color: #C79273;
    padding: 0.2vw;
    padding-right: 1vw;
    padding-left: 1vw;
    text-align: left;
    background-color: #ffe8f3;
}

.pie {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    margin: 0vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 1vw;
}

.caja_de_enlaces {
    width: 30%;
    background-color: #C79273;
    background-size: 50px 50px; 
    background-position: 0 0, 25px 25px;
    margin: auto;
    padding: 2vw;
    border-image-slice: 350 350 350 350;
    border-image-width: 40px 40px 40px 40px;
    border-image-outset: 31px 31px 31px 31px;
    border-image-repeat: repeat repeat;
    border-image-source: url(../edited_images/borders_and_text_boxes/e_lacy_border_3.png);
    border-style: solid;
}


.enlaces_de_atras { 
    font-size: 1.1rem;
    font-family: "f_cutie_pop";
    letter-spacing: 2px;
    text-align: center;
}

a.enlace:link, a.enlace:visited {
    color: #ffe8f3;
    text-shadow: 1px 1px 5px rgba(255, 234, 222, 0);
    text-decoration-color:#ffa8d0 !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 3px !important;
    cursor: pointer !important;
}

a.enlace:hover, a.enlace:active {
    color: #ffa8d0;
    text-shadow: 1px 1px 5px rgba(255, 234, 222, 0);
    text-decoration-color:#ffe8f3 !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 3px !important;
    cursor: pointer !important;
}