@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300&display=swap');

html{
    scroll-behavior: smooth;
}

.audioitem{
    margin-top: 0;
}

.hyperlink{
    color: #FFB8D1;
    text-decoration: underline;
}

.hyperlink:hover{
    color: #8DE5EF;
}

.descrp{
    margin: 5px;
}

.outer{
    width: 350px;
    height: 350px;
    background-repeat: no-repeat;
    background-size: 100%;
    opacity:1;
    background-color: #8DE5EF;
    transition: 0.5s;
    margin: 0;
}

.cover1{
    background-image: url("/pics/Cover_Photo.jpg");
    margin: 0;
    padding: 0;
    width: 100%;
    height: 782px;
}

.outer1{
    background-image: url("https://distrokid.imgix.net/http%3A%2F%2Fgather.fandalism.com%2F922845--AB48A5C1-36BD-45E1-806834A6720CCF7C--1637516418900--EFBautox2.jpg?fm=jpg&q=75&w=800&s=18750346958db667754abd6ef9d2ca9c");
}

.outer2{
    background-image: url("https://static.wixstatic.com/media/f1cf04_7477d4e60126461bb1ee6cb1aa43c390~mv2.jpg");
}

.outer3{
    background-image: url("https://static.wixstatic.com/media/f1cf04_7477d4e60126461bb1ee6cb1aa43c390~mv2.jpg");
}

.outer4{
    background-image: url("https://static.wixstatic.com/media/f1cf04_7477d4e60126461bb1ee6cb1aa43c390~mv2.jpg");
}

.outer5{
    background-image: url("https://f4.bcbits.com/img/a1157343705_16.jpg");
}

.outer6{
    background-image: url("https://i1.sndcdn.com/avatars-PyVBkYMVpH3PV7FI-JNonUg-t500x500.jpg");
}

.outer7{
    background-image: url("https://i1.sndcdn.com/artworks-QHH5Iyln1lqsYm0G-hSEzrw-t500x500.jpg");
}

.outer8{
    background-image: url("https://distrokid.imgix.net/http%3A%2F%2Fgather.fandalism.com%2F922845--AD1C5DF9-F324-419F-BB93A3641C8A1B7C--0--15407260--KnowMe.jpg?fm=jpg&q=75&w=800&s=d6158fe191aca10d209a2f8ebafbea39");
}

.outer9{
    background-image: url("https://distrokid.imgix.net/http%3A%2F%2Fgather.fandalism.com%2F922845--F7CE9DD7-F307-42D3-B80462903819A1A1--0--8449581--TungstenAfterburnerArt.jpg?fm=jpg&q=75&w=800&s=3caf58a2dc2bf24afc91dd5030295717");
}

.outer10{
    background-image: url("https://f4.bcbits.com/img/a3715314088_16.jpg");
}

.outer11{
    background-image: url("https://i1.sndcdn.com/artworks-Er46FecnybrVZLyu-xmOhsA-t500x500.jpg");
}

.outer12{
    background-image: url("https://i1.sndcdn.com/artworks-8cZguyzwEW6SWmzG-XtMkgw-t500x500.jpg");
}

.outer13{
    background-image: url("https://distrokid.imgix.net/http%3A%2F%2Fgather.fandalism.com%2F5626532--CD111AF0-941A-48F0-BED6F80463236369--0--2492033--PXL202307122356507992.jpg?fm=jpg&q=75&w=800&s=f5f6f9fed342029726582991e0b06651");
}

.outer:hover {
    opacity:0.5;
    transition: 0.5s;
}

.inner{
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    padding: -5px -5px -5px -5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    margin: 0;
}

.inner:hover{
    opacity: 1;
}

.songsclass{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.songitem{
    margin: 20px 20px 20px 20px;
    padding: 0;
    box-shadow: 10px 10px 0px rgba(255, 184, 209, 0.25);
}

.vidclass{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.viditem{
    display: flex;
    flex-wrap: wrap;
    justify-self: center;
    align-content: center;
}

.vidcontent{
    display:flex;
    flex-wrap: wrap;
    width: 560px;
}

.content{
    display: flex;
    flex-wrap: wrap;
    width: 99%;
    height: 75%;
    clear: both;
    justify-content: center;
}

.itemleft{
    min-width: 50%;
    max-width: 50%;
    margin-right: 2%;
}

.vidwrapper{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.vidwrapperinside{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.itemright{
    min-width: 30%;
    max-width: 40%;
}

iframe{
    box-shadow: 10px 10px 0px rgba(141, 229, 239, 0.25);
}

a{
    color: inherit;
    text-decoration: inherit;
}

body {
    height: 100%;
    font-family: 'Recursive', sans-serif;
    background-color: #3B364E;
    color: #FFB8D1;
    text-align: center;
}

h1 {
    text-shadow: 3px 3px rgba(141, 229, 239, 0.25);
}

h2 {
    text-shadow: 3px 3px rgba(141, 229, 239, 0.25);
}

.mainnav {
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #3B364E;
    box-shadow: 0px 5px 20px rgba(141, 229, 239, 0.25);
    overflow: hidden;
    z-index: 4;
    border-style: solid;
    border-width: 2px;
    border-color: #8DE5EF;
    border-left: 0;
    border-right: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.navli{
    flex-grow: 4;
}

li a {
    text-align: center;
    display: block;
    border-right: 0.5px solid #8DE5EF;
    border-left: 0.5px solid #8DE5EF;
    text-decoration: none;
    padding: 2vh 2vw 2vh 2vw;
    transition: 0.5s;
}

li a:hover{
    background-color: #8DE5EF;
    color: #3B364E;
}

hr {
    width: 99%;
    border-color: #8DE5EF;
    box-shadow: 0px 0px 10px rgba(141, 229, 239, 1);
}

.small-hr{
    width: 60%;
}

.stage{
    position: absolute;
    top: 3vh;
    left: 0;
    margin: 0;
    padding: 0;
}

.blogstage{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.background{
    position: fixed; 
    z-index: 1; 
    background-size: 100%;
    opacity: 0.3;
    font-size: 50%;
    line-height: 1;
    color: #8DE5EF;
    align-self: center;
    align-content: center;
    width: 100%;
    text-shadow: 1px 1px 2px #FFB8D1;
}

.foreground{
    position: relative; 
    z-index: 2;
    top: 0;
}

.infolist {
    list-style: none;
    line-height: 3vh;
}

.info {
    transition: 0.1s;
}

.fullsizebox{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0.8;
}

div {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}  

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}