/* basic stuff... */

body {
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    color: var(--font-main);
    font-family: Nintendo;
}

@font-face {
    font-family: OpenDyslexic;
    src: url(https://file.garden/Zwh0MLf5wyra4Rld/OpenDyslexic-Regular.otf);
    size-adjust: 85%;
}

@font-face {
    font-family: Nintendo;
    src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
    size-adjust: 130%;
}

.button {
    -webkit-box-shadow: inset 0px 0px 5px 4px var(--color-fade); 
    box-shadow: inset 0px 0px 5px 4px var(--color-fade);
    
    background-color: var(--bg-color);
    border: 2px solid var(--color-third);
    -webkit-border-radius: 0px 10px 0px 5px;
    border-radius: 0px 10px 0px 5px;
    padding: 6px;
    color: var(--font-main);
}

button:hover {
  transform: scale(1.1);
}

::-moz-selection {
  color: var(--color-third);
  background: var(--color-main);
}

::selection {
  color: var(--color-third);
  background: var(--color-main);
}

a:link {
    color: var(--color-third);
}
a:visited {
    color:var(color-third);
}


/* boxes */

#main-box {
    background-color: var(--color-main);
    width: 1130px;
    height: 720px;
    margin-inline: auto;
    border: 3px dotted var(--color-third);
}

.sub-box {
    -webkit-box-shadow: inset 0px 0px 5px 4px var(--color-fade); 
    box-shadow: inset 0px 0px 5px 4px var(--color-fade);
    
    background-color: var(--bg-color);
    border: 4px double var(--color-third);
    padding: 10px;
}
    
/* misc. codes */


#tabs {
background: var(--image-one);
font-size: 14px;
border: 4px double var(--color-third);
}

#tabs p {
color: var(-font-main);
line-height: 1.2em;
}

#tabs li {
background: var(--color-main);
border: 4px double var(--color-third);
}

#tabs li:hover, #tabs li:active {
transition: 0.5s; /* how fast/slow the transition will be */
webkit-filter: blur(1px); /* you can change the blur amount here */
filter: blur(1px);
}

#tabs ul {
background: none;
border: none;
padding-top: .4em;
padding-left: .5em;
}

.bluronl {
animation: blur 1s ease;
}

@keyframes blur {
from {
filter: blur(4px);
}
to {
filter: blur(0);
}
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
}

#glenplayer02 a {
text-decoration:none;
}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px;
cursor:pointer;
}
 
.playy, .pausee {
-webkit-background-clip: text;
-webkit-text-fill-color: #color ;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #color;
font-size: 22px;
}
 
.pausee {
display:none;
}

/* marquee */

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 60px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 15s linear infinite;
    
      &:hover {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* random classes */

#s-m-t-tooltip{
	/* basic */
	max-width: 300px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	/* style and design */
	padding:8px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    background: var(--color-third);
    border: 4px double var(--color-main);
	color: white;
}

.poloroid {
  position: relative;
}

.no-margin {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.displays {
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #1C6EA4;
    background: -moz-linear-gradient(-45deg, var(--color-secondary) 0%, var(--color-third) 100%);
    background: -webkit-linear-gradient(-45deg, var(--color-secondary) 0%, var(--color-third) 100%);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-third) 100%);
    border: dotted 2px var(--color-third);
    width: 80%;
    font-size: 16px;
}

.speech-bubble {
	position: relative;
	background: var(--color-main);
	border-radius: .4em;
    border: 2px dotted var(--color-third);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-left-color: #ffffff;
	border-right: 0;
	margin-top: -15px;
	margin-right: -15px;
}


#weltext {
color: #333333;
text-shadow: 2px 2px 0px #FFFFFF, 5px 4px 0px rgba(0,0,0,0.15);
color: #333333;
}

.feed-title {
    font-size: 15px;
    font-style: italic;
    margin: 0;
    padding: 7px;
    border-bottom: 4px double var(--color-third);
}

.feed-item-title {
    margin: 0;
    padding: 7px;
}

.feed-item-desc {
    margin: 0;
    padding: 7px;
}
/* layout */

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "sidebar main main";
}

.main { grid-area: main; }

.sidebar { grid-area: sidebar; }

.parent {  display: grid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "image logo logo"; 
}

.image { grid-area: image; }

.logo { grid-area: logo; }

.splitbio {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bio-text bio-img";
}

.bio-text { grid-area: bio-text; }

.bio-img { grid-area: bio-img; }

.middlearea {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "m-content m-content ads"
    "m-content m-content rssv"
    "cbox cbox rssv";
}

.m-content { grid-area: m-content; }

.cbox { grid-area: cbox; }

.rssv { grid-area: rssv; }

.ads { grid-area: ads; }

.biostuffs {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bigimg smalltext";
}

.bigimg { grid-area: bigimg; }

.smalltext { grid-area: smalltext; }


/* root */

:root {
  --bg-image: url("imgs/themes/bg_default.gif");
  --logo-image: url("imgs/themes/logo_default.png");
  --header-image: url("imgs/themes/himg_default.gif");
  --header-bg: url("imgs/themes/hbg_default.jpeg");
  --image-one: url(imgs/themes/hbg_default.gif);
  --image-two: url(imgs/themes/bg2_default.gif);
  --bg-color: #fff;
  --font-main: #000;
  --font-secondary: #fff;
  --color-main: #f5ffff;
  --color-secondary: #65ccff;
  --color-third: #25c6d9;
  --color-fade: rgba(101, 204, 255, 0.18);
}

[data-theme='dark'] {
  --bg-image: url("imgs/themes/bg_dark.gif");
  --logo-image: url("imgs/themes/logo_dark.png");
  --header-image: url("imgs/themes/himg_dark.gif");
  --header-bg: url("imgs/themes/hbg_dark.png");
  --image-one: url(imgs/themes/hbg_dark2.png);
  --image-two: url(imgs/themes/bg2_dark.gif);
  --bg-color: #000;
  --font-main: #fff;
  --font-secondary: #fff;
  --color-main: #000;
  --color-secondary: #000;
  --color-third: gray;
  --color-fade: rgba(91, 91, 91, 0.18);
}

[data-theme='cute'] {
  --bg-image: url("imgs/themes/bg_cute.gif");
  --logo-image: url("imgs/themes/logo_cute.png");
  --header-image: url("imgs/themes/himg_cute.png");
  --header-bg: url("imgs/themes/hbg_cute.jpg");
  --image-one: url(imgs/themes/hbg_cute.gif);
  --image-two: url(imgs/themes/bg2_cute.gif);
  --bg-color: #fff;
  --font-main: #000;
  --font-secondary: #fff;
  --color-main: #fff5f9;
  --color-secondary: #fff;
  --color-third: #f7aaca;
  --color-fade: rgba(255, 129, 195, 0.18);
}
}