/*...........................................................

	variables

..........................*/

:root{
    --grey: #a6b7da;
    --pink: hsl(352, 79%, 82%);
    --text-shadow-color: 90deg 10% 29%;

	--border-level-2: calc(0.05rem + 0.15vmax) solid;
    --border-level-2-size: calc(0.05rem + 0.15vmax);
 
    --size: calc(1.25em + 3vmax);
    --sticker-size: calc(var(--size) * 1.25);
    --height: calc(var(--size) / 2 + 0.5em);
    --curve-height: calc(var(--size) + 0.5em);
    --curve-radius: calc(var(--size) / 4);
 
    --popup-width: calc(var(--full-width) - var(--gap));
    --popup-height: calc(var(--full-height));
 
    --ratio: 8;
    --battle-length: calc(var(--size) * var(--ratio));
    --cont-length: calc(var(--size) * var(--ratio) * 2.88);
    --cont-1: calc(var(--cont-length) / 4.75);
    --cont-2: calc(var(--cont-length) - var(--cont-1));
    
    --ring-size: 5vmax;
    --ring-border: 0.2vmax solid;
    --ring-height: calc(var(--ring-size) / 2 + 0.5em);
 
    --life-saving-drop-shadow:
        drop-shadow(2.8px 2.8px 1.1px rgba(0, 0, 0, 0.07))
        drop-shadow(4.3px 4.3px 2.8px rgba(0, 0, 0, 0.05));
        
    --simple-text-shadow:
        drop-shadow(0.033em 0.025em 0.02em rgb(0 0 0 / 0.14))
        drop-shadow(0.04em 0.03em 0.03em rgb(0 0 0 / 0.18));
}

/*...........................................................

	basic styling

..........................*/

body{
    background-color: var(--aqua-bg);
    background-image: url("/bg/01.png");
        background-position: center;
        background-size: 12vmax;
    margin: var(--gap);
    margin-top: var(--double-gap);
    padding-right: var(--double-gap);
    overflow-y: hidden;
    overflow-x: scroll;
}

img[src*="easy"]{
    display: none;
}

#s-m-t-tooltip{
   min-width: max-content;
}

main{
    max-height: calc(var(--full-height) - var(--gap) - 2em);
    width: fit-content;
    padding-right: var(--gap);

    button{
        display: contents;
    }
}

footer{
    font-size: 0.9em;
    position: fixed;
        bottom: 1ch;
        left: 25%;
}

/*.............................

	   shadows

..........................*/

main section{
   filter: var(--drop-shadow-medium);
}

.line span, #fell span{
   filter: var(--simple-text-shadow);
}

footer{
   filter: var(--drop-shadow-low);
}

.point,
.sticker{
   filter: var(--life-saving-drop-shadow);
}

:is(.point, .sticker):hover,
:is(.point, .sticker):focus{
   filter: var(--life-saving-drop-shadow) brightness(1.025) saturate(1.025);
   scale: 1.077;
}

:is(.point, .sticker),
:is(.point, .sticker):hover,
:is(.point, .sticker):focus{
   transition: filter .2s ease-out, scale .2s ease-in;
}

[popover]{
   box-shadow: var(--life-saving-box-shadow);
}

/*.............................

	   lines

..........................*/

.line{
    height: var(--height);
    width: auto;
    padding: 0 1.5em;
    padding-bottom: 0.5ch!important;
    box-sizing: border-box;
    display: flex;
       justify-content: center;
       align-items: center;
    background-color: var(--blue);
    border: var(--border-level-2);
    border-left: 0;
    border-right: 0;
    z-index: 5;
}
 
 .line.vertical{
    width: var(--height);
    height: auto;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.12ch;
    padding: 0.66em 0.66em 0.66em 1em;
    align-self: stretch;
    transform: translateY(calc(-0.9 * var(--border-level-2-size)));
    border: var(--border-level-2);
    border-top: 0;
    border-bottom: 0;
}
 
 .line span, #fell span{
    text-shadow: var(--text-shadow-white);
    font-weight: bold;
}
 
 /*.............................
 
     points and stickers
 
 ..........................*/

input{
    background: none;
    border: none;
    display: inline-block;
}
 
.point{
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
 
.sticker{
    transform: translateY(-0.25ch);
}
 
.point, .sticker{
    width: var(--sticker-size);
    height: var(--sticker-size);
    z-index: 9;
}
 
 /*...........................................................
 
        connecting curves
 
 ..........................*/
 
 .curve{
    display: block;
    width: var(--height);
    height: var(--curve-height);
    background-color: var(--aqua);
    box-sizing: border-box;
    border: var(--border-level-2);
}
 
 .curve.vertical{
    width: var(--curve-height);
    height: var(--height);
    align-self: end;
}
 
 /*.............................
 
        curve left!!!
 
 ..........................*/
 
 .curve.left{
    justify-self: start;
}
 
 .curve.top.left{
    border-top-right-radius: var(--curve-radius);
}
 
 .curve.bottom.left{
    border-bottom-right-radius: var(--curve-radius);
}
 
 .curve.top.left + .line, 
 .curve.top.left + .line + .point{
    transform: translateY(calc(var(--size) * -0.255));
}
 
 .curve.bottom.left + .line, 
 .curve.bottom.left + .line + .point{
    transform: translateY(calc(var(--size) * 0.25));
}
 
 /*.............................
 
        curve right!!!
 
 ..........................*/
 
 .curve.right{
    justify-self: center;
}
 
 .curve.top.right{
    border-top-left-radius: var(--curve-radius);
}
 
 .curve.bottom.right{
    border-bottom-left-radius: var(--curve-radius);
}
 
 .curve.top.right + .line, 
 .curve.top.right + .line + .point{
    transform: translate(calc(var(--size) * -0.205), calc(var(--size) * -0.25));
}
 
 .curve.bottom.right + .line, 
 .curve.bottom.right + .line + .point{
    transform: translate(calc(var(--size) * -0.205), calc(var(--size) * 0.25));
}
 
 /*...........................................................
 
     sections contain various grids........pray for me
 
 ..........................*/
 
 main section{
    position: absolute;
    display: grid;
    grid-auto-flow: column;
       justify-content: start;
       align-items: center;
}
 
 main > .point{
    position: absolute;
}
 
 /*...........................
 
     the main line the longest one
 
 ..........................*/
 
 #mainline{
    position: static;
    grid-template-columns: [point-1] var(--size) [battle] var(--battle-length) [point-2] var(--size) [cont-1] var(--cont-1) [point-3] var(--size) [cont-2] var(--cont-2) [point-4] var(--size);
    grid-template-rows: repeat(2, var(--size));
}
 
 /* first row */
 
 #ut, #battle, #dust, #cont, #end, #mainline .padding{
    grid-row: 1;
}
 
 #ut{ /* point */
    background-image: url("./assets/button/M10.png");
    transform: scale(1.33) translate(3ch, -0.75ch);
}
 
 #battle{ /* line */
    width: auto;
    background: var(--yellow);
    transform: translateX(1ch);
    background: linear-gradient(90deg, var(--yellow) 70%, var(--red) 95%);
}
 
 #battle .sticker{
    transform: translateY(calc(var(--size) * -0.5)) scale(1.15);
    margin-left: calc(var(--size) / -4);
    margin-right: 0.5vmax;
}
 
 #dust{ /* point */
    background-image: url("./assets/button/B15.png");
    transform: scale(1.15);
}
 
 #dust + .line{
    transform: translateX(-1ch);
}
 
 #cont{ /* line */
    padding: 0 calc(1em + 1.5ch * var(--ratio));
    justify-content: space-between;
    background: linear-gradient(90deg, var(--purple) 20%, var(--pink) calc(50%), var(--blue) 90%);
    grid-column-start: cont-1;
    grid-column-end: point-4;
}

#cont .sticker{ /* point */
    transform: scale(1.5);
}
 
 #end{ /* point */
    background-image: url("./assets/button/B04.png");
    transform: scale(1.5) translate(-1ch, -1.5ch);
}
 
 /*..................
 
     second row
 
 .................*/
 
 #amnesia,
 #memory,
 #mainline .curve{
    grid-row: 2;
}
 
 #mainline .curve{
    grid-column: point-2;
    background: var(--purple);
}
 
 #memory{
    grid-column: cont-1;
    background: linear-gradient(90deg, var(--purple) 0%, var(--grey) 20%);
}
 
 #amnesia{
    background-image: url("./assets/button/L18.png");
    grid-column: point-3;
    transform: scale(1.44) translate(-3.5ch, 1.5ch);
}
 
 /*..................................................
 
     glitch diversion - domestic hell
 
 ...................................................*/
 
 #cluster{
       top: 16vmax;
       left: 16vmax;
    grid-template-rows: repeat(4, var(--size));
    grid-template-columns: var(--size) auto var(--size);
}
 
 #cluster .curve,
 #mimo{
    grid-column: 1;
}
 
 #submit, 
 #rehab, 
 #break,
 #shenanigans{ /* line */
    grid-column: 2;
    width: calc(var(--size) * 3.5);
}
 
 #cluster .curve.top, 
 #submit{ /* line */
    background-color: var(--green);
}

#submit{
    transform: translate(calc(var(--size)* -0.205), calc(var(--size)* -0.255));
}
 
 #rehab{ /* line */
    background-color: var(--aqua);
    background-image: linear-gradient(to right, var(--aqua) 40%, var(--blue));
    width: calc(var(--size) * 4.5);
    margin-left: -0.2ch;
    transform: translateX(-0.5ch);
}

#rehab, #core, #reform, #snowdin{
    margin-top: -0.77ch;
}
 
 #cluster .curve.bottom.right, 
 #break{ /* line */
    background-color: var(--red);
}
#core,
 #stockholm, 
 #seppuku,
 #cluster .curve.bottom.left{ /* line */
    grid-column: 3;
    margin-left: calc(var(--size) * -1);
}

#reform{
    grid-row: 2;
    grid-column: 4;
    width: calc(var(--size) * 2.7);
    min-width: fit-content;
    transform: translateX(calc(var(--size)* -0.44));
    background-color: var(--blue);
    /* background-image: linear-gradient(to right, var(--aqua) 33%, var(--blue)); */
}
 
#snowdin{
    grid-column: 5;
    margin-left: calc(var(--size) * -1);
}
 
 /*...........................
 
     points auahghg wahhh
 
 ..........................*/
 
 #hell{ /* point */
    background-image: url("./assets/button/C25.png");
    grid-column: 1;
    grid-row: 2;
    transform: scale(1.55) translate(-0.1ch, -1ch);
}
 
#stockholm{ /* point */
   background-image: url("./assets/button/C14.png");
   transform: scale(1.2) translate(calc(var(--size) * -0.88), calc(var(--size) * -0.3));
}
 
#core{ /* point */
   background-image: url("./assets/button/R05.png");
   grid-row: 2;
   transform: scale(1.5) translate(calc(var(--size) * 0.2), calc(var(--size) * -0.27));
}
 
 #snowdin{ /* point */
    background-image: url("./assets/button/E05.png");
    grid-row: 2;
    transform: scale(1.4) translate(calc(var(--size) * 0.3), calc(var(--size) * -0.22));
}
 
 #seppuku{ /* point */
    background-image: url("./assets/button/F02.png");
    grid-row: 3;
    transform: scale(1.25) translate(calc(var(--size) * -0.44), calc(var(--size) * 0.1));
}
 
 /*................................
 
     mimo's playhouse
 
 ..........................*/
 
 #shenanigans, 
 #mimo, 
 #cluster .curve.bottom.left{
    grid-row: 4;
}
 
 #shenanigans, 
 #cluster .curve.bottom.left{
    background: var(--orange);
}
 
 #cluster .curve.bottom.left{
    grid-column: 3;
}
 
 #shenanigans{
    --plus: calc(100% / 4);
    width: calc(var(--size) * 6);
    margin-left: calc(var(--size) * -1.5);
    grid-column-end: 3;
    grid-column-start: 1;
    background:
       linear-gradient(270deg,
       var(--orange) 0%,
       var(--yellow) 24%,
       var(--green) calc(25% + (var(--plus) * 1.3)),
       var(--aqua) calc(25% + (var(--plus) * 2.5)),
       var(--blue) calc(25% + (var(--plus) * 3))
       );
    span{
        display: inline-block;
        margin-left: calc(var(--size) * 0.75);
    }
}
 
 #mimo{ /* point */
    background-image: url("./assets/button/A04.png");
    margin-left: calc(var(--size) * -2.5);
    margin-top: 2.5ch;
    transform: scale(1.42) translateY(-0.1ch);
}
 
 /*..................................................
 
        FARMTALE!!!!!!!! BOKUMONO BOKUJO AHAHAHHH
 
 ...................................................*/
 
 #farmtale{
       top: 20vmax;
       left: 72vmax;
    grid-template-columns: var(--size) calc(var(--cont-1) / 1.66) var(--size);
}
 
 /* columns */
 
 #bokumono, 
 #farmtale .curve{
    grid-column: 1;
}
 
 #farmtale .line{
    grid-column: 2;
}
 
 #remember,
 #forget{
    grid-column: 3;
}
 
 /* rows */
 
 #love, #remember{
    grid-row: 1;
}
 
 #forget,
 #loss,
 #farmtale .curve.bottom{
    grid-row: 3;
    margin-top: -0.6ch;
}
 
 :is(#love, #loss) span{
    transform: translateX(-1ch);
}
 
 /* colors */
 
 #love,
 #farmtale .curve.top{
    background: var(--yellow);
}
 
 #loss,
 #farmtale .curve.bottom{
    background-color: var(--green);
}
 
 /* defining images */
 
 #bokumono{
    grid-row: 2;
    transform: scale(1.4) translateY(-1ch);
    background-image: url("./assets/button/A02.png");
}
 
 #remember{
    transform: translate(calc(var(--size) * -0.78), calc(var(--size) * -0.3));
    background-image: url("./assets/button/T17.png");
}
 
 #forget{
    transform: scale(1.36) translate(calc(var(--size) * -0.24), calc(var(--size) * 0.05));
    background-image: url("./assets/button/B03.png");
}
 
/*..................................................

       underswap............... NEW VERSIOn w crossbones hehe

...................................................*/

#swap{
    top: 11.5vmax;
    left: 110.5vmax;
    grid-auto-flow: row;
 
    #konpeito{
        background-image: url("./assets/button/D03.png");
        transform: scale(1.36) rotate(10deg) translate(-0.75em, 0.15em);
    }
 
    #cross{
        background-image: url("./assets/button/N01.png");
        transform: scale(1.44) translate(-0.77em, -1.11em);
    }

    .line.vertical{
        background: linear-gradient(180deg, var(--aqua) 33%, var(--blue) 66%);
    }
}
 
 /*..................................................
 
        underswap............... THE VERSION IM SCRAPPING IDK?
 
 ...................................................
 
 #swaporiginal{
       top: 14vmax;
       left: 111vmax;
    grid-template-rows: var(--size) calc(var(--size) * 2.5) var(--size);
}
 
 #swaporiginal .curve,
 #konpeito{
    grid-row: 1;
}
 
 #konpeito{
    grid-column: 2;
    background-image: url("./assets/button/D03.png");
    transform: scale(1.55);
}
 
 #swaporiginal .line{
    grid-row: 2;
}
 
 #slaughter,
 #swaporiginal .right{
    background-color: var(--purple);
}
  
 #slaughter{
    grid-column: 1;
}
 
 #spare{
    grid-column: 3;
    justify-self: end;
}
 
 #spare,
 #swaporiginal .left{
    background-color: var(--aqua);
}
 
 #disaster, #darling{
    grid-row: 3;
}
 
 #disaster{
    background-image: url("./assets/button/T02.png");
    grid-column: 1;
    justify-self: start;
    transform: scale(1.2) rotate(-5deg) translate(-0.75ch, -0.25ch);
}
 
 #darling{
    background-image: url("./assets/button/B14.png");
    grid-column: 3;
    justify-self: end;
    transform: scale(1.3) rotate(5deg) translate(0.8ch, -2ch);
}
 
 /*...........................................................
 
     underfell... it's a ring... IT'S A CYCLE!!!!!!!! (also a collar lolol)
 
 ..........................*/
 
 #fell{
       top: 13vmax;
       left: 132vmax;
    grid-auto-flow: row;
    font-size: 1.6vmax!important;
}
 
 #fell .point{
    height: calc(var(--sticker-size) * 1.3);
    width: calc(var(--sticker-size) * 1.05);
    background-image: url("./assets/button/A01_B.png");
    transform: scale(1.4) translate(90%, 200%);
}

#fell .point:is(:hover, :focus){
    scale: 1.02;
}
 
 /* making a circle!! looks like a rattle hehe */

.ring{
    width: calc(var(--ring-size) * 2.44);
    height: calc(var(--ring-size) * 2.22);
    border: var(--ring-height) solid var(--red);
    border-radius: 100%;
    outline: var(--ring-border);
}

.ring::before,
.ring::after{
    content: "";
    z-index: -1;
    display: inline-block;
    position: absolute;
    border: var(--ring-height) solid var(--black);
    border-radius: 100%;
}

.ring::before{
    display: none;
    top: 4.82vmax;
    left: -0.18vmax;
    width: calc(var(--ring-size) * 2.44 + 0.32vmax);
    height: calc(var(--ring-size) * 2.22 + 0.32vmax);
}

.ring::after{
    width: calc(var(--ring-size) * 2.44 - 0.3vmax);
    height: calc(var(--ring-size) * 2.22 - 0.3vmax);
    transform: translate(calc(var(--ring-size) * -0.625), calc(var(--ring-size) * -0.625));
}
 
 /* moving the text around AHHHHHHH */
 
 #fell span.normal{
    display: block;
    width: 23ch;
    transform: translateY(-4.1ch);
}
 
 #fell .circular-text span{
    height: calc(var(--ring-height) * 2.75);
    position: absolute;
    width: 1ch;
    left: 0;
    top: 0;
    transform-origin: bottom center;
}
 
 #fell .circular-text{
    --degrees: 6.5deg;
    position: relative;
    transform: rotate(-75deg) translate(calc(15vmax + 1.25em), calc(-8vmax - 2em));
}
 
 /* cursed. absolutely cursed. rotates each letter */
 
 .circular-text span:nth-child(1){ transform: rotate(calc(var(--degrees) * 1));}
 .circular-text span:nth-child(2){ transform: rotate(calc(var(--degrees) * 2));}
 .circular-text span:nth-child(3) { transform: rotate(calc(var(--degrees) * 3));}
 .circular-text span:nth-child(4) { transform: rotate(calc(var(--degrees) * 4));}
 .circular-text span:nth-child(5) { transform: rotate(calc(var(--degrees) * 5));}
 .circular-text span:nth-child(6) { transform: rotate(calc(var(--degrees) * 6));}
 .circular-text span:nth-child(7) { transform: rotate(calc(var(--degrees) * 7));}
 .circular-text span:nth-child(8) { transform: rotate(calc(var(--degrees) * 8));}
 .circular-text span:nth-child(9) { transform: rotate(calc(var(--degrees) * 9));}
 .circular-text span:nth-child(10) { transform: rotate(calc(var(--degrees) * 10));}
 
 .circular-text span:nth-child(11){ transform: rotate(calc(var(--degrees) * 11));}
 .circular-text span:nth-child(12){ transform: rotate(calc(var(--degrees) * 12));}
 .circular-text span:nth-child(13) { transform: rotate(calc(var(--degrees) * 13));}
 .circular-text span:nth-child(14) { transform: rotate(calc(var(--degrees) * 14));}
 .circular-text span:nth-child(15) { transform: rotate(calc(var(--degrees) * 15));}
 .circular-text span:nth-child(16) { transform: rotate(calc(var(--degrees) * 16));}
 .circular-text span:nth-child(17) { transform: rotate(calc(var(--degrees) * 17));}
 .circular-text span:nth-child(18) { transform: rotate(calc(var(--degrees) * 18));}
 .circular-text span:nth-child(19) { transform: rotate(calc(var(--degrees) * 19));}
 .circular-text span:nth-child(20) { transform: rotate(calc(var(--degrees) * 20));}
 
 .circular-text span:nth-child(21) { transform: rotate(calc(var(--degrees) * 21));}
 .circular-text span:nth-child(22){ transform: rotate(calc(var(--degrees) * 22));}
 .circular-text span:nth-child(23) { transform: rotate(calc(var(--degrees) * 23));}
 .circular-text span:nth-child(24) { transform: rotate(calc(var(--degrees) * 24));}
 
 /*...........................................................
 
        misc points aughghg wahhh
 
 ..........................*/
 
 .fail{ /* point */
    width: calc(var(--sticker-size) * 0.77);
    height: calc(var(--sticker-size) * 0.77);
    background-image: url("./assets/button/M12.png");
}
 
 .fail:first-of-type{
    top: 9vmax;
    left: 16vmax;
    transform: rotate(40deg);
}
 
 .fail:nth-of-type(2){
    top: 13vmax;
    left: 11.5vmax;
    transform: rotate(233deg);
}
 
 .fail:nth-of-type(3){
    top: 19vmax;
    left: 10.55vmax;
    transform: rotate(160deg);
}
 
 #horror{
    /* height: calc(var(--sticker-size) * 1.22); */
    width: calc(var(--sticker-size) * 1.22);
    background-image: url("./assets/button/N08.png");
    transform: scale(1.15) rotate(-5deg);
    top: 29vmax;
    left: 51vmax;
}
 
 #green{
    height: calc(var(--sticker-size) * 2);
    width: calc(var(--sticker-size) * 2.44);
    background-image: url("./assets/button/E03.png");
    transform: rotate(10deg);
    top: 12vmax;
    left: 120vmax; 
}
 
 #outspare{
    width: calc(var(--sticker-size) * 1.33);
    height: calc(var(--sticker-size) * 1.5);
    background-image: url("./assets/button/V18.png");
    transform: scale(1.11) rotate(-25deg);
       top: 27vmax;
       left: 120vmax; 
}
 
#magica{
   transform: scale(1.5) rotate(5deg);
   background-image: url("./assets/button/F23.png");
   top: 24vmax;
   left: 99vmax;
}
 
#dr{
    transform: scale(1.5) rotate(5deg);
    background-image: url("./assets/button/C02.png");
       top: 19vmax;
       left: 58vmax;
}
 
#pkmn{
   transform: scale(1.3);
   background-image: url("./assets/button/F09.png");
      top: 12vmax;
      left: 95vmax;
}
 
#shoujo{ /* high school au */
   width: calc(var(--sticker-size) * 2);
   height: calc(var(--sticker-size) * 1.48);
   background-image: url("./assets/button/G02.png");
   top: 12vmax;
   left: 155vmax; 
}
 
#brother{
   width: calc(var(--sticker-size) * 1.88);
   transform: scale(1.05) rotate(1deg);
   background-image: url("./assets/button/O07.png   ");
   top: 11vmax;
   left: 141vmax; 
}
 
#school{ /* mimo's schoolhouse */
    transform: scale(1.4) rotate(4deg);
    background-image: url("./assets/button/E15.png");
    top: 21.22vmax;
    left: 168vmax;
}
 
#yume{
   transform: scale(1.5) rotate(-20deg);
   background-image: url("./assets/button/B06.png");
   top: 30vmax;
   left: 156vmax; 
}
 
#outer{
   transform: rotate(12deg) scale(1.5);
   background-image: url("./assets/button/K08.png");
   display: none;
}
 
 #sweet{
    transform: scale(1.55) rotate(5deg);
    background-image: url("./assets/button/B12.png");
       top: 34vmax;
       left: 171vmax;
}

/*...................................................................

        pop up popover modal!!!!

................................................................*/

[popover].texture{
    padding: calc(var(--gap) * 1.5);
    width: var(--popup-width);
    height: var(--popup-height);
    text-shadow: var(--literal-text-shadow);    

    ol, ul, menu{
        line-height: 1.4;
    }
}

[popover].texture > * > *:not(img){
    filter: none;
}

[popover] > div{
    display: grid;
    box-sizing: border-box;
    padding-top: var(--gap);
    grid-template-areas:
        'img h2'
        'img p';
    grid-template-columns: 40% 1fr;
    grid-template-rows: max-content 1fr;
     gap: var(--gap);
     --back-position: 0.75em;
        background-position: var(--back-position) calc(100% - var(--back-position));
        background-repeat: no-repeat;
        background-size: 2em;
    
    @media (orientation: portrait){
        display: block;

        h2{
            margin: 0 auto 0.5em auto;
        }

        > img:first-of-type{
            margin: 1em auto;
        }

        .hugme{
            overflow-y: visible;
            height: fit-content;
        }
    }
}

[popover] > div > img:first-of-type{
   grid-area: img;
   align-self: center;
   justify-self: center;
}

[popover] img{
   max-width: 100%;
   max-height: 100%;
}

[popover] h2{
   grid-area: h2;
   margin: 0 auto;
   text-align: center;
}

[popover] .hugme{
   grid-area: p;
   height: calc(100% - 1em);
}

h3{
   text-align: center;
}

[popover] .hugme img{
   max-height: calc(100% - var(--gap));
}

/*...........................................

	buttons to close the modal

..........................*/

[popover]{

    button{
        margin: 1em auto;
        margin-bottom: var(--gap);
        display: block;
        font-family: var(--body-font);
        font-size: 1em;
        font-weight: bold;
        line-height: 2;
        text-shadow: var(--text-shadow-white);
        padding: 0 2em 0.66ch 2em;
        background: var(--green-texture);
        border: var(--border-level-1);
            border-radius: var(--border-radius-level-1);
            border-style: outset;
            border-color: var(--green);
    }

    button > *{
        filter: var(--drop-text-shadow);
    }

    button:is(:hover, :focus){
        background: var(--red-texture);
        border-color: var(--red);
    }
        
    button, button:is(:hover, :focus){
        transition: background .1s ease-in, border-color .1s ease-in;
    }
}

/*..........................

	the table within (slams guitar)

..........................*/

[popover] table{
   width: 100%;
   text-align: center;
   vertical-align: middle;
}

[popover] th{
   font-variant: small-caps;
   font-size: 1.2em;
   letter-spacing: 0.066em;
}

[popover] td[rowspan="3"]{
   width: 50%;
}

[popover] td[rowspan="3"] span{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

[popover] td[rowspan="3"] span:not(:last-child){
   margin-bottom: 1ch;
}

/*..........................

	styling individual boxes/sections

..........................*/

[popover].longtitle > div{
   grid-template-areas: 'h2 h2' 'img p'!important;
   grid-template-rows: min-content 1fr;

   .hugme{
    overscroll-behavior: contain!important;
   }

    > img:first-of-type{
        align-self: start;
        position: sticky;
        top: var(--gap);
        max-height: calc(100% - var(--gap));
    }
}