header {
    background-color: rgba(255,255,255,.2); 
    border:6px double cornflowerblue; 
    border-radius:25px;
    margin-bottom:10px; 
    margin-top:0px; 
    margin-left:auto; 
    margin-right:auto;
    padding-bottom:10px;
    position: relative;
    width:450px;
    height:110px;     
    } 
.container {
    padding:20px; 
    border:4.3px  dashed cornflowerblue; 
    border-radius:10px;
    background-color: rgba(255,255,255,0); 
    padding:20px; 
    margin-left:auto;
    margin-right:auto; 
    margin-bottom:40px; 
    text-align:center;
    width:500px;
}
.container:hover {
    background-color:rgba(77, 91, 250, 0.84);
    text-decoration:wavy white underline;
    cursor: url('/media/assets/jelly2.cur'), auto;
  }

body {
    background-image: url(/media/assets/underwatre_background.gif);
    background-size:450px;
    padding:40px;    
    cursor: url('/media/assets/jellycursor.cur'), auto;
    background-color: lightgoldenrodyellow;
    color: rgb(228, 145, 255);
    font-weight:600;
    font-size:2vw;
    font-family: Courier, monospace;   
    text-align: center;
}
body:a {
  color: rgb(228, 145, 255);
  background-color:transparent;
}

  body p1:hover {
    text-decoration:wavy white underline;
  }
  body a:hover {
    cursor: url('/media/assets/jelly2.cur'), auto;
  }
  body p1 {
    text-decoration:none;
  }
  /* Clear floats after the columns */
  section::after {
    content: "";
    display: table;
    clear: both;
  }
        h1 {
      cursor: url('/media/assets/jelly2.cur'), auto;
      color:rgb(228, 145, 255);
      font-size: 45px;
}
    h2 {
      cursor: url('/media/assets/jelly2.cur'), auto;
      color: rgb(228, 145, 255);
      font-size: 25px;
}
    h3 {
      cursor: url('/media/assets/jelly2.cur'), auto;
      color: lightgreen;
      font-size: 25px;
}
footer {
    cursor: url('/media/assets/jelly2.cur'), auto;
}

    .musicplayer {
    cursor: url('/media/assets/jelly2.cur'), auto;
    border:10px groove rgb(228, 145, 255);; 
    border-radius:25px;
    margin-top:20px; 
    margin-left:auto; 
    margin-right:auto; 
    padding:2px; 
    width:330px; 
    font-size:1.8;
    color:rgb(228, 145, 255);
    }
section {
    cursor: url('/media/assets/jelly2.cur'), auto;
}
* {
    box-sizing: border-box;
  }

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
    nav, article {
      width: 100%;
      height: auto;
  }
     nav {
         display:none;
  }
      .container {
          background-color: rgba(255,255,255,0);
          padding:2vw; 
          border:2px dashed cornflowerblue; 
          border-radius:10px;
          margin-left:0px;
          margin-right:0px; 
          text-align:center;
          width:100%;
          font-size:5vw;
          height:13vw;      
  }
          header {
          background-color: rgba(255,255,255,.2);
          border:5px double cornflowerblue; 
          border-radius:15px;
          margin-bottom:10px; 
          margin-top:0px; 
          margin-left:0px; 
          margin-right:auto;
          padding-bottom:10px;
          position: relative;
          width:100%;
          height:10vw;
      }
      h1 {
          font-size:10vw;
      }
      h2 {
          font-size:6vw;
      }
      .musicplayer {
          width:100%;
          font-size:4vw;
          border: 2vw double lightblue;
          height:30vw;
      }
    li {
      text-align:center;
    }  
  }