@font-face{
    font-family: bauhaus;
    src: url(fonts/BauhausModern-Regular.ttf);
}
@font-face{
    font-family: sweetDreams;
    src: url(fonts/Sweet\ Dreams.ttf);
}
@font-face{
    font-family: rpg;
    src: url(fonts/RPGSystem.ttf);
}
*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: #000;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    overflow-x: hidden;
    background: url(img/starrysky.gif);
}
#danger{
    z-index: 5;
    position: fixed;
    width: 18vw;
    right: -4vw;
    bottom: 0vw;
    opacity: 0.8;
}
#header{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: optimize-contrast;       
    -ms-interpolation-mode: nearest-neighbor;
}
#menu ul{
    position: relative;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: space-around;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    width: 55vw;
    border: 1px solid;
    border-image : linear-gradient(268deg, #f6ff00, #00ff37, #00ff9d, #00fbff, #4372ff, #b908ff, #ff00d9, #ff0051) 1;
    list-style: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#menu li:hover{
    animation: urlcolor 10s ease infinite;
}
.menutxt{
    font-size: 1.2vw;
}
.entry{
    position: relative;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: space-between;
    margin: 2vw 0px;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    width: 55vw;
    border: 1px solid;
    border-image : linear-gradient(268deg, #ff0051, #ff00d8, #b908ff, #4372ff, #00fbff, #00ff9e, #00ff39, #f5ff00) 1;
}
.entry:nth-child(odd) {
    flex-direction: row;
}

.entry:nth-child(even) {
    flex-direction: row-reverse;
}
.inline-entry{
    position: relative;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    margin: 2vw 0px;
    margin-right: auto;
    margin-left: auto;
    width: 55vw;
    border: 1px solid;
    border-image : linear-gradient(268deg, #ff0051, #ff00d8, #b908ff, #4372ff, #00fbff, #00ff9e, #00ff39, #f5ff00) 1;
}
.read-more{
    width: 95%;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2vw;
    position: relative;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    margin: 1vw 0px;
    margin-right: auto;
    margin-left: auto;
    padding: 0.5vw;
    border: 1px solid;
    border-image : linear-gradient(268deg, #ff0051, #ff00d8, #b908ff, #4372ff, #00fbff, #00ff9e, #00ff39, #f5ff00) 1;
}
.read-more:hover{
    background-color: rgba(54, 54, 54, 0.6);
}
.img-legend{
    position: relative;
    width: 95%;
    display: block;
    margin: 0 auto;
    background: #ff008c56;
    padding: .01vw 0vw;

}
.text-legend{
    font-size: 90%;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    margin: 1vw;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}
.inline-image{
    width: 95%;
    position: relative;
    display: block;
    margin: 0 auto;
}
.contentbox1{
    flex: 2.6;
}
.contentbox2{
    flex: 3;
    height: 100%;
    font-stretch: expanded;
    margin-top: auto;
    margin-bottom: auto;
}
.thumbnail{
    width: 100%;
    height: 100%;
}
.entrytitle{
    text-align: center;
    font-family: bauhaus;
    font-size: 3vw;
    margin: 1.5vw;
}
.text{
    font-size: 1.5vw;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    margin: 1.5vw;
}
.entry-text{
    font-size: 120%;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    margin: 1.5vw;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}
.entry-img{
    width: 100%;
    border: 1px solid;
    border-image : linear-gradient(268deg, #ff0051, #ff00d8, #b908ff, #4372ff, #00fbff, #00ff9e, #00ff39, #f5ff00) 1;
}
.enlace-inline{
    text-decoration: underline;
}
a{
    color: white;
    text-decoration: none;
}
a .text:hover, a:hover{
    animation: urlcolor 10s ease infinite;
}
iframe{
    position: relative;
    justify-content: space-between;
    margin: 2vw 0px;
    display: flex;
    flex-direction: row;
    margin-right: auto;
    margin-left: auto;
    width: 40vw;
    height: 80vh;
    border: 1px solid;
}

.fantasy-text{
    position: relative;
    font-smooth: never;
    -webkit-font-smoothing : none;
    font-family: sweetDreams;
    font-size: 200%;
    color: #ff0051;
    text-align: center;
    animation: hueRotation 10s ease infinite;
}
.rpg-text{
    position: relative;
    font-family: rpg;
    font-smooth: never;
    -webkit-font-smoothing : none;
    font-size: 130%;
    color: #ff0051;
    margin: .5vw;
    text-align: center;
    animation: hueRotation 10s ease infinite;
}
#contentbox1about{
    height: 100%;
}
#contentbox2about{
    font-stretch: expanded;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    flex: 4;
    height: 18em;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border: 1px solid;
    border-image : linear-gradient(268deg, #ff0051, #ff00d8, #b908ff, #4372ff, #00fbff, #00ff9e, #00ff39, #f5ff00) 1;
}
#contentbox3about{
    height: 100%;
}
#kofi-button{
    border:0px;
    width: 10vw;
    margin: 1vw 0vw;
}

#fairy{
    position: relative;
    bottom: -2vw;
    margin: auto;
    z-index: 5;
    left: 2vw;
    width: 6vw;
}
#unicorn{
    position: relative;
    bottom: 1px;
    left: -2vw;
    width: 11vw;
    height: 12vw;
}
.dolls{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: -5vw;
    margin-bottom: 2vw;
}



    @media only screen and (max-width: 500px) {
        .entry, .inline-entry, #menu ul, iframe{
            width: 85vw;
        }
        .text{
            font-size: 2.4vw;
        }
        #header{
            width: 90vw;
        }
        .entry-text{
            font-size: 90%;
        }
        .entrytitle{
            font-size: 6vw;
        }
        .intro{
            width: 80vw;
            height: 80vh;
        }
        .intro-text{
            width: 40vw;
        }
        .fantasy-text{
            font-size: 2.8vw;
        }
        .rpg-text{
            font-size: 2vw;
        }
        .menutxt{
            font-size: 2.2vw;
        }
        #fairy{
            width: 9vw;
        }
        #unicorn{
            width: 14vw;
            height: 16vw;
        }
        .dolls{
            margin-top: -7vw;
        }
        #kofi-button{
            width: 40vw;
        }
      }
      @media only screen and (max-width: 900px) {
        #contentbox2about{
            height: 18em;;
        }
        #contentbox3about{
            display: none;
        }
        .fantasy-text{
            font-size: 100%;
        }
        .rpg-text{
            font-size: 90%;
        }
        #kofi-button{
            width: 20vw;
        }
        .text-legend{
            font-size: 70%;
        }
      }



      @-webkit-keyframes urlcolor {
        0%{color: #ff0051;}
        25%{color: #00fbff;}
        43%{color: #f5ff00;}
        75%{color: #ff00d8;} 
        86%{color: #00ff39;}
        100%{color: #ff0051;}
    }
    @-moz-keyframes urlcolor {
        0%{color: #ff0051;}
        25%{color: #00fbff;}
        43%{color: #f5ff00;}
        75%{color: #ff00d8;}
        86%{color: #00ff39;}
        100%{color: #ff0051;}
    }
    @-o-keyframes urlcolor {
        0%{color: #ff0051;}
        25%{color: #00fbff;}
        43%{color: #f5ff00;}
        75%{color: #ff00d8;}
        86%{color: #00ff39;}
        100%{color: #ff0051;}
    }
    @keyframes urlcolor {
        0%{color: #ff0051;}
        25%{color: #00fbff;}
        43%{color: #f5ff00;}
        75%{color: #ff00d8;}
        86%{color: #00ff39;}
        100%{color: #ff0051;}
    }
    @keyframes hueRotation {
        0%{filter: hue-rotate(360deg);}
        20%{filter: hue-rotate(330deg);}
        40%{filter: hue-rotate(300deg);}
        60%{filter: hue-rotate(240deg);}
        80%{filter: hue-rotate(330deg);}
        100%{filter: hue-rotate(360deg);}
    }
    ::selection {
            background: #b700ff81; /* WebKit/Blink Browsers */
          }
          ::-moz-selection {
            background: #b700ff81; /* Gecko Browsers */
          }