:root {
  
  --orange: #ffbd9aff;
--orange2: #ffa162ff;
--pink2: #f392afff;
--pink: #f7bbc5ff;
--white: #fff5f2ff;
--black: #360a0aff;

}

@font-face {
font-family: ninten;
src: url(https://file.garden/ZXJkOcYwORXn2d9V/Nintendo-DS-BIOS.ttf);

}

@font-face {
font-family: sans;
src: url(https://file.garden/ZXJkOcYwORXn2d9V/Gaegu-Regular.ttf);
}

@font-face {
  font-family: fredoka;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/fomnts/fredoka.ttf);
}

html {
background: white;
  overflow-x: hidden;
}



body {
  background: blue;
color: var(--black);
  padding: 0px;
  margin: 0px;
}

.bottomnav {
background: var(--pink2);
  position: fixed;
  z-index: 100;
bottom: 0;
  width: 100%;
  padding: 5px;
  border-top: 2px solid 
  var(--black);
  padding-bottom: 8px;
}

.bottomnav .button1 {
display: inline-block;
  background: var(--pink);
padding: 5px;
  width: 85px;
  border: 1.5px solid var(--black);
    font-family: fredoka;
  font-size: .9em;
  height: 17px;
  overflow: hidden;
  color: var(--white);
  text-decoration: underline;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  margin: 2px;
}

.bottomnav .button1:active { transform: translatey(3px);

}


.bottomnav .button1 img {
width: 20px;
  height: 20px; float: left;
  margin-right: 5px;
}

.button1#discord {
cursor: pointer;
  transition: .3s width;
}

.button1#discord:hover {
width: 215px;
}

.sidebar.pc {
background: red;
width: 15%;
  height: 90.75%;
padding: 10px;
  float: left;
}

.sidebar.pc .app {
  display: inline-block;
width: 49px;
  text-align: center;
  font-size: 9px;
  background: skyblue;
  font-family: sans;
}

.sidebar.pc .app img {
width: 49px;
  height: 49px;
}


.main {
background: lime;
  width: 668px;
padding: 7px;
  height: 90.75%;
  overflow: auto;
  float: right;
  padding-bottom: 50px;

}

.window {
padding: 4px;
  background: var(--pink2);
border: 2px solid var(--black);
  margin-bottom: 5px;
  box-shadow: .5px .5px 0px 1px #473636;
  margin-right: 3px;
  font-family: fredoka;
  font-size: .9em;
  color: var(--white);
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  
}

.window .body {
background: var(--white);
  border: 1.5px solid var(--black);
  padding: 3px;
  margin-top: 2px;
  overflow: auto;
  font-family: sans;
  letter-spacing: -.5px;
  text-shadow: none;
  color: var(--black);
  font-size: 1.1em;
}

.window:before {
  width: 14px;
  height: 14px;
content: "X";
float: right;
  font-size: 13px;
  background: var(--white);
    border: 1px solid var(--black);
  text-align: center;
  color: var(--black);
  text-shadow: none
}

#about img {
width: 100px;
  height: 100px;
  border: 1px solid var(--black);
  float: right;
  margin-left: -5px;
  margin-bottom: -5px;
}


.flex {
display: flex;
}


#webrings {
text-align: center;
}


.button.stick {
  position: sticky;
background: var(--pink);
  width: 190px;
  margin-left: -3px;
  margin-top: -3px;
  border-right: 1px solid var(--black);
  padding: 3px;
  display: flex;
  border-bottom: 1px solid var(--black);
}

.code.button {
background: var(--white);
  width: 90px;
  margin-left: 10px;
  border: 1px solid var(--black);
  font-size: 10px;
 overflow: auto;
  height: 30px;
  padding: 2px;
  word-break: break-all;
}

font.margin {
  margin: 3px;
  opacity: 0;
  
}


.holdall {
background: lime;
  width: 100%;

}
.window.accent#one {
position: fixed;

  z-index: 30;
  width: 300px;
  height: 200px;
  left: 1em;
  bottom: 5em;
}

.window.accent#two {
  position: fixed;
z-index: 31;
  width: 250px;
  left: 5em;
  bottom: 4em;
}

.window.accent#matt, .window.accent#ana {
position: absolute;
  z-index: 32;
  width: 120px;
  top: 6em;
  left: 13em;
}
.window.accent#ana {
left: 22em;
}

.window.accent .header {
cursor: move;
}


.window.accent#matt:hover, .window.accent#ana:hover {
  z-index: 33;
}

/* music player start ! */
#glenplayer02 {
position: relative;
top: 3px;
left: 4px;
display: flex;
z-index: 30;
text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
color: #fff;
}
@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}
#glenplayer02 marquee {
font-family: fredoka;
color: #fff;
}
#glenplayer02 > div { align-self:center; -webkit-align-self:center; }
.music-controls {
user-select:none;
-webkit-user-select:none;
width:16px;
font-size:16px;
cursor:pointer; }
.playy, .pausee {
color:var(--orange);
text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
}
.pausee {display:none;}
.sonata { margin-left:10px; color:#fff; }
.labeltext { margin-left:0px; font-family: lovely; font-size:16px; font-weight: bold; color:#fff; text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0; width: 95%; }
/* music player end! */

mark {
    font-family: fredoka;
  font-size: .9em;
  color: var(--orange2);
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  background: #fad4db;
  
}


.window .body a {
color: var(--orange2);
  transition: 0.2s color;
}

.window .body a:hover {
color: #e0733d

}



 @media only screen and (max-width: 825px) {
   .sidebar.pc {
width: 10%;
}
   
   .main {
z-index: 20;
}



}