body{
   margin: 0px;
   padding: 0px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   /*font-style: normal;*/
   font-size: 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   height: 100vh;
   background-size: cover;
   background-blend-mode: overlay;
   background-color: #111111;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;

 }

 h1, h2{
   color: #000b1d;
   text-align: center;
 }


 .container{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   max-width: 1500px;
   width: 80%;
   align-self: center;
   margin-top: 20px;
   margin-bottom: auto;
  background-color: #03ae5bcc;
   border: solid #aa1e8f;
   border-bottom-width: 5px;
   border-radius: 20px;
   z-index: +1;
 }

 .button-container{
   display: flex;
   justify-content: space-between;
   width: 80%;
   margin-top: 200px;
 }

 .button {
   background-color: #03ae5bcc;

   color: #000;
   z-index: +1;
   border: 2px solid #aa1e8f;
   font-size: 1.3em;
   font-weight: 700;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
 }

 .artist-name{
   width: 100%;
   text-align: center;
   font-size: 1.5em;
   font-weight: 700;
   margin-top: 10px;
   margin-bottom: 15px;
 }

 .title{
   font-size: 2em;
   font-weight: 700;
   text-align: center;
   margin-top: 20px;
   margin-bottom: 15px;
   display: block;
   text-decoration: none;
   color: #000b1d;
   text-wrap: wrap;
   max-width: 600px;
 }

 .medium{
   font-size: 1.5em;
   font-weight: 400;
   text-align: center;
   margin-top: 10px;
   margin-bottom: 10px
 }

 .statement{
   font-size: 1.4em;
   font-weight: 400;
  /*text-align: center;*/
   margin: 0;
   /*margin-top: 30px;*/
   margin-bottom: 20px;
   width: 90%;
   line-height: 40px;
 }


 .player{
   margin-top: 30px;
   margin-bottom: 30px;
   width: 90%;
 }

 .visually-hidden{
    position: absolute;
    top: 30%;
    left:50%;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
 }




 @media(max-width: 700px){
   .container{
     width: 90%;
   }
   .button-container{
     width: 90%;
     margin-top: 130px;
   }
   div.nav-submenu{
     padding: 0px;
     display: flex;
     flex-wrap: wrap;
   }
   div.nav-link{
     padding: 0px;
     margin: 10px;
   }
   #title img {
     width: 80px;
   }


 }

 @media(max-width: 400px){
   .container{
     width: 98%;
   }
   .statement{
     font-size: 1.2em;
     line-height: 30px;
   }
   .button-container{
     width: 90%;
     margin-top: 100px;
   }
   .button{
     font-size: 1em;
     padding: 8px 12px;
   }

   div.nav-submenu{
     padding: 0px;
   }
   div.nav-link{
     padding: 4px 10px;
   }
   #title img {
     width: 80px;
   }


 }