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

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

@font-face {
  font-family: Elementary Gothic Bookhand;
  src: url("fonts/elementary_gothic_bookhand.ttf");
}

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

/* Home Grid setup */
.container {  height: 100%;
  display: grid;
  grid-template-columns: 0.5fr 2fr 0.5fr;
  grid-template-rows: 0.5fr 0.2fr 2.9fr 0.4fr;
  gap: 1% 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header"
    "stickers stickers stickers"
    "nav-1 main nav-2"
    "footer footer footer";
}

.header { grid-area: header; }

.main {
  justify-self: center;
  align-self: center;
  grid-area: main;
  width: 100%;
  height: 100%;
}

.stickers {
  grid-area: stickers;
}

.footer {
  grid-area: footer;
}

.nav-1 {
  grid-area: nav-1;
  width: 100%;
  height: 100%;
}

.nav-2 {
  grid-area: nav-2;
  width: 100%;
  height: 100%;
}

/* ~Home Grid setup */

body {
    font-family: "Crayon Hand";
    color: rgb(230, 225, 225);
    font-size:20px;
    background-image: url("assets/img/cruz.jpg");
    background-size: 100px 100px;
    background-position: 75% 50%;
    height: 97.7vh;
}

body.index {
    font-size: 25px;
}

.main {
    background-image: url("assets/img/border1_trans.png"), 
        url("assets/img/border2_trans.png"),
        url("assets/img/border3_trans.png"),
        url("assets/img/border4_trans.png");
    background-color: black;
    background-repeat: no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
    background-size: 100px 150px,
        150px 150px,
        100px 150px,
        100px 150px;
    background-position: top left,
    top right,
    bottom right,
    bottom left;
}

.footer {
    background-image: url("assets/img/bottom_image2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px auto;
}

h1 {
    font-family: "Elementary Gothic Bookhand";
    text-align: center;
    font-weight: 900;
    background: url("assets/gif/espinas_header.gif") padding-box repeat-x;
    background-size: auto 100%;
    padding-top: 0.75em;
    padding-bottom: 0.60em;
    font-size: 1.3em;
    margin-bottom: 0.2em;
}

h2 {
    font-size: 1.4em;
}

h2,h3,h4,h5,h6 {
    font-family: "Shock Graffiti";
}

[class^=warning-container] {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.warning-container-2 {
    backdrop-filter: blur(6px);
}

[class^=warning-content] {
    border: 3px solid rgba(230, 225, 225, 0.468);
    border-radius: 7px;
    backdrop-filter: blur(8px);
    width: 50%;
    padding: 0px 20px;
}

.warning-content-2 {
    background-color: rgb(16, 13, 15);
    backdrop-filter: none;
}

[class^=warning-content] * {
    text-align: center;
}

[class^=warning-content] *:first-child {
    text-align: center;
}

[class^=warning-content] *:last-child {
    text-align: center;
}

a {
    color: inherit;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    font-family: "Shock Graffiti";
}

a::before, a::after {
    content: "*";
}

a:hover {
    color:rgb(211, 201, 116);
}

a:active {
    color:rgb(144, 137, 80);
    font-weight: 600;
}

[class^=warning-container] a {
    font-size: 1.2em;
}