/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
:root{
  --top: url('clouds.png');
  --a: #f8c6ff;
  --bg: #1e50c6;
  
  --alert: #ff002b;
  
}
html{
  background-image: url('https://64.media.tumblr.com/27a9372faf571224ac2188fe55dec85d/147bfebdf112f180-63/s400x600/447a06903784a763416566a934939de848d473ba.gifv');
  background-color: black;
}


*{
  margin: 0;
}

@font-face{
  font-family: 'Text';
  src: url('fonts/WindowsRegular.ttf');
}

@font-face{
  font-family: 'Heading';
  src: url('fonts/04B30.TTF');
}

hr{
  color: var(--a);
  margin: 0.5em 0;
}

ul{
  list-style: none;
}
li{
  padding-left: 16px;
}

li:before{
  content: "◇";
  padding-right: 5px;
  font-weight: bold;
}

.cursor:hover{
  cursor: pointer;

}

/* popup */
strong{
  font-weight: bolder;
  text-shadow: var(--a) 0 0 5px;
}

.popup{
  display: none;
  flex-flow: column;
  position: absolute;
  z-index: 1000;
  background: var(--bg);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 30%;
  max-height: 30%;
  border: 2px double var(--a);
  box-shadow: var(--a) 0 0 20px;
}

.popup-titlebar{
  display: flex;
  flex-flow: row;
  width: 100%;
  background: var(--bg);
  height: 10%;
  justify-content: center;
  align-items: center;
}

.popup-titlebar *{
  margin: 0 0.5em;
}

.popup-main{
  display: flex;
  flex-flow: column nowrap;
  background: var(--bg);
  padding: 1em;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.popup-main *{
  margin: 0.5em;
}

.popup button{
  width: 50%;
  border-radius: 0;
  color: var(--a);
  border: 2px double var(--a);
  background: var(--bg);
  padding: 0.5em;
  font-family: Text;
}

.popup button:hover{
  cursor: pointer;
  box-shadow: var(--a) 0 0 10px;
}


/* layout */
body{
  background: url('images/starbg.gif');
  font-family: 'Text';
  font-size: 12px;
  color: var(--a);
  display: none;
  
}
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
}

.top{
  width: 800px;
  height: 150px;
  background: var(--top);
  display: flex;
  /*filter: contrast(120%) sepia(80%) hue-rotate(150deg) saturate(500%);*/
  filter: hue-rotate(20deg) saturate(200%);
  flex-flow: column wrap;
}
.main{
  width: 800px;
  background: var(--bg);
  display: flex;
  flex-flow: row nowrap;
  min-height: calc(100vh - 150px);
}

.main p, .main a{
  font-size: 1.15em;
}



.left{
  width: 30%;
  height: 100%;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
}

.right{
  width: 70%;
  height: 100%;
  display: flex;
  flex-flow: column;
  padding: 0.5em;
}

h2{
  font-family: 'Heading';
}

a{
  color: var(--a);
  padding: 0.2em 0;
}

.divider{
  display: flex;
  flex-flow: row nowrap;
  margin: 0.5em;
  justify-content: center;
}

.divider img{
  width: 33%;
}

/* posts */
.post{
  display: flex;
  flex-flow: column;
  padding: 0.5em;
  margin: 0.5em 0;
  border: 2px double var(--a);
  max-height: 400px;
  overflow-y: auto;
  
  scrollbar-width: thin;
  scrollbar-color: var(--a) transparent;
}

.post h3{
  background: var(--a);
  padding: 0.2em;
  color: var(--bg);
  font-size: 1.3em;
}

/* blinkies and stamps */
.stamps{
  display: flex;
  flex-flow: row wrap;
}

.stamps img{
  max-height: 48px;
}

.blinkies{
  display: flex;
  flex-flow: row wrap;
}

.blinkies img{
  max-height: 25px;
  width: auto;
}

/* player */
#player{
  filter: hue-rotate(300deg) saturate(200%);
}

/* blog */
.search form{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.search input{
  background: none;
  color: var(--a);
  border: 2px double var(--a);
  width: 100%;
  margin: 0.5em;
  
}


/* chatbox */
iframe{
  height: 200px;
  margin: 0.5em 0;
}

/* changelog */
.changelog{
  background: none;
  border: 2px double var(--a);
  padding: 0.5em;
  height: 200px;
  overflow: auto;
  scrollbar-color: var(--a) var(--bg);
}

.changelog p{
  margin: 0.5em 0;
}

/* ipod */
.ipod{
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 360px;
  width: 150px;
  background: linear-gradient(90deg, rgba(1, 58, 78, 1) 0%, rgba(0, 159, 204, 1) 5%, rgba(0, 159, 204, 1) 94%, rgba(1, 58, 78, 1) 100%);
  display: flex;
  flex-flow: column;
  align-items: center;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 9px;
  cursor: move;
}

.ipod .screen{
  background: #eaf7ff;
  border: 4px solid #464e55;
  border-radius: 3px;
  width: 75%;
  height: 91.5px;
  max-height: 91.5px;
  margin: 1em;
  display: flex;
  flex-flow: column;
  align-items: center;
  
}

.ipod .screen .row{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  height: 14.2%;
  justify-content: space-between;
  color: black;
}


#ipodtop{
  background: linear-gradient(180deg, rgba(234,244,248,1) 0%, rgba(185,217,227,1) 100%);
  justify-content: center;
  color: black !important;
}

.ipod .screen .row p{
  margin: 0 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ipod .controls{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 75%;
  
}

.ipod .controls .pad{
  display: grid;
  grid-template-rows: 40px 40px 40px;
  grid-template-columns: 40px 40px 40px;
  background: #fbfcfe;
  border-radius: 100%;
}
.ipod .controls .pad .btn, .ipod .controls .pad .circle, .ipod .controls .pad .blank{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ipod .controls .pad .circle{
  background: rgba(0, 159, 204, 1);
  border-radius: 100%;
}

.ipod button{
  font-family: Helvetica;
  font-weight: bold;
  background: none;
  border: none;
  color: #b8bdc0;
  cursor: pointer;
}

.ipod button:hover{
  cursor: pointer;
}

#ipodaudio{
  display: none;
}

.ipod .screen .row:hover{
  background: linear-gradient(180deg, rgba(41,164,226,1) 0%, rgba(47,131,203,1) 100%);
  color: white;
}

#nowplaying, #ipodmusic{
  cursor: pointer !important;
}

/* DIFFERENT SCREENS */
/* now playing */
.nowplaying{
  display: flex;
  flex-flow: row ;
  width: 100%;
  height: 60%;
  align-items: center;
  font-size: 10px;
}

.nowplaying img{
  height: 70%;
  padding: 0 0.5em;
}

#playnum, .nowplaying p{
  color: black;
  font-family: Helvetica;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.row.nohover:hover{
  background: none !important;
  color: black !important;
  cursor: auto;
}

#songnum {
  position: absolute;
  left: 22px;
  top: 28px;
}

.musiccontainer{
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(41,164,226) transparent;
  font-size: 8px;
}
.musiccontainer .row{
  height: 16.6% !important;
}


/* nokia */

@keyframes jitter{
  0% {transform: rotate(3deg);}
  50% {transform: rotate(-3deg);}
  100% {transform: rotate(3deg);}
}
.phone{
  display: flex;
  width: 100%;
  margin: 2em 0;
  justify-content: center;
  align-items: center;
  animation: jitter infinite 0.9s;
  animation-timing-function: step-end;
}

.phone:hover{
  cursor: pointer;
  animation-play-state: paused;
}

.phone img{
  width: 80%;
  filter: drop-shadow(#00dbff 0 0 5px);
}

.phone img:hover{
  transform: scale(1.05);
  
}

/* cds */
.cds{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding: 0.5em;
  justify-content: center;
}

.cds img{
  mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Audio_Compact_Disc.png/250px-Audio_Compact_Disc.png');
  mask-position: center;
  mask-size: contain;

  max-height: 150px;
  margin: 0.5em;


}

@keyframes spin{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
  
}

.cds img:hover{
  animation: spin linear infinite 5s;
  cursor: pointer;
  
}