/* Global */

    *           {box-sizing: border-box; margin: 0; overflow: hidden; }
    html,body   {
                    min-height: 100vh;      
                    margin: 0;                  /*    The gg ez wombo combo for stretching    */
                    overflow: hidden;           /*   your content to the edge of the screen.  */
                    user-select: none; 
    }
    body        {background-color: black; color: var(--font-color); font-family: 'Jackeyfont'; letter-spacing: 0.001em; font-size: 14px;}
    img 		{image-rendering: crisp-edges;}
    p, h1, h3   {margin: 0; padding: 0;}
    a           {text-decoration: none; color: inherit;}

    div,img     {   
        -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
        image-rendering: -moz-crisp-edges;          /* Firefox */
        image-rendering: -o-crisp-edges;            /* Opera */
        image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
        image-rendering: pixelated;                 /* Chrome */
        image-rendering: optimizeSpeed;             /* Halt Smoothing */
        image-rendering: optimize-contrast;
    }

/* Fonts */

    @font-face {font-family: 'Free Serif'; src: url('WOFF/FreeSerif-YO4a.woff');}                       .fs, h1  {font-family: 'Free Serif';}

    @font-face {font-family: 'Jackeyfont'; src: url('WOFF/jackeyfont.woff');}                           .jack,a,p{font-family: 'Jackeyfont';}

/* Color Motif Swatches & Gradients */

:root           {
                    --purplesaur:   #008080;
                    --purpleHelmet: #034040;
                    --blueish:     #000033;
                    --trueGreen:     #034040;

                    --font-color:   #ffffff;
}
.vaporDeath     {background: linear-gradient(180deg, var(--purplesaur) 0%, var(--blueish) 100%), var(--purplesaur);}

.flex           {display: flex; justify-content: center; align-items: center;}
    .row        {flex-flow: row wrap;}
    .column     {flex-flow: column wrap;}
    .center     {justify-content: flex-start !important; flex-flow: column nowrap !important;}
    .desk       {flex-flow: row wrap; align-items: top !important;}
    
.target             {visibility: hidden;}
    .target:target  {visibility: visible;}

.toolbar        {
                    position: absolute; 
                    border: 4px inset var(--trueGreen);
                    width: 72px; 
                    height: 100%; 
                    left: 0; 
                    background: url('https://valhal.la/PNG/fade.png'), var(--purpleHelmet);
}
    .ridge      {left: 72px; border-right: none; background: none;}  
    /* Button Shit */
        .button {width: 64px; height: 64px; border: 4px outset var(--trueGreen); z-index: 30;}
            .button:active   {border: 4px inset var(--trueGreen);}
        .k      {border: 8px groove var(--purplesaur) !important; font-size: 2.5em; text-shadow: 8px 8px 2px #000;}
            .k:active   {border: 8px inset var(--purplesaur) !important; background-color: var(--purplesaur);}
        .b2     {top: 64px;}
        .b3     {top: 128px;}
        .b4     {top: 192px;}

        .back           {background: url('https://valhal.la/PNG/left.png') center no-repeat; background-size: 60% auto;}
        .popout         {background: url('https://valhal.la/PNG/popout.png') center no-repeat, var(--trueGreen); background-size: 60% auto;}

        .redButton      {background: red;}
        .blueButton     {background: blue;}
        .greenButton    {background: green;}

    desktop   {
        display: flex;
        background-color: #008080;
    }

.content    {z-index: 13; left: 72px; position: relative; width: 720px; height: 592px; border: 4px inset var(--trueGreen);}
        .scroll     {overflow-y: auto;}

/* Icon Formatting */

.icon    {width: 108px; height: 108px; margin: 16px; display: flex; justify-content: center; flex-flow: column wrap; align-items: center;}
.icon img{width: 60px; height: 60px; margin-bottom: 8px;}
.icon   p{text-shadow: 4px 4px 1px #000; text-align: center;}
    .icon:hover {border: 2px dashed var(--trueGreen);}
        .new      p::before{content:'★ '; color: yellow;}
        .offline  p::before{content:'■ '; color: red;}
        .shortcut p::before{content: url('https://valhal.la/PNG/shortcut.png'); position: absolute; transform: translate(-6px, -22px);}
    .icon-fake  {margin: 16px; width: 108px; height: 108px;}

/* Single Element Formatting */

 #os     {border: 8px ridge var(--trueGreen); padding: 2em; width: fit-content;}
 #gb     {z-index: 40;}
 #flair  {z-index: 14; position: absolute; bottom: 4px; left: 40px; height: 40%;}
 #chode  {position: absolute; left: 76px; top: 4px; bottom: 4px; right: 4px; border: 4px inset var(--trueGreen); box-sizing: border-box;}
 #simp   {border: 8px ridge var(--trueGreen); padding: 2em; width: 90%; height: 90%;}

/* Mobile Formatting */

@media (pointer: coarse){
    .desk       {flex-flow: row wrap; align-items: center;}

    .content    {width: calc(100% - 72px); height: 100%;}

    .icon       {margin: 12px; width: 112px; height: 112px; border: 4px outset var(--trueGreen); background: url('https://valhal.la/PNG/purp.png');}
    .icon    img{width: 64px; height: 64px; margin: 4px;}
        .icon:active    {border: 4px inset var(--trueGreen);}
        .icon:hover     {border: 4px outset var(--purplesaur);}

    #os         {width: 90%;}
    #gb         {height: 0; border: none;}
    .byebye     {visibility: hidden;}
}

/* le funne colours */

    .colorRotate    {animation: colorRotate 1s ease-in-out infinite;}
    @keyframes colorRotate {
        from    {color: red;}
        10%     {color: orange;}
        50%     {color: yellow;}
        75%     {color: green;}
        100%    {color: blue;}
        }
    .invert     {-webkit-filter: invert(100%); filter: invert(100%);}

.green {
    color: #004300
}

.red {
    color: #9B0000
}

@media only screen and (max-width: 600px) {
    .text-container {
        width: 90%;
        margin: 0 auto;
        max-width: 100%;
    }
    .ichi {
        max-width: 90%; 
        left: 10px;
        text-align: left !important; 
    }
    .ichi p {
        max-width: 100%;
        margin: 0 auto;
        font-size: 1em;
        padding-top: 10px;
        text-align: left !important;
    }

    body {
        font-size: 12px;
    }
    .toolbar {
        display: none;
    }
    .anim-typewriter {
        animation: typing 1s steps(30, end) infinite;
        animation-direction: normal;
        text-align: left !important;
        margin-left:0;
    }

    
}