/* another site rewrite? yessir */


/* variablelets and activethings */
/* ----------------------------- */
@font-face {
    font-family: oculuce-handwriting;
    src: url(/fonts/oculuce-handwriting.ttf);
}

:root{
    --teal:#46899f;
    --navy:#042f41;
    --dark-green-margin:#335f44;
    --light-green-margin:#9ed7d0;
    --green-background:#b6e4ca;
    --light-green-background:#f0fff5;
}

@keyframes button-rotate{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(0.3deg) scale(1.01) perspective(1px);}
    75%{transform:rotate(-0.3deg) scale(1.01) perspective(1px);}
    100%{transform:rotate(0deg) scale(1.01) perspective(1px);}
}
@keyframes fear{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(20deg) scale(1.01) perspective(5px);}
    75%{transform:rotate(-20deg) scale(1.01) perspective(5px);}
    100%{transform:rotate(0deg) scale(1.01) perspective(5px);}
}

.show-block{display: block !important;}
.show-flex{display: flex !important;}
.show-none{display: none !important;}

/* text */
/* ---- */
p{font-size: 1.1rem;}
a{text-decoration: none;}
h1{text-align: center;font-size: 2rem;}
h2{margin-bottom: 1rem;font-weight: bolder;font-size: 1.8rem;}
h3{font-size: 1.4rem;text-decoration: underline;margin-bottom: 0.5rem;}
h4{font-size: 1.2rem;margin-bottom: 0.5rem;}

h1,h2,h3,h4,h5,h6{font-family:"oculuce-handwriting",monospace}


/* globalthings */
/* ------------ */

html{box-sizing: content-box;}
*, *:before, *:after {
    box-sizing: inherit;
  }

nav{display: flex;flex-flow: column;}

body{margin: 0;font-family: monospace;font-size: 1.5rem;background-color: #1d0534;
background:url(../images/griddy/greenyDot.png) repeat, linear-gradient(#1d0534);}
body > .containment{background-color:#10675d;padding: 0.5rem;
    background: linear-gradient(180deg, #08665bbf 40%, #05222d00 95%);box-shadow: 
    3px 0 0 0 #a7e2d6, 10px 0 0 0 #87c0b5, 17px 0 0 0 #568a77, 20px 0 0 0 #2d421a,
    -3px 0 0 0 #2d421a, -10px 0 0 0 #568a77, -17px 0 0 0 #87c0b5, -20px 0 0 0 #a7e2d6}

header{padding: 1rem;margin: 18px 0;
    background: linear-gradient(180deg, #80c4a3 98%, #05222d00 100%);
    box-shadow: 
        0 3px 0 0 #a7e2d6, 0 10px 0 0 #87c0b5, 0 15px 0 0 #568a77, 0 18px 0 0 #2d421a,
        0 -3px 0 0 #2d421a, 0 -10px 0 0 #568a77, 0 -15px 0 0 #87c0b5, 0 -18px 0 0 #a7e2d6}
.header-portrait{height: 150px;aspect-ratio: 1/1;}
header .containment{display: flex;justify-content: space-between;align-items: center;}
header nav ul{display: flex;flex-flow: wrap column;margin: 0;}
header nav a{min-width: calc(10ch + 6px);}

main{color: #fff;}


footer{max-height: 20rem;padding: 1rem;padding-bottom: 1rem;margin: 18px 0;
    background: linear-gradient(180deg, #80c4a3 98%, #05222d00 100%);
    box-shadow: 
        0 3px 0 0 #a7e2d6, 0 10px 0 0 #87c0b5, 0 15px 0 0 #568a77, 0 18px 0 0 #2d421a,
        0 -3px 0 0 #2d421a, 0 -10px 0 0 #568a77, 0 -15px 0 0 #87c0b5, 0 -18px 0 0 #a7e2d6}

.containment{max-width: 1100px; margin: 0 auto;}

/* lesser globalthings */
/* ------------------- */
img{width: 100%;box-sizing:border-box}
img{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;}

/* button things yes */
nav a, .header-portrait, .buttonifier a,
.art-grid > div p a, .buttonifier button, .button-texture, .character-icon
{padding: 0.45rem;margin: 0.25rem 0;background-color: #000;color: #fff;
    border:3px solid;cursor: pointer;
border-color: var(--light-green-margin) var(--dark-green-margin) var(--dark-green-margin) var(--light-green-margin);}
nav a:hover, .header-portrait:hover, .buttonifier a:hover,
.art-grid > div p a:hover, .buttonifier button:hover, .button-texture:hover
{background-color: var(--navy);}
nav a:active, .header-portrait:active, .buttonifier a:active,
.art-grid > div p a:active, .buttonifier button:active, .button-texture:active
{background-color: #0b4951;color: #a9d5c4;
    border-color: var(--dark-green-margin) var(--light-green-margin) var(--light-green-margin) var(--dark-green-margin);}

nav li{list-style-type: none;display: flex;}
nav a, .buttonifier a{font-size: 1.2rem;}

/* link animation */

a:hover, .button-texture:hover{transform: scale(1.01) perspective(1px);animation: button-rotate 0.2s;}
a:active, .button-texture:active{transform: scale(0.99) perspective(1px);}

section{border: 3px #00000000 solid;border-bottom-color: #3dd5c678;
    padding: 1rem;margin: 0.5rem;}
/* 
.custom-button{transition: 0.25s ease-in;position: relative;padding: 0.5rem;background-color: #ff0066;transform: translatey(-6px);}
.whatever{height: 20px;background-color: #940b42;width: fit-content;padding-bottom: 1rem;cursor: pointer;}
.custom-button:active, .whatever:active .custom-button{transform: translateY(0);}
.custom-button{transition: 0.25s ease-in;position: relative;padding: 0.5rem;background-color: #ff0066;transform: translatey(-6px);}
.custom-button-bottom{height: 20px;background-color: #940b42;width: fit-content;padding-bottom: 1rem;cursor: pointer;}
.custom-button:active, .custom-button-bottom:active .custom-button{transform: translateY(0);}
*/
/* ======== 3D Buttons ========
BUTTON TEMPLATES:
<a href="#" class="no-decoration"><div class="custom-button-bottom"><div class="custom-button">Book Now</div></div></a>
<a href="#" class="no-decoration"><div class="custom-button-bottom yellow-colors"><div class="custom-button">Book Now</div></div></a>
<a href="#" class="no-decoration"><div class="custom-button-bottom blue-colors"><div class="custom-button">Book Now</div></div></a>
 */

.no-decoration {text-decoration: none;margin: 1rem 0;display: block;width: fit-content;}
.max-margin-left {margin-left: auto;}
  
.custom-button {transition: 0.07s ease-in;position: relative;padding: 10px 16px;
  background: linear-gradient(var(--third-color-grey));transform: translatey(-6px);border-radius: 8px;
  color: var(--text-color-light);font-family: "League Spartan", sans-serif;font-size: 1.2rem;
  font-weight: 500;text-decoration: none;text-transform: uppercase;}

.custom-button-bottom {min-width: 15ch;text-align: center;transition: 0.07s ease-in;
  background: linear-gradient(#00000090),  linear-gradient(var(--third-color-grey));
  width: fit-content;cursor: pointer;border-radius: 8px;box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.381);}

.custom-button:hover {background: linear-gradient(#ffffff25), no-repeat,linear-gradient(var(--third-color-grey));}
.custom-button-bottom:hover {background: linear-gradient(#00000020),linear-gradient(var(--third-color-grey));}

.custom-button:active,.custom-button-bottom:active .custom-button {transform: translateY(0);}

.custom-button-bottom:active {box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.381);}
/* 
.blue-colors .custom-button {
  background: url(images/svg/blue-button-paw.svg) no-repeat,
    linear-gradient(var(--primary-color));
  color: var(--text-color-light);
}

.custom-button-bottom.blue-colors {
  background: linear-gradient(#00000047), linear-gradient(var(--primary-color));
}

.blue-colors .custom-button:hover {
  background: linear-gradient(#ffffff10),
    url(images/svg/blue-button-paw.svg) no-repeat,
    linear-gradient(var(--primary-color));
}
.custom-button-bottom.blue-colors:hover {
  background: linear-gradient(#00000030), linear-gradient(var(--primary-color));
}

.yellow-colors .custom-button {
  background: url(images/svg/orange-button-paw.svg) no-repeat,
    linear-gradient(var(--secondary-color));
  color: var(--third-color-darkest);
}

.custom-button-bottom.yellow-colors {
  background: linear-gradient(#0000006c),
    linear-gradient(var(--secondary-color));
}

.yellow-colors .custom-button:hover {
  background: linear-gradient(#ffffff25),
    url(images/svg/orange-button-paw.svg) no-repeat,
    linear-gradient(var(--secondary-color));
}
.custom-button-bottom.yellow-colors:hover {
  background: linear-gradient(#00000020),
    linear-gradient(var(--secondary-color));
}
  
 */


/* colorthings */
/* ----------- */
.metal-green, .metal-green-all section{background-color: var(--green-background);padding: 1rem;margin: 0.5rem;
    border:#00000000 20px solid;border-radius:3px;
    border-image:url(/images/griddy/borderwawa.png)30 round;color: #000;}
.fiendlet-red{background-color: #c49eaf;color: #000;border-color: #ff0066;border-radius: 4px;}


/* flex world */
/* ---------- */
.one-one{display: flex;flex-flow: column;}

/* stupid */
/* ------ */
.squish{transition-duration:500ms;}
.squish:hover{box-shadow:0px 0px 30px #ff0066 inset, 0px 10px 100px 50px #ff0066;animation: fear 0.2s infinite;}


/* specific!!! */
/* ----------- */

/* main page */
.other-links{display: flex;flex-flow: wrap;justify-content: space-between;align-items: center;background-color: #ffffff51;padding: 1rem;border-radius: 5px;gap: 0.2rem;}
.other-links a img{max-width: 100px;}

/* about ME! */
.interests div{display: flex;flex-flow: column;padding: 0.5rem;background-color: #ffffff4b;}
.interests div:nth-child(even){background-color: #ffffff8b;}
.interests a{width: fit-content;}

/* art page */
.row-nav ul{display: flex;flex-flow: wrap;gap: 0 0.5rem;padding: 0;}

.art-grid{}
.art-grid > div{break-inside: avoid;background-color: var(--light-green-background);border: 2px var(--dark-green-margin) solid;
margin-bottom: 1rem;display: flex;flex-flow: column;}
.art-grid > div > div{padding: 0 1rem;}
.art-grid > div p {margin-top: 1ch;}
.art-grid > div p a{padding: 0;font-size: 1.1rem;display: inline-block;margin: 0;}


.image-display{position: fixed;top: 0;width: 100%;height: 100%;background-color: #00000098;display: none;z-index: 100;}
.image-display > div{display: flex;align-items: center;justify-content: space-between;margin: 1rem;height: 100%;}
.image-display button{width: 50px;height: 50px;display: flex;position: absolute;top: 16px;margin-bottom: auto;background-color: #090a49;}
.image-display button:last-child{right: 16px;}
.display-container{width: 90vh;overflow: scroll;max-height: 90vh;}
.full-image-view{width: fit-content !important;}

/* character page */
.character-select{display: flex;gap: 1rem;justify-content: space-between;flex-flow: wrap;}
.character-select>div{flex-grow: 1;}
.character-button{display: flex;flex-flow: row ;justify-content: center;align-items: center;gap: 1ch;user-select: none;}
.character-button img{width: 64px;}

.character-info{display: none;flex-flow: column;}

.character-info>div:first-child,.character-info>div:first-child>div{display: flex;flex-flow: row;justify-content: space-between;align-items: center;}
.character-info>div:first-child>div{gap: 1ch;}
/* .character-info>div:first-child>div>div:first-child{width: 80px;} I did it like this because going down roots is fun. It sucks bad though*/
.close-button{width: 50px;}

.character-tags{display: flex; flex-flow: wrap; gap: 1rem;margin: 1rem 0 ;}
.character-tags div{background-color: var(--navy);color: #fff;border:#00000000 10px solid;border-radius:3px;flex-grow: 1;}
.character-tags div:last-child{flex-grow: 1000;} /* need to allow da other tags to flegrow. */

.character-icon{cursor: default;width: 80px;}
.character-body{display: flex;gap: 1rem;flex-flow: column;} /* grid is good here but messes up layout if no image. */
.gallery-select{display: flex;justify-content: space-between;}
.gallery-select .button-texture{min-width: 2ch;text-align: center;user-select: none;}
/* querythings */
/* ----------- */

@media screen and (min-width:640px){
  .one-one{flex-flow: row;}
  .one-one > *:first-child{flex-grow: 1;max-width: 20ch;}
  .one-one > *:last-child{flex-grow: 3;}
  .art-grid{columns: 2;}
  .image-display button{position: relative;}
  .character-body{flex-flow: row;}
  .gallery-image{width: 250px;}
}
@media screen and (min-width:830px){
  header nav ul{gap: 1rem;flex-flow: wrap row;}
  .art-grid{columns: 3;}
}

.shimeji, .shimejiTINYMOTH {width: inherit !important;}