body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background-color: #FFFFFF;
      background-size: 65px;
      background-image: url('https://oceanfront.neocities.org/photos/webfiles/Background02.gif');
    }
    
    #container {
        max-width: 900px;
        margin: 0 auto;
    }

    main {
        height:650px;
        width:820px;
        padding: 20px;
        background-color: rgb(248, 252, 255);
        border: #93a3b5 1.5px solid;
        margin-top: 70px;
        margin-bottom: 50px;
        position: absolute;
        z-index:999;
    }

    .imagebox {
      width: 770px;
      height:70px;
      margin-left:20px;
      margin-top:-70px;
      margin-bottom:20px;
      background-image:url(photos/webfiles/musicworldborder.jpg);
    }

    .hometextbox {
      height:400px;
      width:560px;
      margin-left:235px;
      margin-right:auto;
      margin-top:-285px;
      background-color: rgb(248, 252, 255);
      box-shadow: 0px 0px 10px 5px #aecad9;
      border:#93a3b5 1.5px solid;
      overflow:auto;
    }

    .textcolumn {
      line-height: 2px;
      text-align: left;
      width:290px;
      font-size:15px;
    }
    
    .concerttextbox {
      height:400px;
      width:580px;
      margin-left:20px;
      margin-top:38px;
      background-color: rgb(248, 252, 255);
      box-shadow: 0px 0px 10px 5px #aecad9;
      border:#93a3b5 1.5px solid;
      overflow:auto;
      background-image:url(https://i.ibb.co/DPRjxKPc/7db50c7f47c2f95c216f1800ccd53919.jpg);
    }

    .post {
      width:85%;
      margin-left:auto;
      margin-right:auto;
      margin-bottom: 10px;
      margin-top: 10px;
      background: white;
      border-image-outset: -35px;
      border: dashed #99c0e7 2px;
    }

    img .post {
      max-width:150px; 
    }

    .demobox {
      background-color: #ddedf5;
      width:140px;
      height:20px;
      margin-left:640px;
      display: flex;
      justify-content: center;
      align-items:center;
      text-align: center;
      border: 5px solid;
      border-image:url(https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj) 8 fill round;
    }


  /****************** BUTTONS *****************/

    button {
      background-color: #ffffff;
      border-radius: 30px;
      font-family: 'Times New Roman', Times, serif;
      border-top: 3px groove #c7dfe6;
      border-bottom: 3px groove #c7dfe6;
      border-right: 3px groove #c7dfe6;
      border-left: 3px groove #c7dfe6;
      color: #549ebb;
      background-color: rgb(215, 239, 248);
      font-size: 14px;
      height: 25px;
      width: 110px;
      transition-duration: 0.2s;
      text-align:center;
      margin-left:10px;
      filter: drop-shadow(0px 0px 1px rgb(105, 210, 255));
    }

    button:hover {
      background-color: #f3fcff;
      font-size: 13px;
      transition-duration: 0.2s;
    }

    button.selected {
      background-color: #f3fcff;
      transition-duration: 0.4s;
    }

  /****************** MISC *************************/
    
    hr {
        border:0.8px #b8c8d7 solid;
        width:860px;
        margin-left:-20px;
      }

    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .tooltiptext {
      visibility: hidden;
      width: 50px;
      margin-top:-10px;
      margin-left:6px;
      background-color: rgba(255, 255, 255, 0.511);
      border: 1.5px dashed #549ebb;
      color: #30506f;
      text-align: center;
      border-radius: 6px;
      padding: 8px;
      font-size:12px;
      z-index: 1;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

    *::-webkit-scrollbar {
      width: 5px;
    }

    *::-webkit-scrollbar-thumb {
      background-color: #81afc8;
      border-radius: 10px;
      border: 1.5px dashed #A2D5F8;
    }

    *::-webkit-scrollbar-track {
      background: #d4dcec;
    } 

    details > summary {
    list-style: none;
    font-family: 'winkle';
    }

    /* Create two equal columns that floats next to each other */
    .meow {
      float: left;
      width: 15%;
      padding: 10px;
    }

    .meow img {
      margin-top: 8px;
    }

/* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .photo-caption {
      background-color: rgb(243, 246, 248);
      padding: 5px;
      font-size: 12px;
      border: 1px solid #7097ab;
      justify-content: center;
      align-items:center;
      text-align: center;
      overflow:auto;
      height:35px;
    }

  /****************** MUSIC PLAYER *****************/

    #musicplayer{ 
      font-family: Arial, Helvetica, sans-serif;
      font-weight:bold;
      height:30px;
      width:100%;
      left:0;
      top:0;
      position:fixed;
      margin-bottom:20px;  
      display:flex;
      z-index:9999;
      background: linear-gradient(180deg,rgb(156, 222, 250) 0%, white 45%, rgb(89, 168, 210) 47%, white 100%);
      border:ridge 2px white; /* border around player */
      outline: solid 2px #99c0e7;
      box-shadow: inset 10px 0px 6px -10px #5daee8, inset -13px 0px 6px -10px #5daee8, inset 0px 10px 6px -10px #ffffff, inset 0px -13px 6px -10px white;
    }
         
    .songtitle{ 
      font-family:'Times New Roman', Times, serif;
      font-weight: 600;
      display:block;
      padding:2px; /* padding around song title */
      margin-top:4px;
      margin-right: 5px; 
      margin-left: 5px; 
      font-size:15px;
      height:17px;
      width:380px;
      text-align: left;
      overflow:auto;
      color:#3b4d6f99;
      letter-spacing: 1px; 
      background: white;/* background of song title */
      border: #5daee8 inset 1px;
      border-radius:6px;
      box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
         
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      color: rgb(53, 143, 195);
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0.5px #3d7ba8) drop-shadow(0 0.5px #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8);
    }
         
    .controls td{
      padding-top:5px; /* padding around controls */
    }
         
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */       
    }
         
    .current-time{  
      padding-right:5px;
      margin-right: 3px;
      color: rgb(53, 143, 195);
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0.5px #3d7ba8) drop-shadow(0 0.5px #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8);  
    }
         
    .total-duration{
      padding-left:5px;
      color: rgb(53, 143, 195);
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0.5px #3d7ba8) drop-shadow(0 0.5px #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8);
    }
         
    .ctrlimg {
      height:16px;
      width:16px;
   }

    .ctrlimg:hover{
      cursor:help;
    }
            
    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      background: transparent;
    }
            
    input[type=range]:focus {
      outline: none;
    }
            
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 6px; /* thickness of seeking track */
      cursor: help;
      border-radius: 6px;
      background: rgb(53, 143, 195); /* color of seeking track */
      border: 1px white solid;
    }
        
    input[type=range]::-webkit-slider-thumb {
      height: 30px; /* height of seeking square */
      width: 20px; /* width of seeking square */
      background-image:  url('https://i.ibb.co/4nhZ33xc/315ed8a5.gif'); /* image of  seeking square */
      background-size: 25px;
       -webkit-appearance: none;
       margin-top: -10px;   
    }
            
    input[type=range].volume_slider::-webkit-slider-runnable-track { 
      background: white; /* color of volume seeking track */
      filter:drop-shadow(-0.5px 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0 #3d7ba8) drop-shadow(0 0.5px 0.5px #3d7ba8) drop-shadow(0 0.5px #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8) drop-shadow(0.5px 0.5px 0 #3d7ba8);  /* outline of volume seeking track */ 
    }
            
    input[type=range].volume_slider::-webkit-slider-thumb {
      background-image: url(https://i.ibb.co/dJcWgZ65/tumblr-383480b278d8fa7ffb3fb99ef6c0252c-b6aced8e-75.webp);/* image of volume seeking square */
      background-size: 20px;
      height: 20px; /* height of volume seeking square */
      width: 20px; 
      margin-top: -8px;
    }
          
    .slider_container {  
      width: 150px;       /* width of volume seeker */
      display: flex;
      justify-content: center;
      align-items: center;
    }    
  
  /****************** TEXT *****************/

      a:hover{ 
        cursor:url(https://i.ibb.co/6JL8wR4/download-2.gif), url(https://i.ibb.co/6JL8wR4/download-2.gif), auto;   
      }

    h1 {
      color:#9fc2e3;
      font-family: "hawaiikiller";
      border-radius: 15px;
      font-size: 90px;
      letter-spacing: 5px;
      filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 1px 0px #00000032);
    }
    
      h2 {
        color: #ffffff;
        text-shadow: -2px -2px 1px #81acd1, -2px -2px 1px #81acd1, 2px -2px 0px #81acd1, -2px 2px 0px #81acd1,
        -2px -2px 1px #81acd1, -2px -2px 1px #81acd1, 2px -2px 0px #81acd1, -2px 2px 0px #81acd1,
        -2px 1px 1px #81acd1,-2px 4px 1px #81acd1,
        -2px -2px 1px #81acd1, -2px -2px 1px #81acd1, 2px 2px 0px #81acd1;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: 3;
        font-family: bluescreen;
      }

      h3 {
        padding: 5px;
        margin-bottom: -5px;
        width: 100%;
        margin-top: -10px;
        margin-left: -10px;
        line-height: 110%;
        font-family: "hawaiikiller";
        font-size: 50px;
        text-underline-offset: 5px;
      }

      h3 span {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: rgb(124, 141, 148);
        text-shadow: none;
        text-decoration: none;
        margin-left:2%;
      }

      p {
        color: #3b4d6f99;
      }

      span {
        color:#48abe0;
        font-family: 'zen maru gothic';
        font-weight: 500;
      }

      a:link {
        color: #81afc8;
      }

      a:visited {
        color: #6f9bbf;
      }

      a:hover {
        color: #81afc8;
      }

      a:active {
        color: #81afc8;
      }

      ::selection {
        color: rgb(47, 101, 131);
        background-color: rgb(186, 228, 239);
      }

      @keyframes shadows {
      0% {
      text-shadow: #48abe0 0 0 10px;
      box-shadow: 0px 0px 20px 10px #48abe0;
      }
      50% {
      text-shadow: #5daee8 0 0 10px;
      box-shadow: 0px 0px 20px 10px #5daee8;
      }
      75% {
      text-shadow: #9acaec 0 0 10px;
      box-shadow: 0px 0px 20px 10px #9acaec;
      }
      100% {
      text-shadow: #48abe0 0 0 10px;
      box-shadow: 0px 0px 20px 10px #48abe0;
      }
    }


  /****************** FONTS ************************/

    @font-face {
      src: url("fonts/BlueScreen.ttf"); 
       format:("truetype");
      font-family: "bluescreen";
      }
  
    @font-face {
      src: url("fonts/Hawaii\ Killer\ \(v1.2\).otf"); 
       format:("truetype");
      font-family: "hawaiikiller";
      }

     @font-face {
      src: url("fonts/RomanceA.ttf"); 
       format:("truetype");
      font-family: "romance";
      }