@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


:root {
--border: #303030;;
--accents: #00000075;
--bg1: #00000069;
--text: #f1f1f1;
--link: #fff09c;
--link-hover: #df8383;
}
  
body {
  height: 100%;
  display: grid;
  background: #bf2c31c7;
  background-image: url('/imgs/bg1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
  
::selection {
  background: var(--accent);
}
  
/* Title */
h1 {
  font-family: 'Dancing Script', cursive;
  color: var(--text);
  font-size: 60px;
  font-variant: normal;
  margin: -1px;
  padding: 0  0 20px 0;
  text-shadow: 3px 0 var(--border), -3px 0 var(--border), 0 3px var(--border), 0 -3px var(--border),2px 2px var(--border), -2px -2px var(--border), 2px -2px var(--border), -2px 2px var(--border);
}
  
/* Text Box */
.box {
  margin: 0 auto;
  margin-top: 0px;
  width: 550px;
  padding: 15px;
  font-family: calibri, sans-serif;
  color: var(--text);
  font-size: 28px;
  text-align: center;
  background: var(--bg1);
}

.box2 {
  margin: 0 0 12px 0;
  padding: 9px 15px;
  font-family: calibri, sans-serif;
  color: var(--text);
  font-size: 20px;
  text-align: center;
  background: #303030;;
}
  
/* For the NV quote */
.quote {
  display: none;
  font-size: 20px;
  padding: 0px 15px 15px 15px;
}
  
/* Links */
a:link,
a:visited,
a:active {
  color: var(--link);
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
  
a:hover {
  color: var(--link-hover);
}
  
/* Tabs */
.tab {
  overflow: hidden;
}
    
.tab button {
  margin: 5px;
  border: 1px solid var(--border);
  padding: 3px;
  background-color: inherit;
  font-size: 20px;
  color:var(--link);
  float: center;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
}
  
/* Change background color of buttons on hover */
.tab button:hover {
  color: var(--link-hover);
}

  
  
  /*------ music playerrrr --
  .iru-tiny-player {
      width: 290px;
      margin: 10px 0 -1px 0;
      position: relative;
      border: 1px solid var(--border-color);
      background-color: var(--bg-color);
      border-bottom: 0;
    }
    
    .iru-tiny-player .song-main-info {
      padding: 10px;
      font-size: 10px;
      display: flex;
      align-items: center;
      color: var(--text-color);
    }
    
    .iru-tiny-player .icon {
      margin-right: 1ex;
      min-width: 1.5rem;
      flex-basis: 1.5rem;
      text-decoration: none;
      border-bottom: none;
      position: relative;
    }
    
    .iru-tiny-player .icon:hover {
      color: var(--accent-color);;
    }
    
    .iru-tiny-player .icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-transform: none !important;
    }
    
    .iru-tiny-player .song-main-info .icon.fa-stop {
      margin-right: 2ex;
    }
    
    .iru-tiny-player .song-main-info .song-timer {
      margin: 0ex 1ex;
      white-space: nowrap;
    }
    
    .iru-tiny-player .song-main-info .song-title {
      flex-grow: 1;
      white-space: nowrap;
      overflow: hidden;
    }
    
    .iru-tiny-player .song-seek {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .iru-tiny-player .song-progress {
      position: absolute;
      background-color: rgba(191, 212, 163, 0.5);
      width: 0%;
      height: 100%;
    }
    
    .iru-tiny-player .song-volume-control {
      position: absolute;
      background-color: rgba(251, 255, 200, 0.5);
      width: 100%;
      height: 100%;
      top: 0;
    }
    
    .iru-tiny-player .song-volume-bar {
      position: absolute;
      top: 50%;
      left: 20%;
      height: 10px;
      margin: 0px auto;
      width: 80%;
      background-color: var(--text-color);
    }
    
    .iru-tiny-player .song-volume-bar#fg {
      height: 5px;
      margin: -2.5px auto;
      width: 60%;
    }
    
    .iru-tiny-player .song-volume-bar#fgg {
      height: 10px;
      margin: -5px auto;
      background-color: rgba(255, 255, 255, 0);
      width: 60%;
    }
    
    .iru-tiny-player .song-volume-bar#bg {
      height: 1.5px;
      margin: -0.75px auto;
      background-color: var(--border-color);
      width: 60%;
    }
    
    .iru-tiny-player .song-volume-dot {
      position: absolute;
      width: 15px;
      height: 15px;
      top: 50%;
      left: 80%;
      margin: -7.5px auto;
      background-color: var(--text-color);
      border-radius: 7.5px;
      cursor: pointer;
    }
    
    .iru-tiny-player .song-volume-dot:hover {
      background-color: var(--bg-color);
    }
    
    .iru-tiny-player .icon.fa-times {
      margin: 5px 10px;
      position: absolute;
      font-size: 1.25rem;
      right: 0;
      top: 0;
      color: var(--bg-color);
    }