@import url(https://db.onlinewebfonts.com/c/42f9562c8f7c7a67c631997066a9bff4?family=fs+Tahoma+8px);

@font-face {
    font-family: "fs Tahoma 8px";
    src: url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.eot");
    src: url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/42f9562c8f7c7a67c631997066a9bff4.svg#fs Tahoma 8px")format("svg");
}

body {
  background: #ffffff url("bg.webp") repeat center center;
  background-size: 100vw 100vw;
  color: black;
  font-family: Verdana;
}

h1 {
  font-family: Trebuchet MS;
  font-weight: bolder;
}

h2 {
  font-family: "fs Tahoma 8px";
  font-size: 26px;
  font-weight: bolder;
}

p {
  font-family: "fs Tahoma 8px";
  font-size: 22px;
}

span {
  font-family: "fs Tahoma 8px";
}

li {
  font-family: "fs Tahoma 8px";
}

nav {
  display: flex;
  flex-direction: column;
  position: absolute;
  margin-left: 10px;
}

.close {
  position: absolute;
  cursor: pointer;
  /*background: red; opacity: 0.3;*/
}

.window {
  display: none;
  position: absolute;
  cursor: move;
  z-index: 10;
}

.icon {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "fs Tahoma 8px";
  font-size: 20px;
  color: white;
}

.icon img {
  width: 47px;
  height: 47px;
}

.badge-grid {
    padding-top: 10px;
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    justify-content: start;
  }
  
  .badge {
    opacity: 0;
    transition: opacity 0.2s ease;
    height: 46px;
    width: auto;
    margin: 0 0 0 0;
    display:  inline-block;
  }
  .badge.show {
  opacity: 1;
}
  
/* Code for atabook */

.iframe-wrapper {
  position: relative;
  width: 344; 
  height: 550;
}

.iframe-wrapper iframe {
  width: 80%;
  height: 80%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

.iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.timer {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 150px;
  top: 70px;
  left: 50%; 
  transform: translateX(-50%);
}

.timerButtons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 30px;
}

.timerButton2 {
  width: 35px; 
  height: 35px; 
  border: 2px;
  border-radius: 10px;
  border-style: solid;
  border-color: #5582B2;
}

.timerButton {
  width:20px; 
  height:20px;
  border:1px;
  border-color: #5582B2;
  border-radius: 5px;
  border-style: solid;
}

#countdown {
  padding-bottom: 5px;
  padding-right:1px;
  font-size: 50px;
  color: #2E3E5E;
  display: flex;
  align-items: center;
  justify-content: center;
}


#error {
  position: absolute;
  text-align: left;
  font-family: "fs Tahoma 8px";
  font-size: 20px;
  top: 27%;
  left: 20%;
  width: 260px;
}

#welcome-window {
  top: 8%;
  left: 40%;
}

#messenger-window {
  top: 15%;
  left: 15%;
}

#aboutme1-window {
  top: 2%;
  left: 8%;
}

#aboutme2-window {
  top: 10%;
  left: 37%;
}

#aboutme {
  position: absolute;
  text-align: left;
  top: 5%;
  left: 5%;
  width: 550px;
}

#timer-window {
  top: 45%;
  left: 70%;
}

/* CODE FOR TYPING EFFECT */
.cmd-line {
  overflow: hidden;
  width: 0;
}

/* CODE FOR CRT EFFECT */
@keyframes flicker {
  0%   { opacity: 0.15; }
  50%  { opacity: 0.35; }
  100% { opacity: 0.18; }
}

@keyframes textShadow {
  0%, 100% { text-shadow: 0.5px 0 1px rgba(0,30,255,0.4), -0.5px 0 1px rgba(255,0,80,0.3), 0 0 2px; }
  50%      { text-shadow: 1.2px 0 1px rgba(0,30,255,0.4), -1.2px 0 1px rgba(255,0,80,0.3), 0 0 2px; }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.1s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt {
  animation: textShadow 4s infinite;
}

/* MUSIC PLAYER CSS */
button {
  background-color: Transparent;
  border: none;
  cursor:pointer;
  overflow: hidden;   
}

#music-window {
  top: 15%;
  left: 45%;
}

#prevBtn {
  position: absolute;
  top: 409px;
  left: 165px;
}

#playBtn {
  position: absolute;
  top: 405px;
  left: 92px;
}
#pauseBtn {
  display: none;
  position: absolute;
  top: 405px;
  left: 92px;
}

#stopBtn {
  position: absolute;
  top: 410px;
  left: 127px;
}

#nextBtn {
  position: absolute;
  top: 409px;
  left: 190px;
}

#muteBtn {
  position: absolute;
  top: 410px;
  left: 228px;
}

#playlistName{
  color: white;
  line-height: 14px;
  font-size: 14px;
  text-align: center;
  width: 182px;
  position: absolute;
  top: 90px;
  left: 440px;
}

#trackTitle {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 5px;
  margin: 2px;
  padding: 2px 2px 2px 5px;
  width: 182px;
  position: absolute;
  top: 250px;
  left: 432px;
  color: Chartreuse;
  background-color: Black;
}

#upNextList {
  color: white;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  padding: 7px 2px 2px 5px;
  margin: 2px;
  line-height: 14px;
  white-space: nowrap;
  width: 182px;
  position: absolute;
  top: 260px;
  left: 432px;
  list-style-type: none;
  text-align: left;
}

#volumeSlider {
  position: absolute;
  top: 410px;
  left: 258px;
  width: 67px;
  height: 17px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent; 
}

#volumeSlider::-webkit-slider-runnable-track {
  background: #ffffff url("player/volSlider.png");
  width: 67px;
  height: 17px;
}

#volumeSlider::-moz-range-track {
  background: #ffffff url("player/volSlider.png");
  width: 67px;
  height: 17px;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 9px;
  height: 17px;
  background: url(player/volThumb.png);
  background-size: contain;
  border: none;
  cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
  width: 9px;
  height: 17px;
  background: url(player/volThumb.png);
  background-size: contain;
  border: none;
  cursor: pointer;
}

#seekBar {
  position: absolute;
  top: 383px;
  left: 126px;
  width: 464px;
  height: 13px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent; 
}

#seekBar::-webkit-slider-runnable-track {
  background: #ffffff url("player/seekBar.png");
  width: 464px;
  height: 13px;
}

#seekBar::-moz-range-track {
  background: #ffffff url("player/seekBar.png");
  width: 464px;
  height: 13px;
}

#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 23px;
  height: 13px;
  background: url(player/seekBarThumb.png);
  background-size: contain;
  border: none;
  cursor: pointer;
}

#seekBar::-moz-range-thumb {
  width: 23px;
  height: 13px;
  background: url(player/seekBarThumb.png);
  background-size: contain;
  border: none;
  cursor: pointer;
}

#mediaVis {
  position: absolute;
  height: 255px;
  width: 329px;
  top: 90px;
  left: 100px;
  
}

#visNextBtn {
  position: absolute;
  top: 348px;
  left: 135px;
} 

#visPrevBtn {
  position: absolute;
  top: 348px;
  left: 117px;
} 

#playlistImg {
  position: absolute;
  height: 110px;
  width: 110px;
  top: 118px;
  left: 475px;
  
}