/* FUENTES */

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

@font-face {
  font-family: textFont;
  src: url(/fonts/UglyQua.ttf);
  font-weight: normal;
}

@font-face {
  font-family: textFontItalic;
  src: url(/fonts/UglyQua-Italic.ttf);
  font-weight: lighter;
}

@font-face {
  font-family: damagedFont;
  src: url(/fonts/NIGHTMARE\ PILLS\ -\ DEMO.ttf);
  font-weight: bold;
}



/* GENERAL */
:root {
    --transparent: rgba(7, 12, 15, 0);

    --custom-black:  rgb(0, 2, 6);
    --custom-black-transparent:  rgba(0, 2, 6, 0.6);

    --darkColor0:  rgb(7, 12, 15);
    --darkColor1: rgba(25, 30, 34, 0.95);
    --darkColor2: rgb(61, 65, 71);

    --lightColor0: rgb(134, 89, 57);
    --lightColor1: rgb(187, 185, 179);
    --lightColor2: rgb(189, 157, 97);
    --lightColor3: rgb(248, 255, 153);
    --lightColor4: rgba(61, 184, 106, 0.75);

    --darkColor0Tr:  rgba(7, 12, 15, 0.4);
    --darkColor1Tr: rgba(25, 30, 34, 0.35);
    --darkColor2Tr: rgba(61, 65, 71, 0.4);

    --lightColor0Tr: rgba(134, 89, 57, 0.4);
    --lightColor1Tr: rgba(187, 185, 179, 0.4);
    --lightColor2Tr: rgba(189, 157, 97, 0.4);
    --lightColor3Tr: rgba(248, 255, 153, 0.4);
    --lightColor4Tr: rgba(61, 184, 106, 0.15);
    
    --text-family: textFont, "Times New Roman", serif;
    --title-family: titleFont, Garamond, serif;
    --damaged-family: damagedFont, Garamond, serif;
}

body {
    background-color: var(--darkColor0, rgb(7, 12, 15));
    background-image: url(/img/tileable_grass.png);
    min-height: 1400px;
    overflow-x: hidden;
}

.index {
    background-image: url(/img/tileable_green_clouds.png);
}
.reflexiones {
    background-image: url(img/tileable_leaves.png);
}
.urbex {
    background-image: url(img/tileable_ground.png);
}
.obras {
    background-image: url(img/tileable_moss.png);
}

#page-header {
    left: 0; 
    right: 0; 
    margin-inline: auto;
    width: fit-content;
    text-align: center;
}

.container-parent {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.horizontalcontainer-parent {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.horizontalcontainer-parent.aligned {
    gap: 0px;
    align-items: center;
}

.horizontalcontainer-parent.aligned.bordered {
    padding-left: 15px;
    background-image: linear-gradient(to right, var(--lightColor4Tr, rgba(61, 184, 106, 0.15)) 0%, var(--transparent, rgba(7, 12, 15, 0)) 80%);
    border-radius: 20px;
}

.main-container {
    background-color: var(--darkColor1, rgba(25, 30, 34, 0.95));
    left: 0; 
    right: 0; 
    margin-inline: auto;
    width: 1000px;
    color: var(--transparent, rgba(7, 12, 15, 0));
    z-index: 0;
    overflow: hidden;
}

.main-container.raiz {
    text-align: center;
    background-color: var(--transparent, rgba(7, 12, 15, 0));
}

.poem {
    font-family: var(--text-family);
    text-align: center;
    font-size: large;
    color: var(--lightColor1, rgb(187, 185, 179));
    line-height: 20px;
    margin: 5px;
    padding: 25px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0) 70%);
}

.invisible-button {
    padding: 0px;
    margin: 0px;
    background-color: var(--transparent, rgba(7, 12, 15, 0));
    border-width: 0px;
}
.invisible-button.interactive {
    cursor: pointer;
}



/* BLOQUES */
.main-container.block {
    height: fit-content;
    width: auto;
    max-width: 50%;
    border-radius: 10px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--custom-black, rgb(0, 2, 6));
    padding: 15px;
    font-family: var(--damaged-family);
    line-height: 25px;
    background-image: url(/img/tileable_wood.png);
    box-shadow: 10px 10px var(--custom-black, rgb(0, 2, 6));
}

.main-container.block.slim {
    max-width: 22%;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

.main-container.block.floating {
    animation: floating 3.0s forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.main-container.block.side {
    margin:0;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    background-image: url(/img/tileable_grey_wood.png);
    background-size: contain;
    border-color: var(--lightColor0Tr, rgba(134, 89, 57, 0.4));
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.block-border {
    padding: 15px;
    border-width: 3px;
    border-color: var(--custom-black, rgb(0, 2, 6));
    border-radius: 10px;
    border-style: solid;
    background-color: var(--custom-black-transparent, rgba(0, 2, 6, 0.6));
}

.block-border.centered {
    align-items: center;
    text-align: center;
    margin-top:10px;
}

.block-border.urbex {
    border-color: var(--lightColor2, rgb(189, 157, 97));
    color: var(--lightColor1, rgb(187, 185, 179));
    text-align: center;
}

.star {
    padding-left: 5px;
    padding-right: 5px;
    width: 40px;
    height: 40px;
    background-image: radial-gradient(circle, yellow 10%, var(--lightColor4, rgba(61, 184, 106, 0.75)), var(--transparent, rgba(7, 12, 15, 0)) 60%);
    animation: starMovement 3.0s forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.fixed-right {
    position: fixed;
    top: 20%;
    left: 80%;
    z-index: 2;
}

.fixed-left {
    position: fixed;
    top: 20%;
    left: 0%;
    z-index: 2;
    max-width: 22%;
    display: flex;
    flex-direction: row;
    transform: translateX(-10%);
}

.wood-structure {
    background-image: url(/img/tileable_wood_structure.png);
    min-width: 20%;
    background-size: contain;
    background-repeat: repeat-y;
}



/* OPCIONES */
.option {
    font-family: var(--title-family);
    display: inline-block;
    border-radius: 10px;
    color: var(--lightColor1, rgb(187, 185, 179));
    background-color: var(--transparent, rgba(7, 12, 15, 0));
    padding: 15px;
    margin: 10px;
    z-index: 1;
    cursor:pointer;
}

.option.scroll-option {
    background-color: var(--custom-black-transparent, rgba(0, 2, 6, 0.6));
    padding: 5px;
    font-size: 24px;
    font-family: var(--title-family);
    border-style: solid;
    border-color: var(--darkColor1, rgba(25, 30, 34, 0.95));
    border-width: 3px;
}

.option.scroll-image {
    background-color: var(--transparent, rgba(7, 12, 15, 0));
    padding: 0px;
    margin: 0px;
    opacity: 1;
}



/* TEXTOS */
.block-title {
    margin-bottom: 35px;
    color: var(--lightColor2, rgb(189, 157, 97));
    font-size: larger;
    font-family: var(--title-family);
    text-shadow: 3px 3px var(--custom-black, rgb(0, 2, 6));
}

.block-text {
    margin-left: 20px;
    text-indent: 20px;
    color: var(--lightColor1, rgb(187, 185, 179));
    font-size: large;
    font-family: var(--text-family);
}

.block-text.unindented {
    text-indent: 0px;
}

.highlighted {
    color: var(--lightColor2, rgb(189, 157, 97));
}

.subtitle {
    font-family: var(--damaged-family);
    text-align: center;
    font-style: italic;
    font-size: medium;
    margin-top: 0px;
    color: var(--lightColor0, rgb(134, 89, 57));
}

.subtitle.text {
    margin: 0px;
}

.a {
    color: var(--lightColor4, rgba(61, 184, 106, 0.75));
}
.index-marquee {
    margin-top: 15px;
    font-family: var(--damaged-family);
    font-size: x-large;
    font-weight: bold;
    color: rgba(187, 185, 179, 0.65);
    width: 50%;
}



/* IMAGENES */
.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
.centered-image.bordered {
    border-width: 2px;
    border-style:solid;
    border-radius: 10px;
    border-color: var(--darkColor2, rgb(61, 65, 71));
}



/* IDIOMA */
.language-window {
    position: fixed;
    bottom: 0;
    left: 0;
}



/* PSEUDOCLASES */
.option.option.scroll-option:hover {
    animation: sizeHover 0.2s forwards;
    color: var(--lightColor2, rgb(189, 157, 97));
    border-color: var(--darkColor2, rgb(61, 65, 71));
}

.invisible-button.interactive:hover {
    animation: sizeHover 0.2s forwards;
}

.main-container.raiz:hover {
    animation: highlightSize 0.4s;
}

a:link
{
    color: var(--lightColor3, rgb(248, 255, 153));
}

a:visited
{
    color: var(--lightColor4, rgba(61, 184, 106, 0.75));
}

a:hover
{
    color: var(--lightColor2, rgb(189, 157, 97));
}

a:active
{
    color: var(--lightColor1, rgb(187, 185, 179));
}
.fixed-left:hover {
    animation: showFromLeft 0.2s forwards;
}



/* ANIMACIONES */
@keyframes sizeHover {
    from {transform: scale(1);}
    to {transform: scale(1.1);}
}

@keyframes floating {
    from {transform: translate(0px, 0px);}
    50% {transform: translate(0px, 4px);}
    to {transform: translate(0px, 0px);}
}

@keyframes highlightSize {
    0% {transform: scale(1);}
    50% {transform: scale(1.01);}
    100% {transform: scale(1);}
}

@keyframes starMovement {
    0% {transform: translate(0px, 0px) scale(0.9);}
    20% {transform: translate(3px, -1px) scale(0.95);}
    40% {transform: translate(-2px, -2px) scale(1);}
    60% {transform: translate(1px, 1px) scale(0.9);}
    80% {transform: translate(4px, 3px) scale(0.95);}
    100% {transform: translate(0px, 0px) scale(0.9);}
}

@keyframes showFromLeft {
    from {transform: translateX(-10%)}
    to {transform: translateX(0%);}
}