:root{
    --holdme-width: 66svw;
    --heading-size: calc(var(--holdme-width) / 20);

    --black: hsl(26, 36%, 23%);
    --white: hsl(67, 33%, 84%);
    --white2: hsl(65, 100%, 98%);
    --red: hsl(25, 85%, 39%);
    --red2: hsl(25, 100%, 33%);
    --blue: hsl(143, 24%, 45%);
    --blue2: hsl(144, 36%, 26%);
    --shadow: hsla(42, 45%, 14%, 0.33);
    --shadow2: hsla(83, 53%, 13%, 0.15);

    --body-font: "HMFOMT", MS Gothic, sans-serif;
    --heading-font: "Funhouse";
}

#holdme{
    width: var(--holdme-width);
    min-height: max-content;
    margin: 2.5svh auto 3svh auto;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 0.5svw rgba(255,255,255,0.5);
}

.divider{
    display: block;
    max-width: 80%;
    margin: 1em auto;
    border-bottom: 0.2ch dashed;
}

.divider.first{
    width: calc(var(--holdme-width) / 2.25);
    margin: 1em 0 2em 0;
}

body{
    background-image: url("./assets/bg02.png");
        background-size: 10vmax;
        background-attachment: fixed;
    font-size: 1svw;
    font-family: var(--body-font);
    color: var(--black);
}

h1, h2, h3{
    font-family: var(--heading-font), var(--body-font);
}

h2, h3{
    width: fit-content;
    filter: drop-shadow(0.1em 0.1em var(--shadow2));
}

h2{
    font-size: 2em;
    margin-bottom: 0;
}

h3{
    font-size: 1.66em;
}

a{
    color: var(--blue2);
}

a:is(:hover, :focus){
    color: var(--red2);
}

a, a:is(:hover, :focus){
    transition: color 0.1s ease-out;
}

footer, nav{
    line-height: 3;
}

li{
    margin-bottom: 1em;
}

ul{
    list-style: square;
}

/* header!!!!!!!!!! */

header{
    height: calc(var(--holdme-width) * 0.56);
    box-sizing: border-box;
    background-image: url("./assets/top.png");
        background-color: hsl(54, 47%, 51%);
        background-size: cover;
        background-repeat: no-repeat;
    display: flex;
        align-items: flex-end;
    margin-bottom: calc(var(--heading-size) * 0.5 + 1em);
    border: 0.45ch solid hsl(77, 39%, 45%);
    outline: 0.45ch solid hsl(80, 45%, 39%);
    /* border-radius: 0.66ch; */
    box-shadow: 0 0.5svw 0 0.66ch var(--shadow2), 0 0 0 0.6ch var(--black);
}

header h1{
    font-size: var(--heading-size);
    width: 12ch;
    position: relative;
        top: calc(var(--heading-size) * 1.75);
        left: 0.5em;
    letter-spacing: 0.075ch;
    line-height: 1.4;
    opacity: 0.95;
    filter: drop-shadow(0.1em 0.1em var(--shadow));
}

/* prepare the selectors to add a stroke to */
.stroke-single,
.stroke-double {
  position: relative;
  background: transparent;
  z-index: 0;
  color:var(--red);
}
/* add a single stroke */
.stroke-single:before,
.stroke-double:before {
  content: attr(alt);
  position: absolute;
  -webkit-text-stroke: 0.17ch var(--black); 
  left: 0;
  z-index: -1;
}
/* add a double stroke */
.stroke-double:after {
  content: attr(alt);
  position: absolute;
  -webkit-text-stroke: 0.3ch var(--white2);
  left: 0;
  top: 0;
  z-index: -2;
}

/* navigation!!!!!!!!!! */

nav, table#stats{
    width: calc(var(--holdme-width) / 2);
    height: min-content;
    padding: 1ch;
    box-sizing: border-box;
    outline: 0.1ch dashed;
    background: url("./assets/bg01.png");
        background-size: 15%;
    border: 0.45ch solid hsl(53, 67%, 63%);
    outline: 0.55ch solid hsl(52, 56%, 58%);
    box-shadow: 0 0.2svw 0 0.5svw var(--shadow2), 0 0 0 0.6ch var(--black);
}

:is(nav, table#stats) a{
    text-decoration: none;
}

nav{
    z-index: 999;
    text-align: right;
    text-shadow: 0.05ch 0.05ch var(--shadow);
    padding-right: 1.25ch;
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

nav a{
    z-index: 9999;
}

nav a:is(:hover, :focus){
    transform: translateY(-0.5ch);
}

nav a, nav a:is(:hover, :focus){
    transition: transform 0.2s ease-in-out;
}

nav b{
    text-transform: uppercase;
}

nav div:not(:last-child) b{
    transform: translateX(2ch);
}

nav div{
    display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
}

nav div > div{
    width: 100%;
    justify-self: flex-end;
    justify-content: flex-end;
    margin-bottom: 0.25em;
}

nav div > div a:first-of-type{
    margin-right: 5%;
}

:is(nav a, table#stats th)::before{
    content: "";
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    height: 1.66em;
    width: 1.66em;
    display: inline-block;
    margin-right: 0.75ch;
    transform: translateY(0.33ch);
}

nav a::before{
    background-image: var(--nav-image);
}

table#stats th::before{
    background-image: var(--stats-image);
}

/* info nav links */

nav > div:nth-of-type(1) a:nth-of-type(1){
    --nav-image: url("./assets/13.png");
}

nav > div:nth-of-type(1) a:nth-of-type(2){
    --nav-image: url("./assets/28.png");
}

nav > div:nth-of-type(1) a:nth-of-type(3){
    --nav-image: url("./assets/24.png");
}

/* fanlisting nav links */

nav > div:nth-of-type(2) > a:nth-of-type(1){
    --nav-image: url("./assets/7.png");
}

nav > div:nth-of-type(2) > a:nth-of-type(2){
    --nav-image: url("./assets/4.png");
}

nav > div:nth-of-type(2) a:nth-of-type(3){
    --nav-image: url("./assets/3.png");
}

nav > div:nth-of-type(2) > div a:nth-of-type(1){
    --nav-image: url("./assets/40.png");
}

nav > div:nth-of-type(2) > div a:nth-of-type(2){
    --nav-image: url("./assets/39.png");
}

/* sitely nav links */

nav > div:nth-of-type(3) a:nth-of-type(1){
    --nav-image: url("./assets/1.png");
}

nav > div:nth-of-type(3) a:nth-of-type(2){
    --nav-image: url("./assets/2.png");
}

nav > div:nth-of-type(3) a:nth-of-type(3){
    --nav-image: url("./assets/31.png");
}

main{
    padding: 2em;
    line-height: 2;
}

main, footer{
    text-shadow: 0.075ch 0.075ch var(--shadow2);
}

footer{
    border-top: 0.2ch dashed;
    padding-top: 1em;
    font-size: 0.8em;
    text-align: right;
}

footer a{
	text-decoration:none;
}

footer span{
    display: block;
}

footer span::after{
    margin: 0 1em;
}

footer span:nth-child(1)::after{
    content: url("./assets/6.png");
}

footer span:nth-child(2)::after{
    content: url("./assets/25.png");
}

footer span:nth-child(3)::after{
    content: url("./assets/10.png");
}

table#stats{
    margin: 2em auto;
}

table#stats th{
    text-transform: uppercase;
    text-align: left;
    vertical-align: top;
    padding-left: 1ch;
}

table#stats tr:nth-of-type(1) th{
    --stats-image: url("./assets/18.png");
}

table#stats tr:nth-of-type(2) th{
    --stats-image: url("./assets/19.png");
}

table#stats tr:nth-of-type(3) th{
    --stats-image: url("./assets/21.png");
}

table#stats tr:nth-of-type(4) th{
    --stats-image: url("./assets/23.png");
}

table#members{
    width: 80%;
    margin: 1em auto;
    text-align: center;
    table-layout: fixed;
    empty-cells: show;
}

table#members:not(:last-child){
    margin-bottom: 3em;
}

table#members tr{
    padding-bottom: 1em;
}

table#members th{
    width: calc(100% / 4);
    padding-bottom: 1em;
}

table#members img{
    height: 1.66em;
    width: 1.66em;
}

table td[colspan="4"]{
    padding-top: 0.5em;
    padding-bottom: 2em;
    text-align: left;
    padding-left: 4em;
    font-size: 0.9em;
    font-style: italic;
}

@media only screen and (max-width: 600px) {
    :root{ --holdme-width: 90svw;}
    #holdme{min-height: max-content;}
}