@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

body{
    transition:1s;
    min-height:100vh;
    min-height:-webkit-fill-available;                
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    font-family:'Lexend Deca', 'Geneva', 'Verdana', 'sans-serif';
    height:-webkit-fill-available;
    padding:0;
    margin:0;
}
/* Loading CSS */
@keyframes loading {
    0% {
        top: -10%;
    }
    100% {
        top: 100%;
    }
}
#loadBack{
    position:fixed;
    z-index:101;
    top:0;
    left:0;
    height:100vh;
    width:100vw;                
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    transition:0.5s;
}
.loadList{
    color:#fff;
    font-weight:bold;
    font-size:5vh;
    top:-10vh;
    text-decoration: none;
    z-index:102;
    position:fixed;
    font-family: "Lexend Deca";
}
#load0{ left:6vw; animation-delay: 0s; animation: loading 3s linear infinite;}
#load1{ left:18vw; animation-delay: 1s; animation: loading 2s linear infinite;}
#load2{ left:30vw; animation-delay: 2s; animation: loading 1s linear infinite;}
#load3{ left:42vw; animation-delay: 3s; animation: loading 1.5s linear infinite;}
#load4{ left:54vw; animation-delay: 4s; animation: loading 5s linear infinite;}
#load5{ left:66vw; animation-delay: 5s; animation: loading 2s linear infinite;}
#load6{ left:78vw; animation-delay: 6s; animation: loading 4s linear infinite;}
#load7{ left:90vw; animation-delay: 7s; animation: loading 5s linear infinite;}


table#bastion{
    height:65vh;
    width:50vw;
    position:fixed;
    top:0vh;
    left:25vw;
    border:0px dashed #fff;
}
table#bastion td{
    border:0px dashed #fff;
    width:100%;
    height:calc(65vh/6);
}
.blocks{
    width:100%;
    height:100%;
    border:0px solid #fff;
    color:#fff;
    font-weight:bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-size:5vh;
    border-radius:10px;                
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
#topblock{
    font-size:3vh;
    border:0px;
}
#welldone{
    height: 55vh;
    width:80vw;
    border:0px solid #fff;
    border-radius:10px;        
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 15s ease-in-out;
    transition: all 1s ease-in-out;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    position:fixed;
    top:10vh;
    left:-200vw;
    font-size:3vh;
    color:#fff;
    font-weight:bold;
    text-align:center;
    padding-top:5vh;
    transform: rotate(45deg);
}
#welldonebigword{
    font-size:5vh;
}
table#wdTab{
    margin:auto;
    border-collapse:collapse;
    width:90%;
    height:60%;
}
table#wdTab td{
    color:#fff;
    font-size:2vh;
    text-align:center;
    height:calc(100%/6);
    /* border:1px dashed #fff; */
}
/* Lower table */
table#lowerTab{
    border:0px dashed #fff;
    position:fixed;
    bottom:0;
    left:0;
    width:100vw;
    height:15%;
    border-collapse:collapse;
}
table#lowerTab td{
    width:100%;
    height:5vh;
    text-align:center;
    border:0px solid #fff;
}
.kbutt{
    display:inline-flex;
    border:1px solid #fff;
    font-weight:bold;
    color:#fff;
    width:8.2vw;
    height:6.8vh;
    border-radius:5px;
    font-weight:bold;
    justify-content: center;
    align-items: center;
    text-align:center;
    background:transparent;
    
}

/* Logo */
#logo{
    position:fixed;
    top:3vh;
    left:5vw;
    color:#fff;
    text-align: center;
    width:5vw;
    border:0px solid #fff;
    font-size:3vh;
    font-weight:bold;
    transition:1s;
}

#infoButt{
    position:fixed;
    top:2vh;
    right:5vw;
    border:0px solid #fff;
    font-size:20px;
    font-weight:bold;
    background:transparent;
    color:#fff;
    border-radius:50%;
    width:30px;
    height:30px;
    text-align:center;
    transition:1s;
}

#infoBox{
    height:100vh;
    width:94vw;
    background: linear-gradient(-45deg, #123456, #123456, #2b798e, #2b798e);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color:#fff;
    font-size:2vh;
    padding-left:3vw;
    padding-right:3vw;
    font-weight:bold;
    position:fixed;
    left:-100vw;
    top:0vh;
    transition:1s;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    z-index:99;
}

/* Share table */
table#shareTab{
    width:100%;
    border:0px dashed #fff;
}
table#shareTab td{
    width:50%;
    height:4vh;
}
a{
    text-decoration: none;
    color:#fff;
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;
}
#kofiCont{
    width:100vw;
    text-align:center;
    position: absolute;
    bottom:-10vh;
    transition:1s;
}
#kofiButt{
    height:5vh;
    transition:1s;
}
#kofiButt:hover{                
    opacity:0.8;
    cursor:pointer;
}
/* Dark mode button */
#darkModeButt{
    position:absolute;
    top:1vh;
    left:5vh;
    height:5vh;
    width:20vw;
    font-size:2vh;
    background:#fff;
    color:#333;
    font-weight:bold;
    border:0px solid #fff;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    transform: skew(20deg);
    transition:0.5s;
}
#darkModeInner{
    transform: skew(-20deg);
    transition:0.5s;
}
/* crazy mode button */
#crazyModeButt{
    position:absolute;
    top:1vh;
    left:40vw;
    height:5vh;
    width:20vw;
    font-size:2vh;
    background:#fff;
    color:#333;
    font-weight:bold;
    border:0px solid #fff;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    transition:0.5s;
}
#crazyModeInner{
    transition:0.5s;
}
/* Hard mode button */
#hardModeButt{
    position:absolute;
    top:1vh;
    right:5vh;
    height:5vh;
    width:20vw;
    font-size:2vh;
    background:#fff;
    color:#333;
    font-weight:bold;
    border:0px solid #fff;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    transform: skew(-20deg);
    transition:0.5s;
}
#hardModeInner{
    transform: skew(20deg);
    transition:0.5s;
}
#coverSheet{
    position:fixed;
    left:100vw;
    top:0vh;
    height:100vh;
    width:100vw;
    background: linear-gradient(-45deg, #d81159, #d81159, #ea1744, #ea1744);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color:#fff;                
    transition:1s;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    z-index:99;
    font-weight:bold;
    font-size:5vh;
}
#simpCoverSheet{
    position:fixed;
    left:100vw;
    top:0vh;
    height:100vh;
    width:100vw;
    background: linear-gradient(-45deg, #7CFEF0, #6BFFB8, #2CEAA3, #28965A);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color:#fff;                
    transition:1s;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    z-index:99;
    font-weight:bold;
    font-size:5vh;
}
#darkModeBack{
    position:fixed;
    top:0;
    left:0;
    z-index:0;
    height:100vh;
    width:100vw;
    opacity:0;
    background: #121212;
    transition:0.5s;
}
#ynBox{
    position:fixed;
    z-index:1;
    opacity:0;
    color:#fff;
    width:20vw;
    height:10vh;
    border:0px dashed #fff;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:2vh;
    transition:2s;                
}
/* Bonus Game */
#bonusPhrase{
    width:80vw;
    height:20vh;
    position:fixed;
    border:0px dashed #fff;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:3vh;
    transition:1s;
    color:#fff;
    left:10vw;
    top:-20vh;
}
#bonusInput{
    width:80vw;
    height:10vh;
    position:fixed;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:3vh;
    transition:1s;
    color:#fff;
    left:-80vw;
    top:50vh;
    outline:none;
    background:transparent;
    border:0px dashed #fff;
    border-bottom:3px solid #fff;
    text-transform: uppercase;
}
#bonusDefBox{
    width:80vw;
    height:10vh;
    position:fixed;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:1.5vh;
    transition:1s;
    color:#fff;
    left:10vw;
    top:30vh;
    outline:none;
    background:transparent;
    border:0px dashed #fff;
    opacity:0;
    font-style: italic;
}
#bonusButt{
    width:50vw;
    height:10vh;
    position:fixed;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:3vh;
    transition:1s;
    color:#fff;
    left:150vw;
    bottom:10vh;
    outline:none;
    background:#d81159;
    border-radius:5px;
    border:0px solid transparent;
}
.waviy {
    position: relative;
}
.waviy span {
    position: relative;
    display: inline-block;
    animation: flip 2s infinite;
    animation-delay: calc(.2s * var(--i))
}
#logo span {
    position: relative;
    display: inline-block;
    animation: flip 10s infinite;
    animation-delay: calc(.2s * var(--i))
    }
@keyframes flip {
    0%,80% {
        transform: rotateY(360deg) 
    }
}
#closeCM{
    position:fixed;
    bottom:-30vh;
    height:10vh;
    width:50vw;
    left:25vw;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-weight:bold;
    font-size:2vh;
    transition:1s;
    color:#fff;
}
#twitterLogo{
    height:2vh;
}
#bonusDef{
    font-size:1vh;
    transition:1s;
    opacity:0;
    display:inline-flex;
}
.spindleLetters{    
    transition:0.5s linear;
    display:inline-block;
}