/* ------------------- */
/*  Custom properties  */
/* ------------------- */

:root {
    /* colors */
    --clr-dark: 230 35% 7%;
    --clr-accent: 194 100% 47%;
    --clr-light: 231 76% 95%;
    --clr-white: 0 0% 94%;
    --clr-highlight: 289 21% 30%;

    /* font-sizes */
    --fs-900: 9.375rem;
    --fs-800: 6.25rem;
    --fs-700: 3.5rem;
    --fs-600: 2rem;
    --fs-500: 1.75rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-200: 0.89rem;

    /* font-families */
    --ff-serif: "Bellefair", serif;
    --ff-sans-cond: "Barlow Condensed", sans-serif;
    --ff-sans-normal: "Barlow", sans-serif;
}

/* colors */
.bg-dark { background-color: hsl( var(--clr-dark));}
.bg-dark-gradient { background-color: hsl( var(--clr-dark) /0.8);}
.bg-accent { background-color: hsl( var(--clr-accent));}
.bg-light { background-color: hsl( var(--clr-light));}
.bg-light-gradient { background-color: hsl( var(--clr-light) / 0.9);}
.bg-white { background-color: hsl( var(--clr-white));}
.bg-highlight { background-color: hsl( var(--clr-highlight));}
.bg-gradient {
    background-image: linear-gradient(to bottom right,
    rgba(11,13,23,.25),
    rgba(0,184, 241,.8),
    rgba(11,13,23,.25));
}
.text-dark { color: hsl( var(--clr-dark));}
.text-accent { color: hsl( var(--clr-accent));}
.text-light { color: hsl( var(--clr-light));}
.text-white { color: hsl( var(--clr-white));}

/* typography */
.ff-serif { font-family: var(--ff-serif); }
.ff-sans-cond { font-family: var(--ff-sans-cond); }
.ff-sans-normal { font-family: var(--ff-sans-normal); }

.letter-spacing-1 { letter-spacing: 4.75px; }
.letter-spacing-2 { letter-spacing: 2.7px; }
.letter-spacing-3 { letter-spacing: 2.35px; }

.uppercase { text-transform: uppercase; }

.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }

.fs-900,
.fs-800,
.fs-700,
.fs-600 {
    line-height: 1.1;
}


/* ------------------- */
/*        Reset        */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* set up the body */
body {
    font-family: var(--ff-sans-cond);
    font-size: .9rem;
    color: hsl( var(--clr-light));
    background-color: hsl( var(--clr-dark));
    line-height: 1.5;
    min-height: 100vh;
    text-decoration: none;
    overflow-x: hidden;
}

/* Reset margins */
:is(body, h1, h2, h3, h4, h5, p, figure, picture) {
    margin: 0;
}

::selection {
    /*everywhere*/
    background: hsl( var(--clr-highlight));
}

.no-highlight {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */      
}    

/* make form elements easier to work with */
:is(input, button, textarea, select) {
    /*button - main, rolm page*/
    font: inherit;
}


/* ----------------------------------------- */
/*              BLOCK ELEMENTS               */
/* ----------------------------------------- */

u + blockquote {
    margin-top: .5rem;
}

blockquote {
    /*core, newbie page*/
    border-left: .3rem solid hsl( var(--clr-accent));
    margin: 1.5em .7rem;
    padding: 0.5em .7rem;
    font-family: var(--ff-sans-cond);
    font-size: .9rem;
}

blockquote + .bmud,
blockquote + .bquest,
blockquote + .bsummary {
    margin-top: -1rem;
}

.bmud {
    /*slime page*/
    border: none;
    margin: 0;
    padding: 0.5em 1rem;
    font-family: var(--ff-sans-cond);
    font-size: .7rem;
    max-width: 80ch;
}

.bmud pre {
    white-space: pre-line;
}

.bquest {
    /*quest page*/
    border-left: none;
    margin: .5em .7rem;
    padding: 0.5em .7rem;
    font-family: var(--ff-sans-cond);
    font-size: .9rem;
}

.bsummary {
    /*slime page*/
    border: none;
    margin: 0;
    padding: 0.5em .5rem;
    font-family: var(--ff-sans-cond);
    font-size: .7rem;
    max-width: 80ch;
}

.bupdate {
    /*main page*/
    border: none;
    margin: -.5rem 0 0 0;
    padding: 0.5em 1rem;
    font-family: var(--ff-sans-cond);
    font-size: .85rem;
    max-width: 80ch;
    }

/*.quote:before {
    color: hsl( var(--clr-accent));
    content: open-quote;
    font-size: 3rem;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.3em;
}*/

h1, h2 {
    /*core, main, newbie, rolm page*/
    font-family: var(--ff-serif);
    font-size: var(--fs-400);
    color: hsl( var(--clr-accent));
    margin-top: -2.3rem;
    padding: .2rem .2rem .2rem .5rem;
    background: hsl(var(--clr-dark));
    border: .1rem solid hsl( var(--clr-accent));
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.above-fieldset {
    /*this is an h2 on the about page*/
    justify-self: center;
    width: 75%;
    margin-top: 0;
    margin-bottom: -0.5rem;
    text-align: center;
}

h3, h4, h5, h6 {
    /*about, core, main, newbie, skills page*/
    text-transform: uppercase;
    font-family: var(--ff-serif);
    color: hsl( var(--clr-accent));
    font-size: var(--fs-200);
    font-weight: lighter;
    margin-top: .2rem;
    margin-bottom: -1rem;
    text-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.professions h3 {
    padding-top: .5rem;
}

.heading-not-up {
    /*newbie page*/
    text-transform: uppercase;
    font-family: var(--ff-serif);
    color: hsl( var(--clr-accent));
    font-size: var(--fs-200);
    font-weight: lighter;
    text-shadow: 0 10px 20px rgba(0,0,0,0.5);
    margin-bottom: .5rem;
    border: 0;
}

td h2,
td h3 {
    background: transparent;
}

.heading-bold {
    padding: .5rem .3rem;
    color:hsl( var(--clr-accent));
    background-color: hsl( var(--clr-dark));
    text-transform: uppercase;
    font-size: var(--fs-200);
    font-weight: bold;
    border-top: .2rem solid hsl(var(--clr-accent));
    border-bottom: .2rem solid hsl(var(--clr-accent));
}

:is(h5, h6) {
    font-weight: 300;
}

hr {
    /*probably every page*/
    width: 100%;
    height: .05rem;
    background-color: hsl(var(--clr-accent));
    border: none;
}

.thick-bottom {
    border-bottom: thick double hsl(var(--clr-highlight));
}

/* ------------------------------------- */
/*    DROPDOWN AND DETAILS BUTTONS       */
/* ------------------------------------- */

.calculate {
    margin-top: .75rem;
    margin-left: 9.25rem;
    width: 5.1rem;
}

.closebtn {
    /* professions, quests page */
    position: absolute;
    background-color: hsl( var(--clr-dark));
    width: fit-content;
    font-size: var(--fs-300);
    font-family: var(--ff-serif);
    color:hsl( var(--clr-light) / .7);
    line-height: 2;
    outline: .1rem solid hsl( var(--clr-light) / .7);
    border: none;
    border-radius: .2rem;
    margin: -1rem 0 0 1rem;
    cursor: pointer;
}

.closebtn:hover {
    color:hsl( var(--clr-accent));
    outline: .1rem solid hsl( var(--clr-accent));
}

.info-button {
    /*originally on core, now nothing*/
    text-decoration: none;
    font-size: .6rem;
    color: white;
    width: 6.5rem;
    background-color: transparent;
    border: .01rem solid hsl( var(--clr-accent) / .6);
    border-radius: .2rem;
    padding: .3rem .2rem .2rem .2rem;
    cursor: pointer;
    box-shadow: inset 2px 2px 3px hsl( var(--clr-accent) / .4),
    inset -2px -2px 3px rgba(0, 0, 0, .6);
    margin-bottom: .75rem;
}

.area-index .link-to-page {
    display: none;
}

.info-button:active {
    /*dungeons*/
    box-shadow: inset -2px -2px 3px hsl( var(--clr-accent) / .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

#myBtn {
    /*goes on every page, invisible at the bottom*/
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    background: rgba(0,0,0,0.5);
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 15px;
}

#myBtn:hover,
#myBtn:focus {
    /*goes on every page, invisible at the bottom*/
    border: 1px solid white;
    outline: 3px solid hsl(var(--clr-accent));
}

.dropbtn {
    /*core, rolm page*/
    display: inline-block;
}

aside .dropbtn-style {
    /*core, newbie page*/
    border: 0;
    line-height: 2.5;
    padding: 0 2rem;
    font-family: var(--ff-serif);
    font-size: var(--fs-300);
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    vertical-align: top;
    color: hsl( var(--clr-accent) / .8);
    border-radius: .4rem;
    background-color: hsl( var(--clr-dark));
    background-image: none;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .2),
    inset -2px -2px 3px rgba(0, 0, 0, .6);
    cursor: pointer;
}

.dropbtn-style {
    /*core, rolm page*/
    border: 0;
    line-height: 2.5;
    padding: 0 2rem;
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-300);
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    vertical-align: top;
    color: hsl( var(--clr-dark));
    border-radius: .4rem;
    background-color: hsl( var(--clr-light));
    background-image: linear-gradient(to top left,
        rgba(0,184, 241,.8),
        rgba(11,13,23,.25));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
    cursor: pointer;
}

.dropbtn:hover,
.info-button:hover {
    filter: brightness(150%);
}

.dropbtn:focus,
.info-button:focus {
    filter: brightness(170%);
    border-radius: .2rem;
    outline: .03rem solid white;
}

.dropbtn-style:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.dropdown {
    /*core, rolm page*/
    position: relative;
    display: inline-block;
    margin-bottom: .5rem;
}

.dropdown-content {
    /*core, rolm page*/
    display: none;
}

.dropdown-content-style {
    /*rolm page*/
    position: absolute;
    background-color: hsl(var(--clr-dark));
    min-width: 11.5rem;
    height: 20rem;
    margin-top: .25rem;
    overflow: auto;
    box-shadow: 0 12px 18px -10px hsl(var(--clr-dark) / .5);
    right: 0;
    z-index: 1;
    overflow-x: auto;
    border-radius: .2rem;
}

.aside-dropdown {
    /*core page*/
    position: absolute;
    height: 13rem;
    border: .03rem solid hsl( var(--clr-accent));
    background-color: hsl(var(--clr-dark));
    width: 13rem;
    margin-top: .25rem;
    overflow: auto;
    box-shadow: 0 12px 18px -10px hsl(var(--clr-dark) / .5);
    z-index: 1;
    overflow-x: auto;
    border-radius: .2rem;
}

.dropdown-content a {
    /*rolm page*/
    font-family: var(--ff-serif);
    font-size: 1rem;
    font-weight: 200;
    color: hsl(var(--clr-light));
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
}

.dropdown-content a:hover {
    /*rolm page*/
    background-color: hsl(var(--clr-accent) / 0.3);
}

/*this controls whether the dropdown will actually show*/
.show { 
    /*core, rolm page*/
    display: block;
}
/* END OF DROPDOWN BUTTON */

.detailsbtn summary {
    /*on rolm, this is hiding the type & benefits info in case someone doesn't want spoilers*/
    /*on core, newbie page for help and info files*/
    padding: .2rem .5rem .2rem 1rem;
    color: hsl( var(--clr-light));
    font-family: var(--ff-serif);
    background-color:hsl(var(--clr-accent) / .3);
    filter: brightness(90%);
    margin-bottom: .5rem;
    cursor: pointer;
    outline: none;
    border-radius: .3rem;
    transition: filter .3s;
}

.detailsbtn div p {
    max-width: 45rem;
}

.details-area summary {
    /*on rolm, this is hiding the type & benefits info in case someone doesn't want spoilers*/
    /*on core, newbie page for help and info files*/
    padding: 0 0 0 .1rem;
    color: hsl( var(--clr-light));
    font-family: var(--ff-serif);
    font-size: .9rem;
    filter: brightness(90%);
    margin-bottom: .5rem;
    cursor: pointer;
    outline: none;
    border-radius: .3rem;
    transition: filter .3s;
}

.details-area[open] summary {
    padding: 0 0 0 .5rem;
}

.detailsbtn summary small,
.details-area summary small {
    /*core, newbie*/
    font-family: var(--ff-sans-cond);
}

.bkg details div {
    /*newbie page, divs when you open a detailsbtn*/
    padding: .5rem;
    margin-top: -.2rem;
    background-image: linear-gradient(to bottom right,
    rgba(11,13,23,.25),
    rgba(0,184, 241,.15),
    rgba(11,13,23,.25));
    border-radius: .2rem;
}

.detailsbtn summary:hover {
    /*newbie, rolm page*/
    color: hsl( var(--clr-dark));
    background-color: hsl( var(--clr-light));
    background-image: linear-gradient(to top left,
        rgba(0,184, 241,.8),
        rgba(11,13,23,.25));
    filter: brightness(150%);
}

.detailsbtn[open] summary ~ *,
.details-area[open] summary ~ * {
    /*core, newbie, rolm page*/
    animation: sweep .5s ease-in-out;
}

@keyframes sweep {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.detailsbtn summary:focus,
.details-area summary:focus {
    /*core, newbie page*/
    color: hsl( var(--clr-dark));
    background-color: hsl( var(--clr-light));
    background-image: linear-gradient(to top left,
        rgba(0,184, 241,.7),
        rgba(11,13,23,.25));
    filter: brightness(120%);
    border-radius: .2rem;
}

/*Code borrowed from https://justmarkup.com/articles/2020-09-22-styling-and-animation-details/, named faclose because it's using the Font Awesome close icon */
.faclose summary {
    /*lights, newbie, skillquests, skills page*/
    list-style: none;
}

.faclose summary::-webkit-details-marker {
    display: none;
}

.faclose[open] summary > div {
    /*this makes all headers that are inside the summary align to the top on the 
    lights page*/
    display: inline-block;
    width: calc(100% - 30px);
    vertical-align: middle;
    cursor: pointer;
}

.areas .faclose[open] summary > div,
.dungeons .faclose[open] summary > div {
    /*this makes all headers that are inside the summary align to the top on the 
    lights page*/
    /*dungeons page*/
    display: inline-block;
    width: calc(100% - 39px);
    vertical-align: top;
    cursor: pointer;
}

.faclose summary > table tr td {
    vertical-align: middle;
}

.faclose summary > div h3 {
    padding-top: 1rem;
}

.areas .faclose summary > div h3 {
    padding-top: .5rem;
}

/*arrow pointing right*/
/* details summary::before { 
    font-family: "Font Awesome 5 Free";
    font-size: .7rem;
    color:hsl( var(--clr-accent));
    content: "\f0a9";
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    padding-right: .3rem;
    padding-left: 0;
    margin-left: 0;
  }*/
  
  /* By using [open] we can define different styles when the disclosure widget is open */
 .faclose[open] summary::before { 
    font-family: "Font Awesome 5 Free";
    font-size: 1.5rem;
    color:hsl( var(--clr-dark));
    content: "\f2d3";
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    padding-right: .3rem;
  }

/* ------ END OF DROPDOWNS AND BUTTONS ----- */

/* ----------------------------------------- */
/*              INLINE ELEMENTS              */
/* ----------------------------------------- */

code {
    /*core, fantasy, newbie page*/
    color: hsl( var(--clr-light));
    font-family: monospace;
    font-size: .9rem;
}

.code-dark {
    /*core, main, newbie page*/
    color: hsl( var(--clr-light) / 0.4);
    font-size: .75rem;
}

s {
    /*core page*/
    color:hsl(var(--clr-accent) / .4);
}

samp {
    /*newbie page*/
    color: hsl( var(--clr-light));
    font-family: monospace;
    font-size: .9rem;
}

.samp-red {
    /*core, fantasy, newbie page*/
    color: rgb(211, 6, 6);
    font-family: monospace;
    font-size: .9rem;
}

u {
    color:hsl(var(--clr-light) / .5);
}

.upright {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* ----------------------------------------- */
/*                 IMAGES                    */
/* ----------------------------------------- */
/* this selects all abbreviation tags */
abbr {
    /*core page*/
    text-decoration: none;
}

/* make images easier to work with */
:is(img, picture) {
    max-width: 100%;
    display: block;
}

/* specifically for images */
.img-fill {object-fit: fill;}
.img-contain {object-fit: contain;}
.img-cover {object-fit: cover;}
.img-scale-down {object-fit: scale-down;}
.img-none {object-fit: none;}

.area-page-maps {
    justify-content: space-evenly;
}

.area-page-maps div {
    width: 18%; 
    align-content: center;
}

.area-page-maps img {
    height: 100px;
    margin-left: auto; 
    margin-right: auto;
}

.area-page-maps figcaption {
    text-align: center;
}

.ascii-word-div {
    box-sizing: border-box;
}

.ascii-word {
    margin-left: 2rem;
}

.ascii-word,
.ascii-word-next {
    height: 1rem;
    border: 0;
}

.areas .ascii-word,
.areas .ascii-word-next,
.qinfo-area .ascii-word,
.qinfo-area .ascii-word-next,
.qinfo-area .directions + hr,
.dungeons .ascii-word,
.dungeons .ascii-word-next {
    display: none;
}

.qinfo-area .dt-div-with-rating {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}

.qinfo-area .grid {
    margin-right: 2rem;
    margin-bottom: auto;
}

/* this selects the photos, especially related to the puppy page */
/* https://codemyui.com/polaroid-images-gallery-in-pure-css/ */

.main-puppy {
    height: 10rem;
    max-width: 20rem;
}

/* about page */
    .photo-parent {
        /*used on about page*/
        text-align: center;
        float: right;
        margin-top: 1rem;
        margin-right: 15rem;
    }

    .photo-parent-puppy {
        text-align: center;
        float: left;
        margin-top: -2rem;
        margin-bottom: 0;
        margin-left: -10rem;
    }

    .photo {
        position: relative;
        margin: 0 0 2.8rem 1rem;
        padding:0;
        color: hsl( var(--clr-dark));
    }

    .photo li{
        text-align:center;
        display:inline-block;
        list-style:none;
        position:relative;
        padding-left: 0;
        border:solid 12px #fff;
        background:#fff;
        box-shadow:0 0 15px 0px #555;
        transition:all 1s ease;
        -o-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -webkit-transition:all 1s ease;
        top:25px;
    }
    
    .photo li:hover{
        top: -5px;
    }
    
    .photo li:nth-child(1){
        transform:rotate(10deg);
    }
    
    .photo li:nth-child(2){
        transform:rotate(0deg);
    }
    
    .photo li:nth-child(3){
        transform:rotate(-10deg);
    }
    
    .photo li:nth-child(4){
        transform:rotate(20deg);
    }
    
    .photo li p{
        margin: 5px 0 0 0;
    }

    .table-puppy li p {
        margin: 5px 0 0 -8px;
    }

/* end of photo layouts */

figcaption {
    color:hsl( var(--clr-light) / .5);
}

.flowchart-container {
    width: fit-content;
    float: right;
    margin-right: 1rem;
    margin-left: 1rem;
}

.flowchart-container img {
    height: 400px;
    width: auto;
    box-shadow: 0px 0px 15px .5px hsl( var(--clr-dark));
    border: .2rem solid hsl( var(--clr-accent) / .3);
    border-radius: .3rem;
}

/* this selects everything(image) that has an alt tag containing the word map */
/* dungeon/aegis */
[alt~="map"],
[alt~="Map"] {
    box-shadow: 0px 0px 15px .5px hsl( var(--clr-dark));
    border: .2rem solid hsl( var(--clr-accent) / .3);
    border-radius: .3rem;
}

/* this selects everything(image) that has an alt tag containing the word medal */
/* medals */
[alt~="medal"],
[alt~="Medal"] {
    box-shadow: 0px 0px 15px .5px hsl( var(--clr-dark));
    border: .2rem solid hsl( var(--clr-accent) / .3);
    border-radius: .3rem;
    height: 10rem;
}

.map-container {
    max-width: 15.6rem;
    min-height: fit-content;
    margin-top: .5rem;
    margin-bottom: 2rem;
}

.qinfo-area .map-container {
    margin-bottom: 0;
}

.map-container-section-z div {
    margin-left: auto;
    margin-right: auto;
}

.areas .map-container-long img,
.dungeons .map-container-long img {
    max-height: 3rem;
    width: fit-content;
}

.map-container-long figcaption {
    margin-bottom: 2rem;
}

.map-container:hover,
.map-container:focus {
    filter: hue-rotate(90deg);
    outline: .3rem solid silver;
    border-radius: .2rem;
    height: fit-content;
}

.map-container-right {
    /*fantasy page*/
    float: right;
    background-color: transparent;
    padding-right: .7rem;
    padding-bottom: .3rem;
    transition: transform .6s ease-in-out;
}

.map-container-right img {
    width: 100%;
}

.quest-map-container-right {
    /*fantasy page*/
    float: right;
    background-color: transparent;
    width: fit-content;
    padding-right: .7rem;
    padding-left: .7rem;
    padding-bottom: .3rem;
    height: minmax (81px,198px);
    transition: transform .6s ease-in-out;
}

.map-container-left {
    /*core, medals, newbie page*/
    float: left;
    background-color: transparent;
    width: fit-content;
    padding-right: .7rem;
    padding-bottom: .3rem;
    height: minmax (81px,198px);
    transition: transform .6s ease-in-out;
}

.map-container-left img {
    max-height: 198px;
}

.map-container-fill {
    background-color: transparent;
    display: flex;
    max-width: 17rem;
    max-height: 12.3rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: transform .6s ease-in-out;
    border: .2rem solid hsl(var(--clr-accent) / .5);
}

.map-container-fill img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    opacity: .8;
}

.map-container-fill ~ figcaption {
    margin-top: -.75rem;
}

.quest-map-container-left {
    /*fantasy page*/
    float: left;
    background-color: transparent;
    width: fit-content;
    padding-right: 2rem;
    padding-bottom: .3rem;
    height: minmax (81px,198px);
    transition: transform .6s ease-in-out;
}

.map-container-right:hover,
.map-container-left:hover {
    /*core, fantasy, newbie page*/
    transform: scale(1.05);
}

/*
.map-container:focus {
    outline: 4px ridge hsl( var(--clr-light));
    border-radius: .2rem;
}*/

.map-container-right h2,
.map-container-left h2,
.map-container-right h3,
.map-container-left h3,
.quest-map-container-left h3,
.quest-map-container-right h3 {
    /*fantasy page*/
    background-color: transparent;
    color:hsl( var(--clr-accent));
    margin: -.8rem 0 0 0;
    border: 0;
    text-align: center;
    transition: all .5s ease-in-out;
}

.map-of-realm {
    /*fantasy page*/
    height: 18rem;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.map-of-realm:focus {
    /*fantasy page*/
    outline: 4px ridge hsl( var(--clr-light));
    border-radius: .2rem; 
}

.medal-img  img {
    position: relative;
    height: 200px;
    width: auto;
}
  
.img-transparent {
    vertical-align: center;
    height: 3rem;
    width: auto;
    margin-top: -2.3rem;
    margin-left: 12rem;
    padding: .2rem .5rem .2rem .5rem;
    background: hsl(var(--clr-dark));
    border: .1rem solid hsl( var(--clr-accent));
  }
/* -------------- END OF IMAGES ------------- */

/* ------------------------------------- */
/*               LINKS                   */
/* ------------------------------------- */
/*
a {
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    padding: 2px 1px 0;
    color: hsl( var(--clr-hightlight));
    border-bottom: 1px solid red;
  }*/

.midnight-img {
    /*main page*/
    position: relative;
    display: grid;
    text-decoration: none;
    width: fit-content;
}

.midnight-img::after {
    /*main page*/
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: hsl( var(--clr-white));
    border-radius: .5rem;
    opacity: 0;
    transition: opacity 250ms linear, transform 300ms ease-in-out;
}

.midnight-img:hover::after,
.midnight-img:focus::after {
    /*main page*/
    opacity: 1;
    transform: scale(1.5);
}

a.midnight:link {
    /*main, rolm page*/
    color: hsl( var(--clr-white));
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: .3rem .2rem 0 0;
    border-bottom: 1.4px solid hsl( var(--clr-light));
    border-radius: .2rem;
}

a.midnight-span:link {
    /*dungeons*/
    color: hsl( var(--clr-white));
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 .2rem .1rem 0;
    border-bottom: 1.4px solid hsl( var(--clr-light));
    border-radius: .2rem;
}

a.midnight:visited,
a.midnight-span:visited {
    /*main, rolm page*/
    color: hsl( var(--clr-light));
    text-decoration: underline;
    text-transform: uppercase;
    border-bottom: 1px solid hsl( var(--clr-light));
    border-radius: .2rem;
    outline: .1rem solid hsl(var(--clr-accent));
}

a.midnight-dark:link {
    /*main, rolm page*/
    color: hsl( var(--clr-dark));
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: .3rem .2rem 0 0;
    border-bottom: 1.4px solid hsl( var(--clr-dark));
    border-radius: .2rem;
}

a.midnight-dark:visited {
    /*main, rolm page*/
    color: hsl( var(--clr-dark));
    text-decoration: underline;
    text-transform: uppercase;
    border-bottom: 1px solid hsl( var(--clr-dark));
    border-radius: .2rem;
    outline: .1rem solid hsl(var(--clr-accent));
}

a.midnight:hover,
a.midnight-span:hover,
a.midnight-dark:hover {
    /*main, rolm page*/
    border-bottom: 1px solid hsl( var(--clr-accent));
    background: hsl( var(--clr-dark));
    font-weight: 400;
    border-radius: .2rem;
    text-decoration: underline;
    outline: .1rem solid hsl(var(--clr-accent));
}

a.midnight:focus,
a.midnight-span:focus,
a.midnight-dark:focus {
    /*main, rolm page*/
    border-bottom: 1px solid;
    color: hsl( var(--clr-accent));
    background: hsl( var(--clr-dark));
    font-size: var(--fs-300);
    border-radius: .2rem;
    outline: .1rem solid hsl(var(--clr-accent));
}

a.midnight:active,
a.midnight-span:active,
a.midnight-dark:active {
    /*main, rolm page*/
    background: hsl( var(--clr-highlight));
    color: hsl( var(--clr-light));
    border-radius: .2rem;
}

a.topofpage:link {
    /*rolm page*/
    color: hsl( var(--clr-white));
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: .3rem .3rem 0 .3rem;
    border-bottom: .05rem solid hsl( var(--clr-light));
    border-radius: .2rem;
}

a.topofpage:visited {
    /*rolm page*/
    color: hsl( var(--clr-light));
    text-decoration: underline;
    text-transform: uppercase;
    border-bottom: .05rem solid hsl( var(--clr-light));
    border-radius: .2rem;
    outline: .1rem solid hsl(var(--clr-accent));
}

a.topofpage:hover {
    /*rolm page*/
    border-bottom: 1px solid hsl( var(--clr-accent));
    background: hsl( var(--clr-dark));
    border-radius: .2rem;
    text-decoration: underline;
    outline: .05rem solid hsl(var(--clr-accent));
}

a.topofpage:focus {
    /*rolm page*/
    border-bottom: 1px solid;
    color: hsl( var(--clr-accent));
    background: hsl( var(--clr-dark));
    font-size: var(--fs-300);
    border-radius: .2rem;
    outline: .15rem solid hsl(var(--clr-accent));
}

a.topofpage:active {
    /*rolm page*/
    background: hsl( var(--clr-highlight));
    color: hsl( var(--clr-light));
    border-radius: .05rem;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ----------- END OF LINKS --------------- */

/* ---------------------------------------- */
/*                LISTS                     */
/* ---------------------------------------- */

:is(ol, ul) {
    /*main, newbie page*/
    display: block;
    font-family: var(--ff-serif);
    line-height: 1.4;
    margin-left: 0;
    padding-left: .2rem;
}

:is(li) {
    /*main, navigation page*/
    display: block;
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
    line-height: 1.4;
    margin-left: 0;
    padding-top: .5rem;
    padding-left: .2rem;
}

.dl-arrow dt {
    /*main, navigation page*/
    display: block;
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
    line-height: 1.4;
    margin-left: 0;
    padding-top: .5rem;
    padding-left: .2rem;
}

.dl-arrow dd {
    /*main page*/
    display: block;
    font-family: var(--ff-sans-cond);
    line-height: 1.4;
    font-size: var(--fs-200);
    margin-left: .4rem;
}

.dl-arrow dd::before {
    /*main page*/
    font-family: "Font Awesome 5 Free";
    font-size: .5rem;
    color:hsl( var(--clr-accent));
    filter: brightness(50%);
    content: "\f04b";
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    padding-right: .3rem;
}

.dl-bordered {
    /*found at https://codepen.io/philipbutler/pen/wGmXPL*/
    border: 1px solid #ddd;
	border-radius:8px;
}

.dl-bordered dt {
    border-right: 1px solid #ddd;
	padding-right:12px;
	width:25%;
	margin-right:12px;
    float:left;
    text-align:right;
}

.dl-bordered dd {
	padding-right:12px;
	border-bottom: 1px solid #ddd;
	margin-left:0;
}

.dl-bordered dt:last-of-type,
.dl-bordered dd:last-of-type {
	border-bottom:none;
}

.dl-div .map-container {
    margin-top: 1rem;
    margin-left: 1rem;
}

.dl-table {
    border: none;
    font-family: var(--ff-serif);
    font-size: inherit;
    margin-top: 0;
    margin-bottom: -.5rem;
}

.dl-table * {
    vertical-align: text-top;
}

.dt-needs-left-padding div dt {
    padding-left: .5rem;
}

.dl-table dt,
.dl-table dt span {
    width: 7rem;
    margin-right: .5rem;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
}

.dl-table dd,
.dl-table dd span {
    display: inline-block;
    margin-left: .25rem;
    padding-left: .25rem;
    padding-top: .25rem;
    max-width: 60ch;
    font-family: inherit;
    font-size: inherit;
}

/* this makes the rating numbers on the missions page in-line with the rest of the text */
.dl-table dd span {
    height: 1rem;
    margin-top: -.5rem;
    padding-left: 0;
    margin-left: 0;
}

/* this makes the rating numbers on the missions page in-line with the rest of the text */
.dl-table dd .areaclass {
    margin-top: -.3rem;
}

.dl-taco-ingredient dt:first-child,
.dl-taco-ingredient dd:first-child {
    min-width: 6rem;
}
 
.dt-colspan-2 {
    min-width: fit-content;
}

.dl-taco-ingredient .dt-colspan-2 {
    min-width: 70ch;
}

.dl-p {
    box-sizing: border-box;
    max-width: 80ch;
}

.dl-p dd {
    margin-top: -2rem;
    margin-left: 0;
}

.dl-item-table,
.dl-scaler-table {
    border: none;
    font-family: var(--ff-serif);
    font-size: inherit;
    margin-top: 0;
    margin-bottom: -.5rem;
    vertical-align: text-top;
}

.dl-item-table dt,
.dl-item-table dd,
.dl-item-table dt:first-child,
.dl-item-table .dt-div dd:first-child,
.dl-item-table dt:nth-child(2),
.dl-item-table .dt-div dd:nth-child(2) {
    width: 7rem;
    vertical-align: text-top;
}

.dl-item-table dt:nth-child(3),
.dl-item-table .dt-div dd:nth-child(3) {
    width: 10rem;
    vertical-align: text-top;
}

.dl-scaler-table dt,
.dl-scaler-table dd,
.dl-scaler-table dt:first-child,
.dl-scaler-table .dt-div dd:first-child {
    width: 7rem;
    vertical-align: text-top;
}

.knight-training-scaler .dt-div dt:first-child,
.knight-training-scaler .dt-div dd:first-child {
    width: 11rem;
}

.dl-scaler-table dt:nth-child(2),
.dl-scaler-table .dt-div dd:nth-child(2) {
    width: 10rem;
    vertical-align: text-top;
}

.dl-scaler-table dt:nth-child(3),
.dl-scaler-table .dt-div dd:nth-child(3) {
    width: 25rem;
    vertical-align: text-top;
}

.dl-item-table .dt-div:first-child,
.dl-scaler-table .dt-div:first-child {
    /* this is the make-shift th row for dl's */
    background:hsl( var(--clr-dark));
    border-top: .2rem solid hsl( var(--clr-accent));
    border-bottom: .2rem solid hsl( var(--clr-accent));
    font-weight: bold;
}

.dl-item-table dt,
.dl-scaler-table dt {
    padding-left: .25rem;
    margin-right: .5rem;
    display: inline-block;
}

.dl-item-table dd,
.dl-scaler-table dd {
    display: inline-block;
    margin-left: .25rem;
    padding-left: .25rem;
}

.dl-item-table dt:first-child,
.dl-scaler-table dt:first-child {
    text-transform: uppercase;
    color:hsl( var(--clr-accent));
    margin-top: .4rem;
    margin-bottom: .4rem;
}

.dl-item-table dt:nth-child(2),
.dl-scaler-table dt:nth-child(2) {
    text-transform: uppercase;
    color:hsl( var(--clr-accent));
    margin-top: .4rem;
    margin-bottom: .4rem;
}

.dl-item-table dt:nth-child(3),
.dl-scaler-table dt:nth-child(3) {
    text-transform: uppercase;
    padding-left: 0;
    color:hsl( var(--clr-accent));
    margin-top: .4rem;
    margin-bottom: .4rem;
}

.dt-div-with-rating {
    margin-bottom: 1rem;
}

.non-scaling-dungeon dd:nth-child(2) {
    min-width: 30rem;
    max-width: 40rem;
}

.steps {
    /* this is for ol's to have step numbers */
    display: block;
    font-family: var(--ff-serif);
    line-height: 1.4;
    margin-left: 0;
    list-style-type: none;
    counter-reset: elementcounter;
    padding-left: .2rem;
    font-size: 1rem;
  }

  .steps li:before {
    content: "Step " counter(elementcounter) ". ";
    counter-increment: elementcounter;
    color: rgba(37, 248, 248, .8);
  }

  .step-clue,
  .step-item,
  .step-location,
  .step-option {
    display: block;
    font-family: var(--ff-serif);
    line-height: 1.4;
    margin-left: 2rem;
    list-style-type: none;
    counter-reset: elementcounter;
    padding-left: .2rem;
    font-size: 1rem;
  }

  .step-clue li:before {
    content: "Clue " counter(elementcounter) ". ";
    counter-increment: elementcounter;
    color: hsl( var(--clr-accent));
  }

  .step-item li:before {
    content: "Item " counter(elementcounter) ". ";
    counter-increment: elementcounter;
    color: hsl( var(--clr-accent));
  }

  .step-location li:before {
    content: "Location " counter(elementcounter) ". ";
    counter-increment: elementcounter;
    color: hsl( var(--clr-accent));
  }

  .step-option li:before {
    content: "Option " counter(elementcounter) ". ";
    counter-increment: elementcounter;
    color: hsl( var(--clr-accent));
  }

.qinfo-area p,
.qinfo-area ol {
    max-width: 115ch;
}

.qinfo-steps {
    max-width: 90rem;
}

.qinfo-steps div {
    margin-right: 20rem;
    margin-left: 2rem;
}

.marbles .qinfo-steps {
    margin-right: 0;
    margin-left: 0;
}

.create-column {
    height: 450rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.create-column>* {
    flex: 0 1;
}

/* ---------------------------------------------- */
/*                 SEARCH BAR                     */
/* ---------------------------------------------- */
.searchbox {/*for search bar*/
    position: relative;
    height: 3rem;
    margin: .9rem .5rem .5rem .5rem;
}

.search__input {/*for search bar*/
    position: absolute;
    top: 0;
    left: 0;
    width: minmax(300px,6rem);
    height: 100%;
    border: 2px solid #e1e5ee;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: inherit;
    color: white;
    outline: none;
    padding: 1.25rem;
    background: none;
    /* Change border when input focus*/
}

.search__input:hover {/*for search bar*/
    border-color: #0083b9;
}

.search__input:focus {/*for search bar*/
    border-color: #00b8f1;
}

.search__label {/*for search bar*/
    position: absolute;
    left: .5rem;
    top: 0.8rem;
    padding-left: minmax(4px,1px);
    color: white;
    cursor: text;
    transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
    background-color: hsl( var(--clr-dark));
}

/* 1. When the input is in the focus state reduce the size of the label and move upwards 2. Keep label state when content is in input field */
.search__input:focus ~ .search__label, 
.search__input:not(:placeholder-shown).search__input:not(:focus) ~ .search__label {
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0.8rem;
}

/* ---------------------------------------------- */
/*               START OF HEADER                  */
/* ---------------------------------------------- */

header{
    /*main page, this is what holds the main-logo-banner-image*/
    position: relative;
    grid-area: header;
    grid-row: 1 / 2;
    grid-column: 2 / 13;
    margin: 0 0 0 -2rem;
    padding: .5rem 0 0 0;
    width: fit-content;
    min-height: 6rem; /*this 6rem matches the .container class grid setup */
}

.main-logo-banner-image-homepage,
.main-logo-banner-image {
    /*main page*/
    position: relative;
    margin: 0;
    padding: .5rem .5rem .5rem 0;
    width: 100%;
    max-height: 96px;
    object-fit: contain;
    object-position: left;
}

/*makes a light gray hover effect when you move over the wmt banner image*/
.main-logo-banner-image:hover {
    /*main page*/
    background-color: hsl( var(--clr-highlight) / 0.3);
    border-radius: .2rem;
}
/* -------------END OF HEADER-------------------- */

/* ---------------------------------------------- */
/*             START OF NAVIGATION                */
/* ---------------------------------------------- */
nav {
    position: relative;
    grid-area: nav;
    grid-row: 2 / 3;
    grid-column: 2 / 12;
    padding: 0;
    max-width: 1700px;
    height: 5rem; /*this 5rem matches the .container class grid setup */
}

.nav-span {
    /*navigation*/
    text-transform: uppercase;
    font-family: var(--ff-serif);
    color: hsl( var(--clr-light));
    font-size: var(--fs-400);
    font-weight: lighter; 
    z-index: -1;
}

.nav-span:hover,
.nav-span:focus {
    /*navigation*/
    color: hsl(var(--clr-accent));
}

/* -------------------------------------- */
/*        MAIN NAVIGATION MENU            */
/* -------------------------------------- */

/* Hide short text by default (resolution > some amount of px) */
.mid-text {display: none;}
.mid-text-2 {display: none;}
.short-text { display: none; }

/*the menu placement itself*/
.wmt-nav {
    position: relative;
    display: flex;
    margin-top: .75rem;
    margin-right: auto;
    margin-bottom: .5rem;
    margin-left: auto;
    list-style-type: none;
    min-width: 100%;
    justify-content: space-evenly;
    cursor: pointer;
    border: .1rem solid hsl( var(--clr-accent));
    border-radius: .2rem;
    z-index: 1000;
  }

  /*controls the margins of the menu buttons*/
  .wmt-nav li {
    margin: 0;
    padding: 0;
  }

  /*button and button border*/
  .wmt-nav button {
    display: flex;
    font-family: var(--ff-serif);
    font-size: var(--fs-400);
    color: hsl( var(--clr-light));
    padding: 1rem .5rem 1rem .5rem;
    margin: 0;
    width: 100%;
    height: 100%;
    border: 0;
    letter-spacing: 3px;
    text-transform: uppercase;
    background-color: transparent;
    cursor: pointer;
  }

  /*controls the arrows that point down to show to expand menu*/
  .wmt-nav button::after {
    content: "";
    /*left side of arrow pointing down*/
    border-bottom: 1px solid hsl( var(--clr-accent));
    /*right side of arrow poinding down*/
    border-right: 1px solid hsl( var(--clr-accent));
    height: 0.35em;
    margin-top: .5rem;
    margin-left: .6rem;
    margin-right: auto;
    width: 0.35em;
    transform: rotate(45deg);
  }

/*controls the color of the button outline when focused and clicked on*/
/*controls the background of the menu buttons color and background when hovered on */
  .wmt-nav button:hover,
  .wmt-nav button:focus,
  .wmt-nav button[aria-expanded=true] {
    position: relative;
    text-decoration: underline;
    color: hsl( var(--clr-accent));
    outline: 4px ridge hsl( var(--clr-accent) / .8);
    border-radius: .2rem;
  }

  /*controls what color the arrow will be when hovered*/
  .wmt-nav button:focus::after,
  .wmt-nav button[aria-expanded=true]::after {
    transform: rotate(225deg);
    margin-top: .6rem;
  }

/*controls where the sub-menu opens up at*/
.wmt-nav ul {
    position: absolute;
    display: block;
    list-style-type: none;
    text-align: left;
    min-width: 14rem;
    margin-top: .5rem;
    padding: 0;
    text-transform: uppercase;
}
/* slightly transparent fallback for browsers that don't support blur */
.wmt-nav ul {
    background-color: hsl(var(--clr-dark));
    border: .1rem solid hsl(var(--clr-accent));
}
/* if backdrop support: very transparent and blurred, note that apple devices really keep that transparent background, therefore the opacity had to be really high to accomodate */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .wmt-nav ul {
    background: hsl( var(--clr-dark) / 0.9);
    backdrop-filter: blur(.8rem);
    }
}

/* controls the font awesome icons */
.wmt-nav ul li i {
    color: hsl( var(--clr-accent));
    filter: brightness(50%);
    font-size: .75rem;
    padding-right: .75rem;
}

/*controls the text of the sub-menu items*/
.wmt-nav ul a {
    font-family: var(--ff-cond);
    font-size: var(--fs-300);
    border: 0;
    border-bottom: .1rem solid hsl( var(--clr-accent));
    color: hsl( var(--clr-light));
    display: block;
    margin: 0;
    padding: .8rem;
    text-decoration: none;
}

/*controls the text of the sub-menu items when hovered and tabbed on*/
.wmt-nav ul a:hover,
.wmt-nav ul a:focus {
    background-color:hsl( var(--clr-accent));
    color: hsl( var(--clr-dark));
    margin-bottom: 0;
    text-decoration: none;
}

/*border for sub-menu links when clicked on*/
.wmt-nav ul a:focus {
    position: relative;
}
/* --------  END OF MAIN NAVIGATION MENU -------- */

/* -----------------------------------------*/
/*               GENERAL                    */
/*               LAYOUT                     */
/* -----------------------------------------*/

aside {
    display: grid;
    position: relative;
    grid-area: aside;
    grid-row: 1 / 2;
    grid-column: 8 / 11;
    justify-content: center;
    width: fit-content;
    max-width: 3653px;
    height: 100%;
    margin: 2rem 0 0 0;
    z-index: 1001;
}
/* Inserting this collapsed row between two flex items will make 
   the flex item that comes after it break to a new row 
   from https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */
.break {
    /*main, about page*/
    flex-basis: 100%;
    height: 0;
}

.anywhere {
    overflow-wrap: anywhere;
}

.break-word {
    overflow-wrap: break-word;
}

.normal {
    overflow-wrap: normal;
}

.container,
/*about, main page*/
.aside-container {
    /*core, newbie page*/
    padding-inline: 0;
    margin-inline: auto;
    max-width: 98vw;
    min-height: 100vh;
    display: grid;
    grid-template: 6rem 5rem 1fr 5rem / repeat(12, 1fr);
}

.flex {
    /*about page, though main page does have inline styling of display flex for 1 section*/
    display: flex;
    gap: var(--gap, 1rem);
    flex-flow: row wrap;
}

.grid {
    display: grid;
    gap: var(--gap, 1rem);
}

.flexnow-gridlater {
    /*about page, though main page does have inline styling of display flex for 1 section*/
    display: flex;
    gap: var(--gap, 1rem);
    flex-flow: row wrap;
}

.columns {
    background-color:hsl( var(--clr-light) / 0.1);
    border: .1rem solid hsl( var(--clr-accent));
    width: fit-content;
}

.columns div {
    width: 18.75rem;
    margin: .5rem;
}

.fieldset {
    /*about, core, main page*/
    flex: 1 1 6.25rem;
    margin: 1rem .4rem 1rem .4rem;
    padding: 1rem;
    min-width: 35ch;
    border: .1rem solid hsl( var(--clr-accent));
    border-radius: .2rem;
}

.fieldset p {
    /*about, main page*/
    font-family: var(--ff-sans-cond);
    font-size: .9rem;
    margin-top: 1rem;
    padding-left: .35rem;
}

.flow > *:where(:not(:first-child)) {
    margin-top: var(--flow-space, 1rem);
}

footer {
    grid-area: footer;
    grid-row: 4 / 5;
    grid-column: 1 / 13;
    position: relative;
    margin-top: auto;
    height: 5rem; /*this 5rem matches the .container class grid setup */
}

main {
    /*every page*/
    position: relative;
    grid-area: main;
    grid-row: 3 / 4;
    grid-column: 2 / 12;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    max-width: 1700px;
    height: 100%;
    margin: 0;
    border-radius: .3rem;
    box-shadow: inset 0 0 2em rgba(000, 000, 000, 0.6);
    padding: 2rem 1.5rem 1rem 1.5rem;
}

.other {
    /*class name given to main*/
    /*rolm page*/
    width: 100%;
    box-shadow: none;
    padding: 0;
}

.inside-main {
    /*core page*/
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    max-width: 1700px;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.left {
    float: left;
    padding: .5rem;
    margin-right: 1.5rem;
}

.none {
    /*inline styling of none for navigation*/
    display: none;
}

#skip-to-content-link {
    /*goes on every page, invisible at the top*/
    position: fixed;
    z-index: 99999;
    top: -999px;
    left: -99999px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 8px;
    color: #fff;
    transition: top 250ms ease-in-out;
}

#skip-to-content-link:focus {
    /*goes on every page, invisible at the top*/
    top: 10px;
    left: 10px;
    transition: top 250ms ease-in-out;
}

.sr-only { /*this sr-only is listed on kpowells dot-indicator section*/
    /*navigation*/
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* added line */
    border: 0;
}

.updated {
    /*this is a div at the footer area to state when the page was last updated*/
    position: absolute;
    left: 5%;
    bottom: 1.5rem;
    font-size: .5rem;
    font-family: var(--ff-serif);
}
/* ----------- END OF LAYOUT ----------- */

/* ---------------------------------------- */
/*                SPANS                     */
/* ---------------------------------------- */

.span-main {
    /*about, main page*/
    font-family: var(--ff-serif);
    color: hsl( var(--clr-accent));
    font-size: var(--fs-200);
    font-weight: lighter;
}

caption span {
    /*rolm page*/
    margin-right: 2rem;
    margin-bottom: .5rem;
}

.caption {
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
    color: hsl( var(--clr-accent) / .7 );
    font-weight: lighter;
    padding-top: .3rem;
    padding-bottom: 0;
    width: 100%;
}

.rating {
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
    color:hsl( var(--clr-accent) / .7 );
    font-weight: lighter;
    line-height: 2rem;
    padding-bottom: 0;
    padding-left: .6rem;
    width: 100%;
}

.no-recruiter {
    /*guild page, newbie page*/
    color: rgb(3, 185, 3);
    text-transform: none;
    font-size: 1rem;
    font-family: var(--ff-serif);
    border: .1rem dashed hsl(194 100% 47%);
    padding: .75rem;
}

.recruiter {
    /*guild page*/
    color: rgb(255, 78, 78);
    text-transform: none;
    font-size: 1rem;
    font-family: var(--ff-serif);
    border: .1rem dashed hsl(194 100% 47%);
    padding: .75rem;
}

/*SPAN COLORS*/
    .accent {
        /*rolm page*/
        color: hsl( var(--clr-accent));
        text-transform: uppercase;
        font-family: var(--ff-serif);
        font-size: 1rem;
        font-weight: lighter;
    }

    .edged {
        color: rgb(7, 130, 151);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }
    
    .ice {
        color: rgb(37, 58, 248);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .blue {
        /*core, newbie, slime, skillquest page*/
        color: rgb(37, 248, 248);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .blueup {
        /*core, newbie, slime, skillquest page*/
        color: rgb(37, 248, 248);
        font-size: 1rem;
        font-family: var(--ff-serif);
        text-transform: uppercase;
    }

    .blue2 {
        /*chaos, dungeons, raw-data page*/
        color: hsl( var(--clr-accent));
        text-transform: none;
        font-size: 1rem;
    }

    .blue2-serif {
        /*area page*/
        color: hsl( var(--clr-accent));
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
        font-size: 1rem;
    }

    .first-blue {
        /*elemental page*/
        color: hsl( var(--clr-accent));
        text-transform: none;
        font-size: 1rem;
        min-width: 4rem;
        padding-right: .5rem;
        padding-left: 0;
    }

    .blueviolet {
        color: rgb(138, 43, 226);
        font-size: 1rem;
        font-family: var(--ff-serif);
        text-transform: none;
    }

    .gold {
        color: rgb(231, 189, 66);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }
    
    .indigo {
        color: rgb(73, 73, 243);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }   

    .green,
    .acid {
        /*core, newbie, skillquest page*/
        color: rgb(3, 185, 3);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .poison {
        color: rgb(14, 121, 14);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .radiation {
        color: rgb(82, 170, 177);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .blunt {
        color: rgb(255, 255, 255);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .greenup {
        /*core, newbie, skillquest page*/
        color: rgb(3, 185, 3);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
        text-transform: uppercase;
        filter: brightness(150%);
    }

    .greenuplight {
        /*core, newbie, skillquest page*/
        color: rgb(146, 247, 146);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
        text-transform: uppercase;
    }

    .orange {
        /*dungeons*/
        color: orange;
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .pink {
        /*skills page*/
        color: rgb(255, 33, 144);
        font-size: 1rem;
        text-transform: none;
        font-family: var(--ff-serif);
    }

    .pinkup {
        /*skills page*/
        color: rgb(255, 33, 144);
        font-size: 1rem;
        text-transform: uppercase;
        font-family: var(--ff-serif);
    }

    .purple,
    .energy {
        /*core page*/
        color: rgb(206, 1, 206);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .mind {
        color: rgb(138, 29, 138);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .red,
    .fire {
        /*core, newbie page*/
        color: rgb(255, 78, 78);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .redup {
        /*core, newbie page*/
        color: rgb(255, 78, 78);
        text-transform: uppercase;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .right {
        /*skillquests page*/
        font-size: inherit;
        font-family: inherit;
        color: inherit;
    }

    .yellow,
    .electricity {
        /*core, newbie, skillquest page*/
        color: rgb(243, 243, 54);
        text-transform: none;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .yellowup {
        /*core, newbie, skillquest page*/
        color: rgb(243, 243, 54);
        text-transform: uppercase;
        font-size: 1rem;
        font-family: var(--ff-serif);
    }

    .white {
        /*slime page*/
        color: white;
        font-size: 1rem;
        float: right;
        padding-right: .5rem;
        margin-left: -2rem;
    }

    .white2 {
        /*death taco page*/
        color: white;
        font-size: .8rem;
        font-family: var(--ff-sans-cond);
    }

/*END OF SPAN COLORS*/

.dir {
    /*this span indicates a direction image from font awesome*/
    /*core, fantasy, newbie page*/
    padding-right: .5rem;
}

.dir-return {
    /*this span indicates a direction image from font awesome*/
    /*core, fantasy, newbie page*/
    padding-right: .5rem;
}

.dir-return i {
    /*this span indicates a direction image from font awesome*/
    /*core, fantasy, newbie page*/
    transform: scaleX(-1);
}

.info {
    /*newbie (adventurer-info-spells)*/
    color: hsl( var(--clr-accent));
    text-transform: uppercase;
    font-size: var(--fs-200);
    font-weight: lighter;
}

.full-text-table {
    /*this is for spans to appear and disappear based on width of table*/
    /*newbie page (adventurer-info-spells)*/
    display: inline-block;
}

.short-text-table {
    /*this is for spans to appear and disappear based on width of table*/
    /*newbie page (adventurer-info-spells)*/
    display: none;
}
/* ------------ END OF SPANS -------------- */

/* -----------------------------------------*/
/*               TABLES                     */
/* -----------------------------------------*/

table {
    /*core, newbie, rolm page*/
    width: 100%;
    margin-right: auto;
    border-top: none;
    border-right: .1rem solid hsl(194 100% 47%);
    border-bottom: .1rem solid hsl(194 100% 47%);
    border-left: .1rem solid hsl(194 100% 47%);
    margin: 0 1rem 1rem 0;
    font-size: var(--fs-200);
}

.table-no-padding { 
    /*about, core, newbie page*/
    position: relative;
    border-collapse: collapse; 
    border-spacing: 0; 
    border: none;
    width: 100%;
}

caption {
    /*core, newbie, rolm page*/
    padding: 0 5rem .5rem 0;
    text-align: left;
    font-family: var(--ff-serif);
    font-size: var(--fs-400);
    font-weight: 900;
    color: hsl(194 100% 47%);
    text-shadow: 1px 1px 2px hsl(var(--clr-dark));
}
/* see also spans for caption span */

.table-no-padding caption {
    /*about, newbie page*/
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
    color:hsl( var(--clr-accent) / .7 );
    font-weight: lighter;
    padding-top: .3rem;
    padding-bottom: 0;
    width: 100%;
}

th {
    /*core, newbie, rolm page*/
    font-family: var(--ff-serif);
    font-size: var(--fs-200);
    background-color: hsl( var(--clr-dark));
    color: hsl(var(--clr-accent));
    text-align: left;
    text-transform: uppercase;
    border-top: .2rem solid hsl(var(--clr-accent));
    border-bottom: .2rem solid hsl(var(--clr-accent));
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.table-no-padding th:first-child {
    padding-left: .3rem;
    padding-right: .3rem;
}

.need-padding-right {
    padding-right: 1.5rem;
}

.areas th .full-text,
.areas th .short-text {
    font-size: .85rem;
    text-align: center;
}

.bags tr td details summary div h3 {
    /*bags page*/
    margin-right: .3rem;
}

.areas tr td details summary div,
.dungeons tr td details summary div {
    /*dungeons page*/
    margin-right: .5rem;
}

.sortable th {
    cursor: pointer;
}

.not-sortable th {
    cursor: inherit;
}

.even-rows tr {
    /*newbie page*/
    border-bottom: .1rem solid hsl( var(--clr-dark) /.2);
}

.even-rows tr:nth-child(even) {
    background-color: hsl( var(--clr-dark) /.2);
}

.even-rows-light tr,
.even-rows-light .dt-div {
    /*this is specifically for the wrapper table with hidden rows*/
    border-bottom: .1rem solid hsl( var(--clr-light) / .05);
}

.even-rows-light tr:nth-child(odd),
.even-rows-light .dt-div:nth-child(odd) {
    /*this is specifically for the wrapper table with hidden rows*/
    background-color: hsl( var(--clr-light) /.05);
    padding-right: .3rem;
}

.even-columns-light tr td:first-child,
.even-columns-light tr td:nth-child(3),
.even-columns-light tr td:nth-child(5) {
    color:hsl( var(--clr-accent) / .9 );
}

.no-even-rows-light .dt-div,
.no-even-rows-light tr:nth-child(odd),
.no-even-rows-light .dt-div:nth-child(odd) {
    background-color: transparent;
    border-bottom: none;
}

td {
    /*core, newbie, rolm page*/
    padding: .5rem 1rem .5rem 1rem;
    vertical-align: baseline;
}

.table-no-padding td {
    /*about, bags, newbie, skills page*/
    vertical-align: middle;
    padding: 0 0 0 .09rem;
    width: minmax (fit-content, 20%);
}

.baseline td {
    vertical-align: baseline;
}

.squish details summary {
    /*eternals page*/
    margin-bottom: 0;
}

.squish details[open] summary {
    /*eternals page*/
    margin-bottom: .5rem;
}

.first {
    /*about, newbie page*/
    min-width: 4rem;
    padding-right: .5rem;
    padding-left: 0;
}

/* this makes the second td that is after a summary to make the text align properly.*/
/*lights page*/
.second {
    display: inline-block;
}

.second-pad {
    padding-right: .5rem;
}

.ten {
    width: 10%;
}

.fifteen {
    width: 15%;
}

.twenty {
    width: 20%;
}

.thirty {
    width: 30%;
}

.forty {
    width: 40%;
}

.fifty {
    width: 50%;
}

.sixty {
    width: 60%;
}

.eighty {
    width: 80%;
}

table p {
    /*core, rolm page*/
    width: minmax (30ch,65ch);
}

.two {
    /*core page*/
    width: 6rem;
}

.minmax300700 {
    /*newbie page*/
    width: minmax (300px, 700px);
}

.areas tr .map-wmt-roomcount,
.areas tr .areaclasslow,
.areas tr .areaclasshigh,
.dungeons tr .areaclasslow,
.dungeons tr .areaclasshigh {
    /*dungeons page*/
    vertical-align: baseline;
    padding-top: .5rem;
}

.map-available,
.areas tr .map-wmt-roomcount {
    text-align: left;
}

.areas td .map-wmt-roomcount {
    display: block;
}

.marbles th:first-child,
.marbles td:first-child {
    width: fit-content;
    text-align: center;
}
/*https://mariusmateoc.com/blog/automatic-serial-number-row-in-html-table/*/
.css-serial {
    counter-reset: serial-number;  /* Set the serial number counter to 0 */
}
  
.css-serial td:first-child:before {
    counter-increment: serial-number;  /* Increment the serial number counter */
    content: counter(serial-number);  /* Display the counter */
}

.books tr td:first-child {
    width: 70%;
}

.table-puppy td:first-child {
    padding-top: .0;
}

.table-puppy td:nth-child(2) {
    padding-bottom: .0;
}

.table-puppy td:nth-child(2) img {
    margin-left: auto;
    margin-right: auto;
}

.table-puppy .faclose[open] summary .puppy-details {
    display: none;
}

/* -------- END OF TABLES ----------------------- */

/* ---------------------------------------------- */
/*               HOME (MAIN) PAGE                 */
/* ---------------------------------------------- */

.summary p {
    /*main page*/
    font-size: var(--fs-300);
}

.ascii-image-gif {
    /*main page*/
    float: right;
    height: 200px;
    width: 200px;
    margin-right: 0;
    margin-left: .5rem;
    margin-bottom: .7rem;
    color: black;
    box-shadow: 0px 0px 15px .5px currentcolor;
}

.main-mud-help {/*this is the div with the help links to learn more about muds*/
    /*main page*/
    margin: 2rem .5rem .5rem .5rem;
    width: 90%;
    color: hsl( var(--clr-light));
    box-shadow: 0px 0px 15px .5px rgba(0, 0, 0, .6);
    padding: 1.3rem;
    background:rgba(0, 0, 0, .6);
    border-radius: .5rem;
    line-height: 1;
}

.main-mud-help h2 {
    /*main page*/
    font-family: var(--ff-serif);
    font-size: var(--fs-400);
    font-weight: bold;
    color: hsl( var(--clr-accent));
    letter-spacing: 3px;
    border: none;
    background: transparent;
    margin: 0;
}
.main-mud-help p {
    /*main page*/
    line-height: 1.5;
    width: 95%;
}

.main-mud-help-jpg {/*this is the jpg of the website snippet link*/
    /*main page*/
    margin-top: 1rem;
    width: auto;
    height: 7.3rem;
    opacity: 0.9;
    border-radius: 1rem;
    overflow: hidden;
}

.community-events {
    display: block;
}

.community-events p {
    max-width: 125ch;
}

/* ---------------------------------------------- */
/*                 ABOUT PAGE                     */
/* ---------------------------------------------- */

/*refer to table section for this code as it's commented out to use here*/
#him .table-no-padding,
#her .table-no-padding {
    max-width: 400px;
}

/* ---------------------------------------------- */
/*                 AREA PAGES                     */
/* ---------------------------------------------- */

.area-map {
    margin: 1rem;
}

.area-map h4:first-of-type {
    /*area page*/
    text-align: center;
}

.area-map img {
    /*area page*/
    height: 150px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.areas th {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.areas-th {
    width: 8%; 
    padding-right: 1rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
    align-items: center;
}

.areas th:first-child {
    padding-left: .5rem;
}

.areas td {
    padding-top: .3rem;
    padding-left: .3rem;
    border-bottom: .1rem solid hsl( var(--clr-highlight) / .3 );
}

.area-bkg {
    display: flex;
    padding: .5rem;
    margin: -.2rem 0 0 0;
    background-image: linear-gradient(to bottom right,
    rgba(11,13,23,.25),
    rgba(0,184, 241,.15),
    rgba(11,13,23,.25));
    border-radius: .2rem;
}

.area-dark {
    display: flex;
    padding: .5rem;
    margin: -.2rem 0 0 0;
    background-color: hsl( var(--clr-dark));
    border-radius: .2rem;
}

.area-map {
    padding: 1rem;
    width: fit-content;
    margin: 0 1rem;
    font-size: var(--fs-200);
    background-color: hsl(var(--clr-dark) / .5);
    border-radius: .3rem; 
}

summary h3,
summary h4,
summary h5,
summary h6 {
    /*missions, newbieland page*/
    border-bottom: .1rem solid hsl( var(--clr-accent));
    margin-bottom: .1rem;
    font-size: 1rem;
    margin-top: 0;
    line-height: 1;
    margin-right: .5rem;
}

.normal {
    /*eternals page*/
    border-bottom: none;
    color: hsl( var(--clr-light));
    padding: .3rem 0;
    text-transform: none;
}

summary .normal:hover,
summary .normal:focus {
    /*eternals page*/
    color: hsl( var(--clr-dark));
}

details[open] summary .normal {
    /*eternals page*/
    color: hsl( var(--clr-dark));
    display: inline-block;
}

.area-info {
    padding: 1rem;
    width: 100%;
    max-width: 45ch;
    margin: 0 1rem;
    font-size: var(--fs-200);
    background-color: hsl(var(--clr-dark) / .5);
    border-radius: .3rem;
}

.long-info {
    padding: 1rem;
    width: 100%;
    max-width: 80ch;
    margin: 0 1rem;
    font-size: var(--fs-200);
    background-color: hsl(var(--clr-dark) / .5);
    border-radius: .3rem;
}

.long-info li {
    line-height: 1.7rem;
}

.areaclass {
    /*dungeons page*/
    font-size: .9rem;
}

.areaclasslow,
.areaclasshigh {
    /*dungeons page*/
    text-align: left;
    width: 10%;
}

.cost {
    text-align: left;
}

.areaclassp {
    display: none;
    vertical-align: top;
}

.details-area h3,
.details-area h4,
.details-area h5,
.details-area h6 {
    display: inline-block;
    padding-left: .5rem;
    color:hsl( var(--clr-light));
}

.details-area .directions,
.details-area .directions code {
    font-size: .9rem;
}

.details-area summary .directions,
.details-area summary .directions code {
    cursor: pointer;
}

.areas .details-area .directions,
.areas .details-area span,
.areas .details-area .directions code,
.dungeons .details-area .directions,
.dungeons .details-area span,
.dungeons .details-area .directions code {
    /*dungeons page directions*/
    font-size: .8rem;
}

.details-area div:not(:first-child) {
    cursor: default;
}

.details-area[open] h3,
.details-area[open] h4,
.details-area[open] h5,
.details-area[open] h6,
.details-area h3:hover,
.details-area h4:hover,
.details-area h5:hover,
.details-area h6:hover {
    filter: brightness(200%);
}

.details-area[open] h3,
.details-area[open] h4,
.details-area[open] h5,
.details-area[open] h6 {
    padding-bottom: 1rem;
    border-bottom: none;
}

.details-area[open] .bsummary,
.details-area[open] .dirsmall {
    display: none;
}

.detailsbtn[open] {
    position: absolute;
    z-index: 2;
    background-color: hsl( var(--clr-dark));
    min-width: 300px;
    max-width: 100vw;
    margin-top: -1rem;
    margin-left: 1rem;
    border-radius: .2rem;
}

.details-area[open] {
    position: absolute;
    z-index: 2;
    background-color: hsl( var(--clr-dark));
    width: 100%;
    margin-top: -1rem;
    margin-left: 1rem;
    border-radius: .2rem;
}

.details-area[open] summary {
    padding-right: 1rem;
    outline: .1rem solid hsl( var(--clr-light));
    background-color: hsl( var(--clr-accent) / .5);
    filter: brightness(100%);
}

.detailsbtn[open] summary,
.detailsbtn[open] div,
.details-area[open] .area-bkg,
.details-area[open] .area-dark {
    outline: .1rem solid hsl( var(--clr-light))
}

.detailsbtn[open] div div,
.detailsbtn[open] div dt,
.detailsbtn[open] div dd {
    outline: none;
    background-image: none;
    padding: 0 0 0 .25rem;
}

.details-area summary:hover,
.details-area summary:focus {
    background-color: hsl( var(--clr-accent) / .5);
    filter: brightness(100%);
}

details.disabled summary {
    /*code obtained from https://codepen.io/joelnagy/pen/MWKNGGp*/
    pointer-events: none; /* prevents click events */
    list-style: none;
    user-select: text;
}

.details-inside-details {
    all: none;
}

/*
#newbieareas .jump-to-buttons {
    display: none;
}*/

.mobs summary,
.items summary {
    background-color: hsl( var(--clr-dark));
    padding: .2rem .5rem .2rem .5rem;
}

.mobs div,
.items div {
    background-color: hsl( var(--clr-dark));
    padding: .3rem 1rem .5rem .5rem;
    margin-bottom: 1rem;
    border-radius: .3rem;
}

.mobsanditems summary:hover {
    background-color: hsl( var(--clr-dark));
    filter: brightness(300%);
}

.slime {
    /*slime page*/
    position: relative;
    font-size: .5rem; 
    color: hsl( var(--clr-light));
    background-color: black;
    padding-left: 1rem; 
    padding-right: 1rem; 
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    border: .1rem solid green;
}

.slime-table-div {
    position: relative;
    margin-right: auto;
}

.slime span {
    font-size: .5rem;
    font-family: inherit;
}

/* ---------------------------------------------- */
/*     CORE GUILDS and NEWBIE PAGES LAYOUT         */
/* ---------------------------------------------- */

.adventure-powers {
    /*newbie page*/
    border-bottom: .05rem solid hsl( var(--clr-accent));
}

.adventure-powers .first {
    /*newbie page*/
    min-width: 8.5rem;
}

.adventure-powers caption,
.adventure-powers td {
    /*newbie page*/
    padding: .3rem 0;
    border-bottom: .02rem solid hsl( var(--clr-accent) / .3);
}

.basic-guild-info {
    width: 100%;
    overflow-wrap: normal;
}

.font-small {
    /*newbie page*/
    font-size: var(--fs-300);
}

.guild-object {
    padding-left: 2rem; 
    max-width: 75ch;
}
.indent {
    /*newbie page*/
    position: relative;
    background-color: inherit;
    margin-top: -1rem;
}

.indent li {
    /*newbie page*/
    background-image: transparent;
    margin: 0 2rem;
    font-family: var(--ff-sans-cond);
    font-size: inherit;
    padding-bottom: .5rem;
}

/* ---------------------------------------------- */
/*                 GUILD PAGES                    */
/* ---------------------------------------------- */
.psicorps-skill-calculator {
    font-size: .75rem;
    margin-left: 1rem;
}

.psicorps-skill-calculator p {
    margin-top: -.5rem;
    margin-bottom: 1rem;
    color: rgb(243, 243, 54);
    text-transform: none;
    font-size: .9rem;
    font-family: var(--ff-serif);
}

.psicorps-skill-calculator form input {
    background-color: hsl( var(--clr-dark));
    color: hsl( var(--clr-light));
    border-radius: .3rem;
}

/* ---------------------------------------------- */
/*                 QUEST PAGES                    */
/* ---------------------------------------------- */
.quests td {
    padding-top: .5rem;
}

.hm-ranks {
    max-width: 500px;
}

.hm-first-th {
    width: 50%;
}

/* ---------------------------------------------- */
/*                DUNGEON SCALER                  */
/* ---------------------------------------------- */

.dungeon-graph .scaleroverview {
    margin-left: 0;
}

.scaleroverview-container {
    width: 1032px;
    height: 556px;
    float: right;
    margin-left: -4rem;
    margin-bottom: -2rem;
    transform: scale(0.9) translate(5%, -4%);
}

.shorten {
    /*h2 on dungeons page that runs into scaler img*/
    width: 35%;
}

.scalercolors {
    color: rgb(48, 47, 47);
    max-width: 965px;
}

.scalercolors td {
    font-size: .7rem;
}

.scalercolors caption {
    text-align: center;
    margin-left: 2.5rem;
}

.scaleroverview {
    width: fit-content;
    margin-top: -.75rem;
    margin-left: 1rem;
    color: rgb(48, 47, 47);
}

.scaleroverview-main tr:nth-child(2) td,
.scaleroverview-main tr:last-child {
    color: hsl( var(--clr-light));
}

.scaleroverview td {
    border-spacing: 0;
    width: 2rem;
    padding: 0;
}

.scaleroverview .dungeon-name {
    text-align: left;
    width: 6.5rem;
    font-size: .8rem;
    line-height: 1;
    vertical-align: center;
    color: hsl( var(--clr-light));
}

.scale {
    width: fit-content;
}

.scale caption {
    margin-left: 0;
    font-size: .6rem;
    text-align: left;
}

.scale td:first-child {
    width: fit-content;
}

.number {
    text-align: center;
    font-size: .7rem;
}

.non-number {
    text-align: center;
    font-size: .7rem;
}

.tenk {
    background-color: rgb(113, 212, 113);
    color: rgb(0,0,0);
    text-align: center;
}

.tenktofiftyk {
    background-image: linear-gradient(to right,
    rgb(113, 212, 113),
    rgb(56, 145, 56));
    color: rgb(0,0,0);
}

.tenktohundredk {
    background-image: linear-gradient(to right,
    rgb(113, 212, 113),
    rgb(85, 167, 243));
    color: rgb(0,0,0);
}

.fiftyk {
    background-color: rgb(56, 145, 56);
    color: rgb(0,0,0);
    text-align: center;
}

.hundredk {
    background-color: rgb(85, 167, 243);
    color: rgb(0,0,0);
    text-align: center;
}

.hundredktotwohundredm {
    background-image: linear-gradient(to right,
    rgb(85, 167, 243),
    rgb(247, 10, 10));
    color: rgb(0,0,0);
}

.onem {
    background-color: rgb(8, 103, 192);
    color: rgb(0,0,0);
    text-align: center;
}

.onemtofivem {
    background-image: linear-gradient(to right,
    rgb(8, 103, 192),
    rgb(155, 87, 172));
    color: rgb(0,0,0);
}

.fivem {
    background-color: rgb(155, 87, 172);
    color: rgb(0,0,0);
    text-align: center;
}

.fivemtotwentyfivem {
    background-image: linear-gradient(to right,
    rgb(155, 87, 172),
    rgb(240, 183, 77));
    color: rgb(0,0,0);
}

.tenm {
    background-color: rgb(118, 17, 143);
    color: rgb(0,0,0);
    text-align: center;
}

.tenmtohundredm {
    background-image: linear-gradient(to right,
    rgb(118, 17, 143),
    rgb(245, 114, 114));
    color: rgb(0,0,0);
}

.twentyfivem {
    background-color: rgb(240, 183, 77);
    color: rgb(0,0,0);
    text-align: center;
}

.fiftym {
    background-color: rgb(211, 137, 0);
    color: rgb(0,0,0);
    text-align: center;
}

.hundredm {
    background-color: rgb(245, 114, 114);
    color: rgb(0,0,0);
    text-align: center;
}

.twohundredm {
    background-color: rgb(247, 10, 10);
    color: rgb(0,0,0);
    text-align: center;
}

.fivehundredm {
    background-color: rgb(128, 21, 21);
    color: rgb(0,0,0);
    text-align: center;
}

.twob {
    background-color: rgb(0, 0, 0);
    color: rgb(231, 112, 90);
    text-align: center;
}

.area-overview {
    float: left;
    max-width: 75ch;
    margin-left: .3rem;
}

.area-details p {
    max-width: 75ch;
    margin-top: 0;
}

.table-raw-data-dungeon td:first-child {
    width: 15%;
    padding-left: .5rem;
    padding-right: .3rem;
}

.table-raw-data-dungeon th:nth-child(2),
.table-raw-data-dungeon td:nth-child(2) {
    width: 30%;
    text-align: left;
    color: rgb(37, 248, 248);
}

.table-raw-data-dungeon th:nth-child(4),
.table-raw-data-dungeon td:nth-child(4) {
    text-align: left;
    color: rgb(37, 248, 248);
}

.dungeon-half-page {
    width: 48%;
    max-width: 440px;
    min-width: 250px;
}

.transmuting-levels td:nth-child(2) {
    color: rgb(255, 124, 222);
}

/* ---------------------------------------------- */
/*                MEDIA QUERIES                   */
/* ---------------------------------------------- */
@media (min-width: 3026px) {
    aside {
        grid-column: 8 / 5;
    }
}

@media (max-width: 2078px) {
    .shorten {
        /*h2 on dungeons page that runs into scaler img*/
        width: 35%;
    }
}

@media (max-width: 1913px) {
    .shorten {
        /*h2 on dungeons page that runs into scaler img*/
        width: 25%;
    }
}

@media (max-width: 1705px) {
    .scaleroverview-container {
        margin-left: -22rem;
        margin-bottom: -12rem;
        transform: scale(0.6) translate(32%, -30%);
    }
    .shorten {
        /*h2 on dungeons page that runs into scaler img*/
        width: 35%;
    }
}

@media (min-width: 1700px) {
    .main-summary-p {
        margin-bottom: 2rem;
    }
    .main-mud-help {
        width: 65%;
    }
    .photo-parent {
        margin-right: 30rem;
    }
}

@media (max-width: 1649px) {
    .photo-parent {
        margin-right: 10rem;
    }
}

@media (max-width: 1612px) {
    .shorten {
        /*h2 on dungeons page that runs into scaler img*/
        width: 40%;
    }
}

@media (max-width: 1508px) {
    .photo-parent {
        margin-right: 5rem;
    }
    .flowchart-container {
        float: none;
        border-bottom: .1rem solid hsl( var(--clr-accent));
    }
    .create-column {
        height: 675rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media (max-width: 1464px) {
    .scaleroverview-container {
        margin-left: -28rem;
        transform: scale(0.5) translate(47%, -45%);
    }
    .qinfo-steps div {
        margin-right: 5rem;
    }
}

@media (max-width: 1428px) {
    /* Inserting this collapsed row between two flex items will make 
   the flex item that comes after it break to a new row 
   from https://tobiasahlin.com/blog/flexbox-break-to-new-row/ */
   .break-1428 {
        /*quest page*/
        flex-basis: 100%;
        height: 0;
    }
}

@media (max-width: 1358px) {
    .shorten {
        /*h2 on dungeons page that runs into scaler img*/
        width: 100%;
    }
}

@media (max-width: 1269px) {
    .scaleroverview-container {
        margin-bottom: -14rem;
    }
}

@media (max-width: 1212px) {
    .eternal-img {
        display: none;
    }
}

@media (min-width: 1200px) {
    header{
        padding: .5rem 0 0 2.5rem;
    }
    :is(h4, h5, h6, p) {
        font-weight: 500;
    }
    h3,
    .h3-duplicate {
        font-size: var(--fs-400);
    }
    span,
    .span-main {
        font-size: var(--fs-400);
    }
    :is(li, dt) {
        font-size: var(--fs-300);
    }
    :is(dd) {
        font-size: var(--fs-300);
    }
    a.midnight:link {
        font-size: 1rem;
    }
}

@media (max-width: 1200px) {
    header {
        padding: .5rem 0 0 2.5rem;
    }
    .scaleroverview-container {
        margin-left: -33rem;
        margin-bottom: -17rem;
        transform: scale(0.45) translate(60%, -57%);
    }
    .create-column {
        height: 440rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
}


/* When resolution <= 1200px, hide full text and show short text*/
@media (max-width: 1188px) {
    .mid-text {
        display: inline-block;
    }
    .mid-text-2 {
        display: none;
    }
    .full-text-char {
        display: none;
    }
    .indent li {
        /*newbie page*/
        margin: 0 1rem;
    }
    .photo-parent {
        margin-right: 1rem;
    }
    .qinfo-steps div {
        margin-right: 0rem;
    }
}

@media (max-width: 1150px) {
    .create-column {
        height: 660rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media (max-width: 1100px) {
    .navhamburgerbtn:focus {
        border: 0;
    }
    .ascii-image-gif {
        height: 175px;
        width: 175px;
    }
    .main-mud-help {
        width: 95%;
    }
    .main-mud-help p {
        width: 95%;
    }
    .dropdown {
      padding-left: 1rem;
    }
}

@media (max-width: 1075px) {
    .slime-table,
    .slime-table span,
    .slime-table .span-main,
    .slime-table .caption,
    .slime-table .green,
    .slime-table .yellow,
    .slime-table #text {
        font-size: .8rem;
    }
}

@media (max-width: 1064px) {
    .scaleroverview-container {
        width: fit-content;
        float: right;
        margin-left: -37rem;
        margin-bottom: -19rem;
        transform: scale(0.4) translate(75%, -70%);
    }
    .knight-training-scaler .dt-div dt:first-child,
    .knight-training-scaler .dt-div dd:first-child {
        width: 9rem;
    }
    .knight-training-scaler .dt-div dt:nth-child(2),
    .knight-training-scaler .dt-div dd:nth-child(2) {
        width: 7rem;
    }
    .knight-training-scaler .dt-div dt:nth-child(3),
    .knight-training-scaler .dt-div dd:nth-child(3) {
        width: 22rem;
    }
}

/* When resolution <= 1200px, hide full text and show short text*/
@media (max-width: 1046px) {
    .mid-text {
        display: none;
    }
    .mid-text-2 {
        display: inline-block;
    }
    .full-text-char {
        display: none;
    }
    .area-overview p {
        max-width: 85ch;
    }
}

@media (max-width: 1005px) {
    main {
        padding-left: .3rem;
        padding-right: .3rem;
    }
}

@media (max-width: 1000px) {
    header{
        padding: .5rem 0 0 2rem;
    }
    .nav-align-right {
        right: 0;
    }
}

/* When resolution <= 1200px, hide full text and show short text*/
@media (max-width: 967px) {
    .container,
    .aside-container {
        grid-template-columns: auto;
        grid-template-rows: 3.5rem 5rem auto 5rem;
        margin-left: 2rem;
        margin-right: 3rem;
    }
    header {
        margin-left: 0;
        padding: 0;
        grid-row: 1;
    }
    aside {
        margin: 1rem 0 0 0;
        grid-column: 12 / 7;
    }
    aside .dropbtn {
        font-size: .8rem;
    }
    aside .aside-dropdown {
        right: 0;
    }
    nav {
        grid-row: 2;
        padding-top: .5rem;
    }
    .short-text {
        display: none;
    }
    .mid-text {
        display: none;
    }
    .mid-text-2 {
        display: inline-block;
        font-size: var(--fs-200);
    }
    .full-text-char {
        display: none;
    }
    .full-text {
        display: inline-block;
        font-size: var(--fs-200);
    }
    .main-logo-banner-image-homepage,
    .main-logo-banner-image {
        /*main page*/
        max-height: 75px;
    }
    main {
        grid-row: 3;
        margin-top: .15rem;
        padding-top: 1.3rem;
    }
    footer {
        grid-row: 4;
    }
}

@media (max-width: 905px) {
    .main-newbie {
        display: grid;
    }
    .flowchart-container {
        float: left;
    }
}

@media (max-width: 880px) {
    .flexnow-gridlater {
        display: grid;
        gap: var(--gap, 0rem);
    }
    .slime-table-div {
        width: 100%;
    }
    .slime-table,
    .slime-table span,
    .slime-table .span-main,
    .slime-table .caption,
    .slime-table .green,
    .slime-table .yellow,
    .slime-table #text {
        font-size: var(--fs-200);
    }
    .detailsbtn div p {
        width: 100%;
    }
}

@media (max-width: 844px) {
    .dl-scaler-table dt:nth-child(3),
    .dl-scaler-table .dt-div dd:nth-child(3) {
        width: 15rem;
    }
}

@media (max-width: 830px) {
    main {
        display: grid;
    }
    .img-transparent {
        height: 2rem;
    }
    caption {
        font-size: var(--fs-300);
        font-weight: bold;
    }
    .dropbtn {
        padding: 0 1rem;
    }
    .dl-scaler-table dt,
    .dl-scaler-table dd,
    .dl-scaler-table dt:first-child,
    .dl-scaler-table .dt-div dd:first-child {
        width: 5rem;
    }
    .dl-scaler-table dt:nth-child(2),
    .dl-scaler-table .dt-div dd:nth-child(2) {
        width: 7rem;
    }
    .knight-training-scaler .dt-div dt:first-child,
    .knight-training-scaler .dt-div dd:first-child {
        width: 9rem;
    }
    .knight-training-scaler .dt-div dt:nth-child(3),
    .knight-training-scaler .dt-div dd:nth-child(3) {
        width: 15rem;
    }
}

@media (max-width: 814px) {
    .main-mud-help {
        margin: 4.75rem .5rem .5rem .5rem;
    }
    .scaleroverview-container {
        width: 980px;
        padding-right: 1.5rem;
        float: none;
        margin-left: 0;
        margin-bottom: -11.5rem;
        transform: scale(58%) translate(-36%, -30%);
    }
}

@media (max-width: 780px) {
    .area-page-maps div {
        width: 15%; 
        align-content: center;
    }
    .area-page-maps img {
        height: 75px;
        margin-left: auto; 
        margin-right: auto;
    }
    .area-page-maps figcaption {
        font-size: .7rem;
    }
}

@media (max-width: 772px) {
    nav {
        width: 100%;
    }
    .short-text {
        display: inline-block;
        letter-spacing: .25rem;
        font-family: var(--ff-serif);
        font-size: 1.5rem;
        width: 100%;
        font-weight: bold;
        text-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }
    .mid-text-2 {
        display: none;
    }
    .full-text {
        display: none;
    }
    .wmt-nav button::after {
        content: "";
        /*left side of arrow pointing down*/
        border-bottom: none;
        /*right side of arrow poinding down*/
        border-right: none;
        height: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        width: 0.5em;
      }    
      /*controls what color the arrow will be when hovered*/
      .wmt-nav button:focus::after,
      .wmt-nav button[aria-expanded=true]::after {
        margin-top: 0;
      } 
      main {
          margin-top: 1rem;
      }
      .dt-colspan-2,
      .dl-taco-ingredient .dt-colspan-2 {
        min-width: 50ch;
    }
    .table-turns-to-block th {
        display: none;
    }
    .table-turns-to-block td {
        display: block;
    }
    #psicorps-tours .table-turns-to-block td:first-child::before {
        content: 'Tour: ';
        color:hsl( var(--clr-accent));
    }
    #psicorps-tours .table-turns-to-block td:nth-child(2)::before {
        content: 'Total Scrips: ';
        color:hsl( var(--clr-accent));
    }
    #psicorps-tours .table-turns-to-block td:nth-child(3)::before {
        content: 'Title: ';
        color:hsl( var(--clr-accent));
    }
    #psicorps-tours .table-turns-to-block td:nth-child(4)::before {
        content: 'Powers: ';
        color:hsl( var(--clr-accent));
    }
    #psicorps-tours .table-turns-to-block td:nth-child(5)::before {
        content: 'Cost: ';
        color:hsl( var(--clr-accent));
    }
    #psicorps-tours .table-turns-to-block td:nth-child(6)::before {
        content: 'Cost Increase: ';
        color:hsl( var(--clr-accent));
    }
    .even-columns-light tr td:first-child,
    .even-columns-light tr td:nth-child(3),
    .even-columns-light tr td:nth-child(5) {
        color: inherit;
    }
    .even-columns-light tr td:nth-child(6) {
        border-bottom: .1rem solid hsl( var(--clr-dark));
    }
}

@media (max-width: 752px) {
    .main-mud-help {
        margin: 2.5rem .5rem .5rem .5rem;
    }
    .img-transparent {
      height: 1.5rem;
    }
    .rolm table {
      width: 95%;
      margin-right: 0;
    }
}

@media (max-width: 740px) {
    .area-index .scaleroverview td {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        height: fit-content;
    }
    .non-scaling-dungeon dd:nth-child(2) {
        min-width: 20rem;
        max-width: 30rem;
    }
}

@media (max-width: 700px) {
    .scaleroverview-container {
        margin-left: 0;
        margin-bottom: -18rem;
        transform: scale(40%) translate(-75%, -65%);
    }
    #death-taco-drops th {
        display: none;
    }
    #death-taco-drops td {
        display: block;
        width: 100%;
        padding: .3rem;
        font-size: .9rem;
    }
    #death-taco-drops td code {
        font-size: .8rem;
    }
    .quest-map-container-left {
        float: none;
        margin-bottom: 1rem;
    }
}

@media (max-width: 688px) {
    .main-mud-help {
        width: 90%;
    }
    .create-column {
        height: fit-content;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
}

@media (max-width: 670px) {
    .dungeon-half-page {
        width: 100%;
    }
    #medals .map-container-left {
        float: none;
    }
    .knight-training-scaler .dt-div dt:first-child,
    .knight-training-scaler .dt-div dd:first-child {
        width: 8rem;
    }
    .knight-training-scaler .dt-div dt:nth-child(2),
    .knight-training-scaler .dt-div dd:nth-child(2) {
        width: 6.5rem;
    }
    .knight-training-scaler .dt-div dt:nth-child(3),
    .knight-training-scaler .dt-div dd:nth-child(3) {
        width: 12rem;
    }
    .quest-map-container-right {
        /*fantasy page*/
        float: none;
        background-color: transparent;
        width: fit-content;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
        height: minmax (81px,198px);
    }
}

@media (max-width: 664px) {
    .container {
        grid-template-columns: auto;
        grid-template-rows: 3rem 5rem auto 5rem;
        margin-left: 2rem;
        margin-right: 3rem;
    }
    aside {
        grid-column: 9 / 12;
        margin: .75rem 0 0 0;
    }
    .aside-dropdown {
        right: 0;
    }
    nav {
        margin-top: .4rem;
    }
    .aside-container nav {
        margin-top: -.2rem;
    }
    main {
        margin-top: 1.5rem;
    }
    .aside-container main {
        margin-top: .8rem;
    }
    .table-raw-data-dungeon th {
        font-size: .7rem;
    }
    .qinfo-steps div {
        float: none;
        margin-left: 0;
    }
    .dl-table dd {
        max-width: 30ch;
    }
    .info-button {
        width: 5rem;
    }
    .need-padding {
        padding-top: 1.5rem;
    }
    
}

@media (max-width: 626px) {
    .container,
    .aside-container {
        margin-right: 1.8rem;
        margin-left: 1rem;
    }
    .aside-container {
        grid-template-rows: 3.5rem 5.2rem 2rem auto 5rem;
    }
    .aside-container nav {
        grid-row: 2 / 3;
    }
    aside {
        grid-row: 3 / 4;
        grid-column: 2 / 6;
        margin-top: 0;
        width: 100%;
        z-index: 998;
    }
    .aside-dropdown {
        left: 0;
    }
    .aside-container main {
        grid-row: 4 / 5;
    }
    .aside-container footer {
        grid-row: 5 / 6;
    }
    blockquote {
        border-left: .1rem solid hsl( var(--clr-accent));
        margin-left: 0;
        padding-left: .3rem;
    }
    .dropdown {
        display: block;
        padding-top: .5rem;
        padding-left: 0;
    }
    .flowchart-container {
        float: none;
        border-bottom: .1rem solid hsl( var(--clr-accent));
    }
}

@media (max-width: 590px) {
    main {
        margin-top: 1.5rem;
    }
    .full-text-table {
        display: none;
    }
    .short-text-table {
        display: inline-block;
    }
    .scale td {
        font-size: .5rem;
    }
    .bmud {
        padding: .5rem .2rem;
        max-width: 40ch;
    }
}

@media (max-width: 580px) {
    .dl-scaler-table dt,
    .dl-scaler-table dd,
    .dl-scaler-table dt:first-child,
    .dl-scaler-table .dt-div dd:first-child {
        font-size: .8rem;
        width: 3rem;
    }
    .dl-scaler-table dt:nth-child(2),
    .dl-scaler-table .dt-div dd:nth-child(2) {
        font-size: .8rem;
        width: 6rem;
    }
    .dl-scaler-table dt:nth-child(3),
    .dl-scaler-table .dt-div dd:nth-child(3) {
        font-size: .8rem;
        max-width: fit-content;
    }
    .dl-scaler-table span,
    .dl-scaler-table .span-main {
        font-size: .8rem;
    }
    .dl-taco-type dt:first-child,
    .dl-taco-type dd:first-child,
    .dl-taco-type dt:nth-child(2),
    .dl-taco-type dd:nth-child(2) {
        max-width: 20ch;
    }
    .dl-taco-type dt:nth-child(3),
    .dl-taco-type dd:nth-child(3) {
        max-width: 30ch;
    }
    .dt-colspan-2,
    .dl-taco-ingredient .dt-colspan-2 {
        min-width: 35ch;
    }
    .knight-training-scaler {
        margin-top: .5rem;
        border-top: .1rem solid hsl(var(--clr-accent));
    }
    .knight-training-scaler .dt-div:first-child {
        display: none;
    }
    .knight-training-scaler dd {
        display: block;
    }
    .knight-training-scaler dd:first-child::before {
        content: "Challenge Arena ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .knight-training-scaler dd:nth-child(2)::before {
        content: "class ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .knight-training-scaler dd:nth-child(3)::before {
        content: "Knight/Reputation ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .knight-training-scaler .dt-div dd:first-child,
    .knight-training-scaler .dt-div dd:nth-child(2),
    .knight-training-scaler .dt-div dd:nth-child(3) {
        width: 100%;
    }
    .dl-item-table {
        margin-top: .5rem;
        border-top: .1rem solid hsl(var(--clr-accent));
    }
    .dl-item-table,
    .dl-item-table dd {
        display: block;
    }
    .dl-item-table .dt-div:first-child {
        display: none;
    }
    .dl-item-table dd:first-child::before {
        content: "Type & Qty ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .dl-item-table dd:nth-child(2)::before {
        content: "Cost ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .dl-item-table dd:nth-child(3)::before {
        content: "Item Name ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        width: 15rem;
    }
    .table-puppy th {
        display: none;
    }
    .table-puppy td {
        display: block;
    }
    .table-puppy td:first-child::before {
        content: "Name and Info";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        margin-top: .25rem;
    }
    .table-puppy td:nth-child(2)::before {
        content: "AKC Photo";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        margin-top: .25rem;
    }
}

@media (max-width: 517px) {
    #skillslist .details-area summary .accent,
    #skillslist .details-area summary .blueup,
    #skillslist .details-area summary .green,
    #skillslist .details-area summary .greenup,
    #skillslist .details-area summary .greenuplight,
    #skillslist .details-area summary .pink,
    #skillslist .details-area summary .red {
        font-size: .85rem;
    }
    .non-scaling-dungeon dd:nth-child(2) {
        min-width: 10rem;
    }
}

@media (max-width: 510px) {
    .dl-scaler-table {
        margin-top: .5rem;
        border-top: .1rem solid hsl(var(--clr-accent));
    }
    .dl-scaler-table .dt-div:first-child {
        display: none;
    }
    .dl-scaler-table dd {
        display: block;
    }
    .dl-scaler-table dd:first-child::before {
        content: "Scaler ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .dl-taco-type dd:first-child::before {
        content: "Taco Type";
        text-transform: uppercase;
        min-width: 15rem;
        max-width: 20rem;
    }
    .dl-taco-type dd:first-child {
        min-width: 10rem;
        max-width: 20rem;
    }
    .dl-taco-ingredient dd:first-child::before {
        content: "Name";
        text-transform: uppercase;
        width: 100%;
    }
    .knight-training-scaler dd:first-child::before {
        content: "Challenge Arena ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .dl-scaler-table dd:nth-child(2)::before {
        content: "Class ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .dl-taco-type dd:nth-child(2)::before {
        content: "Ingredients";
        text-transform: uppercase;
        width: 100%;
    }
    .dl-taco-type dd:nth-child(2) {
        min-width: 15rem;
        max-width: 20rem;
    }
    .dl-taco-ingredient dd:nth-child(2)::before {
        content: "Enemy Special";
        text-transform: uppercase;
    }
    .dl-scaler-table dd:nth-child(3)::before,
    .non-scaling-dungeon dd:nth-child(2)::before {
        content: "Mobs/Extra Info ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .dl-scaler-table dd:nth-child(3) {
        min-width: 22rem;
    }
    .dl-taco-type dd:nth-child(3)::before {
        content: "Taco Drops";
        text-transform: uppercase;
    }
    .non-scaling-dungeon dd:first-child,
    .non-scaling-dungeon dd:nth-child(2) {
        min-width: 20rem;
    }
    .knight-training-scaler dd:nth-child(3)::before {
        content: "Knight/Reputation ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
}

@media (max-width: 488px) {
    caption {
        /*table on newbie, rolm page*/
        padding-right: 0;
    }
    .area-map img {
        max-width: 200px;
        height: auto;
    }
    .area-map,
    .area-info,
    .long-info {
        margin-left: .1rem;
        margin-right: .1rem;
    }
    .medal-img img {
        height: 100px;
        width: auto;
    }
    .scaleroverview-container {
        margin-left: 0;
        margin-bottom: -20rem;
        transform: scale(35%) translate(-92%, -82%);
    }
    .medals h3 {
        font-size: .85rem;
        margin-right: .5rem;
    }
    .medals td:nth-child(2),
    .medals td:nth-child(3) {
        font-size: .7rem;
    }
}

@media (max-width: 485px) {
    .container {
        grid-template-rows: 2rem 5rem auto 5rem;
    }
    .aside-container {
        grid-template-rows: 2.5rem 5.1rem 2rem auto 5rem;
    }
    main,
    .aside-container main {
        padding: .5rem .2rem;
    }
    .wmt-nav ul {
        left: 0;
        min-width: 100%;
    }
    .main-logo-banner-image-homepage,
    .main-logo-banner-image {
        /*main page*/
        max-height: 60px;
    }
    h1, h2 {
        /*main, rolm page*/
        margin-top: -1.6rem;
    }
    .ascii-image-gif {
        height: 150px;
        width: 150px;
        margin-right: .5rem;
    }
    .main-mud-help {
        width: 95%;
    }
    .fieldset {
        flex: 1 1 6.25rem;
        margin: 1rem .4rem 1rem .4rem;
        padding: .5rem;
        min-width: 20ch;
    }
    .main-mud-help {
        margin: 2.5rem .5rem .5rem .5rem;
    }
    .details-area[open] {
        margin-left: -1rem;
    }
    /* this selects everything(image) that has an alt tag containing the word medal */
    /* medals */
    [alt~="medal"],
    [alt~="Medal"] {
        height: 7rem;
    }
    .area-page-maps div {
        width: 25%; 
        align-content: center;
    }
    .area-page-maps img {
        height: 75px;
        margin-left: auto; 
        margin-right: auto;
    }
    .area-page-maps figcaption {
        font-size: .6rem;
    }
}

@media (max-width: 464px) {
    .info-button {
        width: 4.5rem;
    }
    .dl-table dt {
        width: 7rem;
        margin-right: .5rem;
        display: block;
    }
    .dl-table dd {
        margin-top: -.25rem;
        padding-top: 0;
        padding-bottom: .25rem;
    }
    .make-small-later {
        font-size: .7rem;
    }
    .bkg .dl-table dt {
        display: inline-block;
        vertical-align: baseline;
    }
}


@media (max-width: 442px) {
    .adventure-powers .first {
        /*newbie page*/
        min-width: 0;
    }
    .slime {
        /*slime page*/
        font-size: .3rem; 
    }
    .slime span,
    .slime .span-main {
        font-size: .3rem;
    }
    .slime-table,
    .slime-table span,
    .slime-table .span-main,
    .slime-table .caption,
    .slime-table .green,
    .slime-table .yellow,
    .slime-table #text {
        font-size: .8rem;
    }
    .bags tr td details summary div h3 {
        /*bags page*/
        font-size: .85rem;
        padding-left: .1rem;
    }
    .scale td {
        font-size: .4rem;
    }
    .scaleroverview-container {
        margin-left: 0;
        margin-bottom: -23.5rem;
        transform: scale(25%) translate(-147%, -137%);
    }
    .non-scaling-dungeon dd:first-child,
    .non-scaling-dungeon dd:nth-child(2) {
        min-width: 16rem;
    }
    .dl-scaler-table dd:nth-child(3) {
        min-width: 18rem;
    }
    .areas-th {
        /*area page*/
        width: fit-content; 
        padding-right: 0;
    }
    .areas-th .short-text {
        font-size: .6rem;
    }
    .areas td:first-of-type {
        /*area page*/
        padding-left: .3rem;
    }
    .details-area h3,
    .details-area .h3-duplicate {
        margin-top: 0;
    }
    .details-area .directions {
        /*area page*/
        padding-left: .1rem;
    }
    .detailsbtn[open] {
        margin-left: 0;
    }
    .areaclass {
        /*area, lights page*/
        font-size: .6rem;
    }
    /*.areas th {
        display: none;
    }
    .areas tr {
        margin-top: 0;
        padding-top: 0;
    }
    .areas td {
        display: block;
        width: 100%;
        padding: .3rem;
        font-size: .9rem;
        border-bottom: none;
        padding: 0 0 0 .4rem;
    }
    .areas th code {
        font-size: .8rem;
    }
    .areas td:first-child::before {
        content: "Area Name and Directions ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
        margin-top: .5rem;
    }
    .areas td:nth-child(2)::before {
        content: "Explorers Rooms and Map ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .areas td:nth-child(3)::before {
        content: "Class (low) ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }
    .areas td:nth-child(4)::before {
        content: "Class (high) ";
        text-transform: uppercase;
        display: block;
        color: hsl( var(--clr-accent) / .7 );
        font-weight: lighter;
    }*/
}

@media (max-width: 412px) {
    .columns {
        width: 15rem;
    }
    .columns div {
        width: 14rem;
    }
}

@media (max-width: 398px) {
    .short-text-table {
        font-size: .7rem;
    }
    .photo-parent {
        margin-top: 0;
        margin-right: .25rem;
    }
    .photo img {
        height: 85px;
    }
    .slime-table,
    .slime-table span,
    .slime-table .span-main,
    .slime-table .caption,
    .slime-table .green,
    .slime-table .yellow,
    .slime-table #text {
        font-size: .6rem;
    }
    .table-no-padding td {
        font-size: .8rem;
    }
    .scale td {
        font-size: .37rem;
    }
    /*WHEN ALL AREAS CAN BE OPENED, MAKE THIS DISPLAY NONE AGAIN SO THAT DIRECTIONS ARE NOT SEEN ON SMALL SCREENS*/
    .details-area .dirsmall {
        /*display: none;*/
        width: 9rem;
    }
    /*WHEN ALL AREAS CA BE OPENED, REMOVE .details-area .dirsmall .code*/
    .details-area .dirsmall .code {
        font-size: .5rem;
    }
    .scaleroverview-container {
        height: 620px;
        margin-bottom: -26rem;
    }
    .greenup,
    .red,
    .green,
    .yellow,
    .accent,
    .blue,
    .blue2,
    .orange,
    .gold,
    .purple,
    .blueviolet,
    .pink {
        font-size: .9rem;
    }
    .dl-scaler-table dd:nth-child(3) {
        min-width: 15rem;
    }
}

@media (max-width: 385px) {
    .main-logo-banner-image-homepage,
    .main-logo-banner-image {
        /*main page*/
        max-height: 60px;
    }
    .ascii-image-gif {
        float: right;
        height: 125px;
        width: 125px;
        margin-bottom: .5rem;
    }
    #fantasy .map-container-left {
        float: none;
    }
    .rolm table {
        margin-right: 0;
    }
    .slime-table-chatline th {
        font-size: .7rem;
    }
    .table-raw-data-dungeon td {
        font-size: .7rem;
    }
    .dl-div .map-container {
        margin-left: 0;
    }
}

@media (max-width: 362px) {
    .ascii-image-gif {
        /*main page*/
        float: center;
        height: 100px;
        width: 100px;
    }
    .table-no-padding th {
        font-size: .7rem;
    }
        /* this selects everything(image) that has an alt tag containing the word medal */
    /* medals */
    [alt~="medal"],
    [alt~="Medal"] {
        height: 5rem;
    }
}

@media (max-width: 346px) {
    .container {
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .aside-container {
        grid-template-rows: 2.5rem 4.5rem 2rem auto 5rem;
        margin-left: .5rem;
        margin-right: .5rem;
    }
    .short-text {
        /*nav*/
        font-size: 1rem;
    }
    aside .dropbtn {
        width: 18rem;
    }
    main {
        margin-top: .6rem;
    }
    .detailsbtn[open],
    .details-area[open] {
        margin-left: -.85rem;
    }
    #slimetwo .detailsbtn[open] {
        margin-left: -1.8rem;
    }
}