html {
    scroll-behavior: smooth;
  }

body
{
background-image: url("img/NeonRainBG.jpg");
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment:fixed;
font-family: 'Quantico', sans-serif;
color:antiquewhite;
list-style: none;
text-align: center;
width:100%;
margin: 0 auto;
}

#header{
    margin:0 auto;
    padding-top:50px;
}

#cover{
    max-width: 350px;
    margin:0 auto;
    text-align: center;
}

#splash{
    max-width:700px;
    height:580px;   
    border: solid 2px rgb(231, 215, 255);
    border-radius:10px;
    padding:10px;
    background:rgba(0, 0, 0, 0.95);
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    margin-top:150px;
    left: 0;
    right: 0;
    text-align: center;
    box-shadow:
    0 0 90px rgb(250, 182, 210),
    0 0 100px rgb(255, 124, 179),
    0 0 130px rgb(253, 49, 134);
    }

#layer{
    width:100%;
    height:100%;
    background-color: rgba(173, 255, 255, 0.205);
    position:absolute;
}

.close {
    position: absolute; top:10px; right:20px; text-decoration: none; cursor: pointer;
}

#main{
    max-width: 960px;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.75);
    padding: 0px 40px;
    margin:0 auto;
    padding: 0;
}

.releaseblur{
    background-image: url("img/NeonRainBG.jpg");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height:400px;
}

#release{
    max-width: 350px;
    padding: 0px 40px;
    margin:0 auto;
    padding: 0;
    z-index: 2;
    background: rgba(0,0,0,0.75);
}

iframe.musicplayer{
    border:0;
    margin:0 20px !important;
}

iframe.yt{
    width:560px;
    height:315px;
}

ul,li{
    display:inline-block;
    margin: 0 1.30em;
    padding:5px 0px; 
}

h1{
    color:rgb(225, 255, 255);
    font-size: 5em;
    text-align: center;
    margin:0px;
    padding:0px;
    line-height: 0.8em;
    font-style: italic;
    text-shadow:
      0 0 4px rgb(173 255 255),
      0 0 11px rgb(173 255 255),
      0 0 19px rgb(173 255 255),
      0 0 40px rgb(173 255 255),
      0 0 80px rgb(173 255 255),
      0 0 90px rgb(155, 253, 253),
      0 0 100px rgb(126, 248, 248),
      0 0 130px rgb(100, 255, 255);
}

h2{
    color:rgb(255, 237, 221);
    font-size: 2.5em;
    text-align: center;
    margin:0px;
    padding:0px;
    line-height: 1em;
    text-shadow:
    0 0 4px rgb(255 208 167),
    0 0 11px rgb(255 208 167),
    0 0 19px rgb(255 208 167),
    0 0 40px rgb(255 208 167),
    0 0 80px rgb(252, 197, 150),
    0 0 90px rgb(255, 190, 133);
}

h3,h4>a{
    color:rgb(173 255 255);
    display:block;
    font-size:2em;
    text-decoration:none;
    text-transform: uppercase;
    font-weight:normal;
    background:rgb(173 255 255 / 7%)
}

h3{
    letter-spacing: 0.4em;
    text-shadow: 0 0 5px black;
    border-radius: 10px;
}

h4{
    height: 55px;
    display: block;
    padding: 6px;
    margin: 0;
}

a{
    color: antiquewhite;
}

h4>a{
    border:solid 2px rgb(173 255 255);
    border-radius:10px;
    padding-top:4px;
    font-size:1.1em;
    width:280px;
    display:block;
    margin:0 auto;
    text-shadow: 0 0 10px black;
}

h4>a:hover{
    background-color: rgb(239 239 239 / 20%);
    color:whitesmoke;
}

p{
    color:rgb(255, 227, 202);
    text-shadow: 0 0 5px black;
    letter-spacing: 1.5px;
    font-weight: normal;
    font-size:1.4em;;
    line-height:24px;
    text-align: justify;
}

img{
    text-align: center;
    margin: 0 auto;
    padding:0;  
}

#larussopic{
    width: 40%;
    box-shadow: 0 0 10px black;
    float:left;
    margin:20px;
}

#logo{
    width:300px;
    display: inline;
    background-color: black;
    border-radius:10px;
}

#bc{
    background-color: whitesmoke;
    border-radius: 8px;
    height: 34px;
    display:inline;
    vertical-align: middle;
}

nav{
    background-color: #000;
    position: fixed;
    padding:0;
    margin:0 auto;
}

.sticky {
    text-align: center;
    position: fixed;
    transition: all 0.4s ease;
}

nav a{
    text-decoration: none;
    color: rgb(255 208 167);
    font-size: 20px;
    letter-spacing: 0.2em;
    padding: 7px;
}

nav a:hover{
    text-shadow:  0 0 12px rgb(173 255 255);
    color: rgb(216, 255, 255);
}

p>a:hover,p>a:active,p>a:focus{
    color:rgb(173 255 255);
}

.logo {
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    display:inline-block;
    margin:10px;
    text-shadow: 0 0 5px black;
}

.logo#twitter{
    background-image: url(img/icons/twitter.svg);
}

.logo#facebook{
    background-image: url(img/icons/facebook.svg);
}

.logo#instagram{
    background-image: url(img/icons/instagram.svg);
}

.logo#youtube{
    background-image: url(img/icons/youtube.svg);
}

#content{
 padding: 20px;
}

footer p{
    font-size: 1.6em;
    text-align:center;
}

form{
    max-width:33%;
    margin:0 auto;
}

input[type=text], input[type=email], button{
    height: 36px;
    width: 100%;
    padding-left: 10px;
    margin-bottom: 10px;
    border:0;
    border-radius: 5px;
    font-size: 1em;
}


button{
    background-color: rgb(173 255 255);
    color:rgb(48, 48, 48);
    font-weight: bold;
    cursor: pointer;
}

button:hover, button:active, button:focus{
    background-color: antiquewhite;

}

textarea{
    width: 100%;
    padding-left:10px;
    border-radius:5px;
    font-size: 1.3em;
    margin-bottom:5px;
}

#hide{
    display:none;
}

label {
    cursor: pointer;
    text-decoration: underline;
  }

#hide:checked ~ #splash, #hide:checked ~ #layer  {
    display:none;
  }

@media only screen and (max-width: 600px) {
    #main{
        padding: 0px 0px;
        margin: 0 auto;
        max-width: 100%;
    }

    ul,li{
        display:inline-block;
        margin: 0 0.6em;
        padding:2px 0px; 
    }
    nav a{
        text-decoration: none;
        font-size: 16px;
        letter-spacing: 0.1em;
        padding: 3px;
    }

    iframe.yt{
        width:66%;
    }
    
#header{
    padding: 80px 0px 40px 0px;
}

.no-padding{
    padding:20px 0px 10px!important;

}

    form{
        max-width: 100%;
        margin:0 auto;
    }

    h1 {
        font-size: 4.5em;
    }

    h2{
        font-size:2em;
    }

    h3{
        font-size: 1.4em;
    }

    p, footer>p{
        font-size: 1.1em
    }

    #larussopic{
        width: 50%;
        box-shadow: 0 0 5px black;
        float:left;
        margin:10px;
    }

    iframe.musicplayer{
        border:0;
        margin:0 10px !important;
    }

    #content{
        margin: 10px;
    }

    #splash{
       max-height: 450px;
       margin:10px;
       z-index:10;
    }

    #cover{
        max-width: 250px;
        text-align: center;
    }

  }