@keyframes bg-move{
    0% { background-position: 0 0;}
    100% {  background-position: 19200px 19000px;}
}
@keyframes bg-rtl-20px{
    0% { background-position: 0 0;}
    100% {  background-position: -20px 0;}
}
@keyframes bg-utd-20px{
    0% { background-position: 0 0;}
    0% { background-position: 0 0;}
    100% {  background-position: 0 -20px;}
}
@keyframes circle-in-title{
    0%{ top:80vh;clip-path: circle(7% at 50vw 50vh);}
    75% {  top:0;clip-path: circle(15% at 50vw 50vh); }
    80% {  top:0;clip-path: circle(19% at 50vw 50vh); }
    100%{ top:0;clip-path: circle(100% at 50vw 50vh); }
}
@keyframes circle-in-title-border{
    0%{ top:80vh;clip-path: circle(8% at 50vw 50vh);background-color:#26e9bb}
    75% {  top:0;clip-path: circle(16% at 50vw 50vh);background-color:#fff}
    80% {  top:0;clip-path: circle(20% at 50vw 50vh);background-color:#f7ead8}
    100%{ top:0;clip-path: circle(106% at 50vw 50vh);background-color:#f0c585}
}
@keyframes circle-out{
    0%{ clip-path: circle(100% at 50vw 50vh); }
    100%{ clip-path: circle(0% at 50vw 50vh); }
}
@keyframes pulse{
    0%{ scale:1; }
    50%{ scale:1.04; }
    100%{ scale:1 }
}


/* MOBILE ORIENTATION */
@media screen and (orientation:portrait) {
    #loaderGridList{
        overflow:auto;
    }
    .loader-grid-item{
        width:95%;
        height:calc(7.5em + 15%);
        justify-content: flex-start;
        margin-bottom:5vh;
    }
    .loader-grid-item:hover{
        scale:1.05;
        margin-left:calc(0.25vh + 9px)!important;
        margin-right:calc(0.25vh + 9px)!important;
    }
    .static-grid-item{
        width:28vw;
        height:28vw;
        padding:5px;
        box-shadow:7px 7px 0 #0009;
        margin-bottom:2.25vh;
    }
}

/* DESKTOP AND MAYBE TABLET ORIENTATION */
@media screen and (orientation:landscape) {
    #loaderGridList{
        width: 100%;
        height:calc(100% - 60px - 5vh);
    }
    .loader-grid-item{
        width:calc(15vw + 5rem);
        height:calc(15vh + 5rem);
        justify-content: flex-start;
        margin-bottom:1vh;
    }
    .loader-grid-item:hover{
        scale:1.05;
        margin-left:calc(0.25vh + 9px)!important;
        margin-right:calc(0.25vh + 9px)!important;
    }
    .static-grid-item{
        width:calc(5em + 5vw);
        height:calc(5em + 5vw);
        padding:0.25em;
        box-shadow:10px 10px 0 #0009;
    }
}

#loaderGridList, #calendarList{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: center;
    overflow-y:auto;
    scrollbar-width: thin;
}

#loaderGridList{ height:calc(100% - 40px - 20vh); }
#calendarList{
    height:calc(100% - 40px - 18.5vh);
    margin-right:calc(-32px - 5%);
}

/* Core HTMLElements */
html, body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    background:#222529;
    background-image:url('../img/core/background_blank.png');
}
h2{
    text-transform:uppercase;
    text-shadow: 0 0 10px black;
    letter-spacing:2px;
    font-size:calc(1.2em + 0.5vw);
    margin-top:4px;
}

#guesserBodyCore, #guesserBodyCoreWrap, #screenGameplay, #screenGameplayWrap{
    position:fixed;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    top:110vh;
}
/* Absolutes */
#guesserBodyCover, #loaderButtons, .screen-shell, .title-logo{position:absolute;}

/* Grid items */
.grid-item{
    outline:3px var(--color-button-outline) solid;
    border:3px var(--color-button-border) solid;
    margin:calc(12px + 0.325vh + 0.325vw);
    border-radius:var(--common-border-radius);
    transition:400ms;
    color:var(--color-button-text);
    background-color:#212529;
}

.static-grid-item{
    justify-content: space-around;
}
.static-grid-item:hover{box-shadow:12px 12px 0 #fffa;}

.loader-grid-details, .static-grid-details{
    margin:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-around;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    overflow-y:auto;
    scrollbar-width:thin;
    text-wrap: pretty;
    width:93%;
    height:calc(100% - 24px);
    position: relative;
    z-index: 3;
}
.grid-completed{
    background-color: var(--color-button-g-border);
    font-weight: bold;
    color: var(--color-button-g-outline);
}
.grid-viewed{ background-color:#1F4359;}
.grid-item-status{font-size:0.8em;}
.static-grid-details {justify-content:center;}
.static-grid-details .grid-item-day{
    font-size:calc(1.45em + 0.8vw);
    font-weight: 800;
}

.grid-item-title { font-size:calc(0.2vw + 1.3em);margin-bottom:0;letter-spacing: 3.5px; }
.grid-item-description { font-size:calc(0.1vw + 0.8em); }
.grid-item-day { font-size:calc(0.05vw + 0.8em);font-weight:600;margin:0; }
.grid-item-footer{ font-size:0.8em; }

/* IDs*/

#guesserBodyCore{ z-index:3; background:#00C1F2; }
#guesserBodyCoreWrap { z-index:2; background:white; }
#statsBodyCover, #calendarBodyCover{ background-image: url('../img/core/background_tile.png');}
#statsBodyCover, #calendarBodyCover{
    animation:bg-move 1800s linear infinite;
    background-repeat: repeat;
    background-position: center;
    opacity:0.4;
}
#calendarBodyCover{
    margin-left:-16px;
}
#statsBodyCover{
    left:16px;
}

#guesserBodyCover{
    left:-20vw;
    top:-20vh;
    height:150vh;
    width:150vw;
    animation:bg-move 1800s linear infinite;
    background-repeat: repeat;
    background-position: center;
    background-image: url('../img/core/background_tile_ocean.png');
}
#statsBodyCover, #calendarBodyCover{
    position:relative;
    height:100%;
    width:100%;
    background-size:256px;
}

#screenTitle{top:0;left:0}
#screenGameLoader{top:95vh;left:0}
#screenGameplay{z-index:25;background:#030512;}
#screenGameplayWrap{background:white;z-index:24}

#titleAccent{
    position:fixed;
    left:-25vw;
    bottom:-5vh;
    height:175px;
    width:150vw; 
    background-repeat: repeat-x;
    background-position: center bottom;
    background-image: url('../img/gamemodes/accent_flag.png');
}
#loaderTransition, #loaderTransitionAlt{
    position:relative;
    left:0;
    width:100vw;
    background-repeat: repeat-x;
    background-position: center bottom;
}
#loaderTransition{
    background-image: url('../img/core/ui/border_point.png');
    animation:bg-rtl-20px 4s linear infinite;
    top:0;
    background-size:20px 6px;
    height:6px;
}
#loaderTransitionAlt{
    background-image: url('../img/core/ui/border_point_alt.png');
    animation:bg-rtl-20px 4s linear infinite reverse;
    background-size:20px 15px;
    top:-15px;
    height:15px;
}
#calendarTransition, #statsTransition{
    background-image: url('../img/core/ui/border_point_v.png');
    animation:bg-utd-20px 4s linear infinite;
    width:6px;
    background-size:6px 20px;
}
#calendarTransitionAlt, #statsTransitionAlt{
    background-image: url('../img/core/ui/border_point_alt_v.png');
    animation:bg-utd-20px 4s linear infinite reverse;
    width:15px;
    background-size:15px 20px;
}
#statsTransition, #statsTransitionAlt, #calendarTransition, #calendarTransitionAlt{
    position:relative;
    height:100%;
    background-repeat: repeat-y;
    background-position: center bottom;
}
#titleAccent, #loaderTransitionAlt, #calendarTransitionAlt, #statsTransitionAlt{z-index:2;}
#loaderTransition, #calendarTransition, #statsTransition{z-index:3;}
#calendarTransitionAlt,#calendarTransition{transform: scale(-1);}
#statsTransitionAlt{right:-15px;}
#calendarTransitionAlt{left:-15px;}
#statsTransition{right:1px; }
#calendarTransition{left:1px;}


#loaderButtons{
    bottom: calc(32px + 8vh);
    display:flex;
    flex-direction: column;
}


/* CLASSES */
.screen-shell{
    height:100vh;
    width:100vw;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    user-select: none;
}
.screen-content{
    width:clamp(300px, 80vw, 96%);
    height:100%;
    margin:auto;
    padding:calc(6px + 1vw);
    padding-top:2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.h2-major{
    font-size:2.25em;
    text-wrap: pretty;
    letter-spacing: 3.5px;
    line-height:1.3;
    font-weight:600;
    transform:rotate(-2.5deg);
    animation:pulse 2s ease-in-out infinite;
}
.h3-major{
    font-size:1.8em;
    text-wrap: pretty;
    letter-spacing: 2px;
    line-height:1.2;
    font-weight:600;
    transform:rotate(1.5deg);  
}