/*------------------------------------*\
    #CONTENTS
\*------------------------------------*/
/**

*SETTINGS
**root . . . . . . . Globally available variables
**grecaptcha . . . . No showing captcha

*GENERIC
**body . . . . . . . Sets Page Attributes
**sidebar  . . . . . (Or topbar if on mobile)
**main-content . . . Everything but Sidebar 
**learn-screen . . . The canvas that shows animations (coins etc)
**logo . . . . . . . 
**image-button . . . Large main buttons like signinup (in index)
**sidebar  . . . . . Main sidebar (topbar for mobile)

*TOOLS
**main-font  . . . . Default pixel font
**pixel-alt  . . . . Users can use this alternative non pixel font
**js-screen  . . . . Hidden screen for showing js stuff
**hide . . . . . . . Hide element tool used for sign in box
**nice-button  . . . Button tool for shadow & down effect
**glow . . . . . . . Used to indicate to users what to do now
**dark-outline-box . Div to seperate different buttons
**single-.-grid  . . Used to put two elements overtop each other

*DROPDOWN
**dropdown . . . . . Dropdown in the sidebar
**list . . . . . . . Div object holding each list item
**element  . . . . . Object holding images for each option
**image  . . . . . . Image for each element
**media  . . . . . . Change to topbar when mobile
**toggle-dropdown  . Toggles dropdown menu
**image  . . . . . . Image for toggle
** (note to self: root variable is set)

*PROJECT-INNER
**project-button . . All buttons in complex textarea

*DEFAULTS
**selection  . . . . Change highlight color to yellow
**scrollbar  . . . . Change defualt side scrollbar
**button . . . . . . Make sure all buttons look good pressed
**image  . . . . . . Make sure images don't highlight with phone
**body . . . . . . . Nice background texture

*LOADING
**loader . . . . . . Div that places load to right place
**loader-sprite  . . Actual loading animation
**loader-fade  . . . Makes load go away when appropriate

*Footer
**parent . . . . . . Sets footer to the correct place
**footer . . . . . . Padding etc for footer element
**link . . . . . . . All <a> elements in footer should have this

**/

/*------------------------------------*\
    #SETTINGS
\*------------------------------------*/
:root {
    --palette-serika-1: #525146;
    --palette-serika-2: #d8d6c3;
    --palette-serika-3: #bfb716;
    --palette-serika-4: #718F94;
    --palette-serika-5: #282828;

    --palette-index-1: #07090F;
    --palette-index-2: #8B8B8B;
    --palette-index-3: #74E924;
    --palette-index-4: #FFC437;

    --z-base: 0;
    --z-sidebar: 5;
    --z-dropdown: 10;
    --z-overlay: 20;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;

    --sidebar-width: 10rem;
    --sidebar-height: 8rem; /*for vertical screens*//*used in custom-elements.css, some system for syncing should be implemented*/

    --pixel-font: 'Press Start 2P';
    --secondary-font: 'monospace';

    --nice-button-speed: .25s;
    --nice-button-active: .1s;

    --anchor-color: #95aaee;
    --anchor-color-hover: #486adb;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

/*------------------------------------*\
    #GENERIC
\*------------------------------------*/
ul{
    padding: 0;
    list-style-type: none;
}

body {
    background-color: var(--palette-serika-5);
    /*background: var(--palette-serika-3); gradient for success?
    background: radial-gradient(circle,var(--palette-serika-3) 0%, var(--palette-serika-5) 100%);*/
    overflow-x: hidden; /*this gets rid of horizontal bar*/
    padding: 0px;
    margin: 0px;
    -webkit-tap-highlight-color: #0e0d0b11;
    background-image: linear-gradient(#a59f4605 4px, transparent 1px);
    background-size: 1em .5em;
}

.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
	width: var(--sidebar-width);
	/*position: relative;*/
    top: 0 !important;
	left: 0;
	background-color: var(--palette-serika-1);
    padding-top: 20px;
	z-index: var(--z-sidebar);
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    overflow: hidden;
	
	--sidebar-transition-speed: 0.28s;
	
    transition: transform var(--sidebar-transition-speed) ease, width var(--sidebar-transition-speed) ease, min-width var(--sidebar-transition-speed) ease,
				height var(--sidebar-transition-speed) ease, padding var(--sidebar-transition-speed) ease, opacity var(--sidebar-transition-speed) ease;
}

@media (orientation: landscape) {
    .sidebar {
        min-height: 100vh;
        flex-direction: column;
        flex-grow: 1;
    }

    .sidebar.sidebar-hidden {
        transform: translateX(-100%);
        width: 0;
        min-width: 0;
        padding-top: 0;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-element{
        display: flex;
        flex-direction: column;
        position: sticky;
        align-items: center;
        top: 0;
    }
}

@media (orientation: portrait) {
    .sidebar{
        height: 10vh;
        width: 100vw;
        flex-direction: row;
    }

    .sidebar.sidebar-hidden {
        transform: translateY(-100%);
        height: 0;
        padding-top: 0;
        padding-left: 0;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-element{
        display: flex;
        flex-direction: row;
        position: sticky;
        align-items: center;
        top: 0;
    }
}

.main-content {
    position: relative;
    margin-bottom: 0px;
    width: 100%;
    margin-left: 10px;
    z-index: var(--z-base);
}

@media (orientation: landscape) {
    .main-content {
        padding: 0px;
    }
}
@media(orientation: portrait) {
    .main-content {
        margin-left: var(--sidebar-width);
        padding-top: 128px;
    }
}

.user-content{
    position: relative;
}

#learn-screen{
    position:fixed;

    top:0%;
    bottom:0%;
    left:0%;
    right:0%;

    pointer-events: none;
    z-index: 100 !important;
    image-rendering: crisp-edges;
}

.logo img {
    width: max(6rem, 5vw);
    image-rendering: pixelated;
    margin-bottom: 20px;
}

.image-button{ /*sign-inup + learn  (in index.html)*/
    color: #0000;
    background-color: #0000;
    border-radius: 0px;
    border-color: #0000;
    cursor: pointer;
    width: 150px;
}

@media (orientation: portrait) {
    .sidebar {
        height: var(--sidebar-height);
        flex-direction: row;
        padding-top: 0px;
        padding-left: 20px;
    }   

    .main-content {
        left: 0;
        position: absolute;
        margin-left: 0;
        padding-inline: 0;
        width: 100%;
        gap: 0;
    }
}

li, ul {
    list-style-type: none;
}

a{
    color: var(--anchor-color);
}
a:hover{
    color: var(--anchor-color-hover);
}

/*------------------------------------*\
    #TOOLS
\*------------------------------------*/
.subtle-anchor{
    color: #0000000f !important;
    font-size: 10px !important;
    padding: 20px;
    --text-outline-color: #0000000f !important;
}
.subtle-anchor:hover{
    color: #58d8ff7a !important;
}
.light-anchor{
    color: #ffffff50 !important;
    font-size: 20px !important;
    padding: 30px;
    --text-outline-color: #0000000f !important;
}
.light-anchor:hover{
    color: #58d8ff7a !important;
}

@media (orientation: portrait) {
    .top-left{
        position: sticky;
        top: 10px;
        left: 10px;
        padding: 0;
    }
}
@media (orientation: landscape) {
    .top-left{
        position: absolute;
        top: 20px;
        left: 20px;
    }
    
}

.big-text{
    font-size: 2rem;
}

.center{
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
}

.column{
    flex-direction: column;
}

.sticky {
    position: sticky;
    top: 10px;
    right: 10px !important;
    z-index: var(--z-overlay);
}

@property --text-outline-size{
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
}

@property --text-outline-color{
    syntax: "<color>";
    inherits: true;
    initial-value: #000;
}

@property --text-color{
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}

/*.main-font, .pixel-font */
.pixel-1 {
    font-family: var(--pixel-font), var(--secondary-font);
    font-weight: 200;
    color: var(--text-color);

    --text-outline-size: 2px;
    --text-outline-color: #000;
    text-shadow:    calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),  
                    var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),
                    calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 var(--text-outline-color),
                    var(--text-outline-size)            var(--text-outline-size)            0 var(--text-outline-color);
}

h1.pixel-1 {font-size: 3rem;}
p.pixel-1  {font-size: 1.5rem;}

/*.pixel-alt, .arial-font, */
.arial-1 {

    font-family: monospace;
    font-weight: 500;
    font-size: 120%;
    color: var(--text-color);

    --text-outline-size: 1px;
    --text-outline-color: #000;
    text-shadow:    calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),  
                    var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),
                    calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 var(--text-outline-color),
                    var(--text-outline-size)            var(--text-outline-size)            0 var(--text-outline-color);
}

.courier-new-1 {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    font-size: 110%;
    color: var(--text-color);

    --text-outline-size: 1px;
    --text-outline-color: #000;
    text-shadow:    calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),  
                    var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),
                    calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 var(--text-outline-color),
                    var(--text-outline-size)            var(--text-outline-size)            0 var(--text-outline-color);
}

.cursive-1 {
    font-family: 'Brush Script MT', cursive;
    font-weight: 500;
    font-size: 120%;
    color: var(--text-color);

    --text-outline-size: 1px;
    --text-outline-color: #000;
    text-shadow:    calc(-1 * var(--text-outline-size)) calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),  
                    var(--text-outline-size)            calc(-1 * var(--text-outline-size)) 0 var(--text-outline-color),
                    calc(-1 * var(--text-outline-size)) var(--text-outline-size)            0 var(--text-outline-color),
                    var(--text-outline-size)            var(--text-outline-size)            0 var(--text-outline-color);
}



.js-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-overlay); 
}

.hide{
    display: none;
    padding: 0%;
}

.nice-button {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    transition: all var(--nice-button-speed) cubic-bezier(.77,.1,.29,.93);
    filter: drop-shadow(0px 6px 0px #000);
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

    transform: rotate(var(--nice-button-rotation));
}

.no-bg-button {
    background-color: #0000;
    border: none;
}
.nice-bg-button{
    text-align: center;
    background-color: #2c3032;
    border-style: solid;
    padding: 6px;
    border-width: 5px;
    border-color: #141718;
}

.nice-button:hover {
    --size: 6px;
    --down: 3px;
    --blur: 0px;
    transition: all var(--nice-button-speed) cubic-bezier(.77,.1,.29,.93);
    filter: drop-shadow(0px calc(var(--size) - var(--down)) var(--blur) #000);
    transform: translateY(var(--down))
               rotate(var(--nice-button-rotation));
}

@property --nice-button-rotation{
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.rotate-45 {
    --nice-button-rotation: -0deg;
}

.nice-button:active {
    --size: 6px;
    --down: 6px;
    --blur: 0px;
    transition: all var(--nice-button-speed-active) cubic-bezier(.77,.1,.29,.93);
    filter: drop-shadow(0px calc(var(--size) - var(--down)) var(--blur) #000);
    transform: translateY(var(--down))
               rotate(var(--nice-button-rotation));
}

@keyframes nice-button-hover {
  10% { filter: drop-shadow(0px calc(var(--size) - var(--down)) var(--blur) #000); }
  50% { filter: drop-shadow(0px calc(var(--size) - var(--down) + 2px) calc(var(--blur) + 2px) #000); } 
  100% { filter: drop-shadow(0px calc(var(--size) - var(--down)) var(--blur) #000); }
}

.glow {
    transition: all 1s ease-in-out;
    filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0));
    animation: glowing-start 1s steps(60),
               glowing 3s steps(60) infinite 1s;
}
@keyframes glowing-start {0% {filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0))} 100% {filter: drop-shadow(0px 0px 12px white);}}
@keyframes glowing {
    0% {filter: drop-shadow(0px 0px 12px rgb(213, 255, 216));}
    50% {filter: drop-shadow(0px 0px 10px rgba(189, 255, 173, 0.747));}
    100% {filter: drop-shadow(0px 0px 12px rgb(213, 255, 216));}
}

.dark-outline-box { /*an effect for buttons or elements to cheer them up a bit*/
    --this-color: rgba(52, 54, 43, 0.438);
    background-color: var(--this-color);
    border-radius: 10%;
    outline: 5px;
    box-shadow: 0px 0px 15px 30px var(--this-color);
}

.single-block-grid {
    display: grid;
    position: relative;
}

.single-block-grid > * {
    grid-area: 1 / 1;
}

.super-stretch {
    height: 500%;
    font-size: 5em;
    transform:scale(.1, 5);
}

.spin:active {
    animation: spin .2s ease-in-out infinite;
}
@keyframes spin {
    0% {transform: rotate(0deg) 
            translateY(var(--down));}
    25% {transform: rotate(-1deg) 
            translateY(var(--down));}
    75% {transform: rotate(1deg) 
            translateY(var(--down));}
    100% {transform: rotate(0deg) 
            translateY(var(--down));}
}

@property --line-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 30px;
}

.code-lines {
    --bg-color-lines: #333333;
    --bg-color-main: #1a1a1a;

    background-image: repeating-linear-gradient(
        to bottom,
        var(--bg-color-lines),
        var(--bg-color-lines) 1px,
        var(--bg-color-main) 1px,
        var(--bg-color-main) var(--line-width)
    );
    background-attachment: local;
}

.error-message {
    color: red;
    font-style: italic;
}

ttc-sidebar{
    bottom: 0;
    display: flex;

    overflow: hidden;
}

@media (orientation: landscape) {
    ttc-sidebar{
        min-height: 100vh;
        flex-grow: 1;
        flex-direction: column;
    }
}

@media (orientation: portrait) {
    ttc-sidebar{
        position: sticky;
        height: 100%;
        z-index: 10;
    }
}

.big-image{
    --padding: 30px;
    image-rendering: pixelated;
    padding-top: var(--padding);
    padding-right: var(--padding);
    width: 100%;
    height: 100%
}

.pixel-img{
    image-rendering: pixelated;
}

@media (orientation: landscape) {
    .row-container {
        display: flex;
        flex-direction: row;
    }
}

@media (orientation: portrait) {
    .row-container {
        display: flex;
        flex-direction: column;
    }
}

.toggle-sidebar{
    max-width: 100px;
}


@media (orientation: landscape) {
    .bottom-sidebar{
        margin-top: 60vh;
        bottom: 0;
    }
}

@media (orientation: portrait) {
    .bottom-sidebar{
        margin-left: 6vw;
        bottom: 0;
    }
}

.bevel-mask{

}

.bevel-border-mask{
    --x-stretch-right-far: 80%;
    --x-stretch-left-far: 20%;
    --x-stretch-right: 70%;
    --x-stretch-left: 30%;

    --y-stretch-bottom-far: 80%;
    --y-stretch-top-far: 20%;
    --y-stretch-bottom: 70%;
    --y-stretch-top: 30%;

    clip-path: polygon(
        var(--x-stretch-right-far) 100%, 
        var(--x-stretch-left-far) 100%, 
        0% var(--y-stretch-bottom-far), 
        0% var(--y-stretch-top-far), 
        var(--x-stretch-left-far) 0%, 
        var(--x-stretch-right-far) 0%, 
        100% var(--y-stretch-top-far), 
        100% var(--y-stretch-bottom-far), /*this is the outside area*/
        var(--x-stretch-right-far) 100%, 
        var(--x-stretch-right-far) var(--y-stretch-bottom), 
        var(--x-stretch-right-far) var(--y-stretch-top), 
        var(--x-stretch-right) var(--y-stretch-top-far), 
        var(--x-stretch-left) var(--y-stretch-top-far), 
        var(--x-stretch-left-far) var(--y-stretch-top), 
        var(--x-stretch-left-far) var(--y-stretch-bottom), 
        var(--x-stretch-left) var(--y-stretch-bottom-far), 
        var(--x-stretch-right) var(--y-stretch-bottom-far), 
        var(--x-stretch-right-far) var(--y-stretch-bottom)); /*this is the inside masked out*/
}

.move-offscreen{
    /*transform: translateX(-100vw);*/
    animation: 1s ease-in-out 0s 1 go-offscreen normal forwards;
    box-sizing: border-box;
}

@keyframes go-offscreen{
    0%{
        width: initial;
        transform: translateX(10vw);
        opacity: 1;
    }
    100%{
        width: 0px;
        transform: translateX(-100vw);
        opacity: 0;
    }
}

.move-onscreen{
    animation: 1s ease-in-out 0s 1 go-onscreen normal forwards;
}

@keyframes go-onscreen{
    0%{
        position: relative;
        transform: translateX(100vw);
        opacity: 0;
    }
    100%{
        transform: translateX(0vw);
        opacity: 1;
    }
}

.column-container{
    width: 100%;
    height: 100%;
}

/*------------------------------------*\
    #DROPDOWN
\*------------------------------------*/
.dropdown{
    background-color: #28282850;
    z-index: var(--z-dropdown);
    width: 7rem;
}

.dropdown--list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dropdown--element {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.dropdown--image { /*house logo + learn logo + etc*/
    width: 5rem;
    height: 5rem;
    image-rendering: pixelated;
}

@media (orientation: portrait) { /*when screen below width, change to vertical layout*/
    .dropdown--list {
        flex-direction: row;
        width: auto;
    }

    .dropdown--element {
        padding-inline: 10px;
        width: auto;
    }

    .dropdown--image {
        width: 80px;
    }

    .dropdown {
        width: auto;
    }

    :root { /*root variable set here, helps other elements*/
        --sidebar-width: 0px;
    }
}

/*element(s) that toggle the dropdown*/

.toggle-dropdown{
    cursor: pointer;
    z-index: var(--z-sidebar);
    position: relative;
    background: none;
    border: none; 
}

.toggle-dropdown:hover{
    filter: brightness(125%);
}

.toggle-dropdown--img {
    width: max(5rem, 4vw);
    image-rendering: pixelated;
}

/*------------------------------------*\
    #DEFAULTS
\*------------------------------------*/
::selection{
    background-color: #fbff0099;
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

::-webkit-scrollbar-thumb {
    background: rgb(171, 161, 161);
}

button {
    -webkit-tap-highlight-color:  #BFB71611; /*don't highlight on phone*/
    cursor: pointer;
}

img {
    -webkit-tap-highlight-color: #0e0d0b11;
}


/*------------------------------------*\
    #PROJECT-INNER
\*------------------------------------*/

.project-button, .back-to-top-button, .link-button--image, .link-button{
    border: #0000;
    background-color: #0000;
    width: 50px; 
    height: 50px;

    
	image-rendering: pixelated;
}

/*------------------------------------*\
    #LOADING
\*------------------------------------*/
.loader {
  transition: all 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #222120;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999; 
}

.loader-sprite {
    position: relative;
    transition: all 1s;
    --theme: url("../components/visuals/icons/load-animation/pixel-1.png");
    background: no-repeat var(--theme);

    --load-size: 128px;
    width: var(--load-size); 
    height: var(--load-size);
    background-size: calc(var(--load-size) * 6) var(--load-size);
    
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;

    animation: play-sprite 0.8s steps(6) infinite;
}

@keyframes play-sprite {
    from { background-position: 0px; }
    to { background-position: calc(var(--load-size) * -6); } /* Total width of sheet (e.g., 100px * 8 frames) */
}

.loader-fade{
    position: absolute;
    transition: all .6s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    display: flex;
    height: 0vh;
    width: 100%;
    margin-bottom: 0%;
    background: #222120;
}

.loader-fade > * {
    transition: all .4s;
    width: 1%;
    height: 1%;
    margin: -1%;
    padding: 0%;
    color: #0000;
    border-color: #0000;
    opacity: 0;
}

/*------------------------------------*\
    #FOOTER
\*------------------------------------*/
.footer-parent {
    position: flex;
    min-height: 100px;
    bottom: 0;
}

@media (orientation: landscape) {
    .footer-parent {
        left:var(--sidebar-width);
        width: 100%;
    }
}

@media (orientation: portrait) {
    .footer-parent{
        position: block;

        left: 0;
        width: 100%;
        align-items: center;
    }
}

.footer {

    background-image: linear-gradient(#424134b0 4px, #0006 1px);
    background-size: 10% 10%;
    text-align: center;
    width: 100vw;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    align-items: center !important;
    margin-top: auto;
    padding-block: 5px;
    margin: 0px;

    box-sizing: border-box;
}

ttc-footer{
    width: 100%;
}

.footer--list-element {
    margin: 10px;
    gap: 10px;
    list-style-type: none;
    max-width: 100vw;
    text-wrap: wrap !important;
}

.footer--link {
    color: #fcff699d !important;
}


.footer .row {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.footer .column {
    display: flex;
    flex-direction: column;
}

@media (orientation: portrait){
	.footer .row {
        grid-template-columns: auto;
    }
}