/* 
last updated: 05/18/25
 */

:root {
--cursor: url('../pics/cursor/whale.png');
--bodybgcolor: #000000;
--bodyfontcolor: #FFFFFF;
--bodyfont: MS Gothic, monospace;
--bodybgimg: url('../pics/bg/sharkgummies.png');
--bodybgimgrepeat: none;
--bodybgsize: contain;
--bodytextalign: center;
--mainbgcolor: #000000;
--linkbgcolor: #000000;
--linkfont: 'MS Gothic', monospace;
--linkcolor: #534579;
--linkdecoration: none;
--linkhovercolor: #3A89B4;
--linksize: 15px;
--boldcolor: #534579;
--boldfont: Times New Roman, serif;
--italiccolor: #666666;
--italicfont: Georgia, serif;
--deltextcolor: #FFFFFF;
--dellinecolor: #534579;
--dellinestyle: dashed;
--delfont: Verdana, sans-serif;
--inscolor: #FFFFFF;
--inslinecolor: #534579;
--insfont: Courier New, monospace;
--hrtopcolor: #FFFFFF;
--hrtopstyle: dashed;
--hrbottomcolor: #534579;
--hrbottomstyle: solid;
--selectionbgcolor: #FFFFFF;
--selectioncolor: #534579;
--h1font: 'Critters', cursive;
--h2font: 'Water Resistant', fantasy;
--h1color: #3A89B4;
--h2color: #3A89B4;
--tooltipbgcolor: #000000;
--tooltipbordercolor: #FFFFFF;
--tooltipborderstyle: solid;
--tooltiptxtcolor: #FFFFFF;
--tooltipfont: 'Omori', cursive;
}

@font-face {
    font-family: Critters;
    src: url('../fonts/critters.woff');
  }

html, body, a, hover {
cursor: var(--cursor), auto;
}

body {
font-size: 13px;
text-align: var(--bodytextalign);
background-attachment: fixed;
background-color: var(--bodybgcolor);
background-size: var(--bodybgsize);
font-family: var(--bodyfont);
color: var(--bodyfontcolor);
background-image: var(--bodybgimg);
background-repeat: var(--bodybgimgrepeat);
}

#main {
position: absolute;
width: 1000px;
top: 10px;
left: 250px;
right: 250px;
padding: 5px;
background-color: var(--mainbgcolor);
overflow: auto;
}

a {
text-align: center;
font-family: var(--linkfont);
background-color: var(--linkbgcolor);
color: var(--linkcolor);
text-decoration: var(--linkdecoration);
font-size: var(--linksize);
}

a:hover {
font-family: var(--linkfont);
color: var(--linkhovercolor);
}

strong {
font-weight: bold;
color: var(--boldcolor);
font-family: var(--boldfont);
}

em {
color: var(--italiccolor);
font-family: var(--italicfont);
}

del {
text-decoration: line-through;
color: var(--deltextcolor);
text-decoration-style: var(--dellinestyle);
text-decoration-color: var(--dellinecolor);
font-family: var(--delfont);
}

ins {
color: var(--inscolor);
text-decoration-color: var(--inslinecolor);
font-family: var(--insfont);
}

hr {
width: 10%;
border: 0;
height: 4px;
border-top: 1px var(--hrtopcolor);
border-top-style: var(--hrtopstyle);
border-bottom: 1px var(--hrbottomcolor);
border-bottom-style: var(--hrbottomstyle);
}

::selection {
background-color: var(--selectionbgcolor);
color: var(--selectioncolor);
}

h1 {
text-shadow: 1px 0px 1px #000000;
text-transform: uppercase;
line-height: 25px;
text-align: center;
font-family: var(--h1font);
color: var(--h1color);
}

h2 {
font-size: 25px;
text-align: center;
font-family: var(--h2font);
color: var(--h2color);
}

#s-m-t-tooltip {
max-width: 300px;
z-index: 10;
margin: 24px 14px 7px 12px;
padding: 8px;
background: var(--tooltipbgcolor);
border-radius: 3px;
text-transform: uppercase;
font-size: 15px;
line-height: 16px;
border: 3px var(--tooltipborderstyle) var(--tooltipbordercolor);
font-family: var(--tooltipfont);
color: var(--tooltiptxtcolor);
}