@font-face {
    font-family: 'HealA';
    src: url('./fonts/HealTheWebA-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HealB';
    src: url('./fonts/HealTheWebB-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Fibel';
    src: url('./fonts/Fibel\ Sued.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*{
    transition:all 0.2s ease-in-out;
}
:root{
    --black:#323232;
}
.healA{
    font-family:HealA;
}
.healB{
    font-family:HealB;
}
.text-center{
    text-align:center;
}
.text-left{
    text-align:left;
}
.text-right{
    text-align:right;
}
.w-100{
    width:100%;
}
body{
    background-image:url('./img/rocky-wall.png');
    height:100vh;
    background-color: #e6de83;
    animation: backgroundMove 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    padding:0px;
    margin:0px;
}
p{
    font-family:Fibel;
    font-size:1.6em;
}
div{
    box-sizing:border-box;
}
img{
    display:block;
}
h1,h2,h3,h4,h5{
    font-family:HealB;
    margin:0px;
    color:var(--black);
}
h1{
    font-size:4em;
    margin-bottom:10px;
}
h2{
    font-size:3.2em;
    margin-bottom:10px;

}
h3{
    font-size:2.5em;
    margin-bottom:10px;

}
h4{
    font-size:2em;

}
img#welcome{
    width:400px;
    height:400px;
    margin:auto;
    margin-top:25vh;
    display:block;
    box-shadow:5px 5px 10px #0008;
    transition:all 0.2s ease-in-out;
}
img#welcome:hover{
    box-shadow:0px 0px 0px #0003;
}


@keyframes backgroundMove {
    0% {
        background-size: 100%;
        background-position: 0% 50%;
    }
    25% {
        background-size: 120%;
        background-position: 100% 50%;
    }
    50% {
        background-size: 95%;
        background-position: 50% 50%;
    }
    75% {
        background-size: 120%;
        background-position: 0% 50%;
    }
    100% {
        background-size: 100%;
        background-position: 0% 50%;
    }
}
a{
    text-decoration:none;
    color:inherit;
}
.welcome-head{
    margin-top:20px;
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
.welcome-head:hover{
    filter:blur(8px);
}

@keyframes cycle {
    0%, 100% { color:var(--black); transform: translateY(0); }
    50% { color:black; transform: translateY(-10px); }
}

.animate-cycle {
    animation: cycle 2s ease-in-out infinite;
    display:inline-block;
}

.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
.delay-6 { animation-delay: 1.2s; }
.delay-7 { animation-delay: 1.4s; }
.delay-8 { animation-delay: 1.6s; }
.delay-9 { animation-delay: 1.8s; }
.container{width: 100%;
    padding:0px 40px;
    margin-top:15vh;
    /* background-image:url('/img/oroboros.png'); 

    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10%;


    mix-blend-mode: luminosity;*/
}
#oroboros{
    position: absolute;
    height: auto;
    width: 530px;
    mix-blend-mode: overlay;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav{width: 100%;
    text-align: center;
    height:50vh;
    min-height: 500px;
    display: flex;
    flex-flow: column;
    justify-content:center;

}

.nav > div{
    flex-grow:1;
    height:100%;
    font-family:HealA;
    font-size:1em;
    display:flex;
    justify-content:center;
    align-items:center;
}
.floater{
    width:100%;
}
.floater:hover{
    transform:scaleY(2) scaleX(2) translateX(100px);
    margin-left:-15vw;
    color:rgb(154, 83, 7);
    & >span{
        animation:none;
    }
}
#readme{
    display:none;
}
#bg-mesa{
    background-image:url('/img/mesas.jpg');
    width:100%;
    position:fixed;
    bottom:0;
    height:300px;
    background-size:contain;
    background-repeat: repeat-x;
    background-position:bottom;
    background-color:#e6de83;
    mix-blend-mode: color-dodge;
    animation: blendCycle 20s ease-in-out infinite;
    z-index: -1;
}
@keyframes blendCycle {
    0% { opacity:0%; mix-blend-mode:soft-light; }
    2%,10% { opacity:100%; mix-blend-mode:soft-light; }
    20% { opacity:0%; mix-blend-mode:soft-light; }
    20.1% { opacity:0%; mix-blend-mode:hue; }
    32%,30% { opacity:100%; mix-blend-mode:hue; }
    40% { opacity:0%; mix-blend-mode:hue; }
    40.1% { opacity:0%; mix-blend-mode:difference; }
    52%,50% { opacity:100%; mix-blend-mode:difference; }
}
.hystmodal .hystmodal__window{
    background-color:#fff;
    border:1px solid #ccc; 
    border-radius:16px;
    box-shadow:4px 4px 8px #0005;
    overflow:clip;
    padding:10px 20px;
}
.hystmodal .hystmodal__close{
    right:12px;
    top:12px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' stroke='%23333' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E")
}
.arena{
    position: relative;
    width: 600px;
    height: 400px;
    border: 2px solid #333;
    margin: 20px auto;
    background-color: #f0f0f0;
    overflow: hidden;
}

.red-square {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: red;
    cursor: pointer;
    transition: none;
}

#cwcf p, #cwcf h2{
    text-align:center;
    white-space: initial;
}
.container#cwcf{
    display:flex;
} 
#cwcf .row{
    display:flex;
}
#cwcf .cell{
    flex:1;
}
#cwcf img{
    max-height:140px;
    height:100%;
    width:auto;
    margin:auto;
    display:block;
}