*
{
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', sans-serif;
    color: black;
}

/* reusable helpers */
.roundedcorner {
    border: 1px solid black;
    border-radius: 25px;
}

.roundedcornernoborder {
    border-radius: 25px;
}

.translucentbackground {
    background-color: rgba(255,255,255,0.6);
}

.nav
 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

     width: 100%;
     height: 50px;

     top: 0;

     position: relative;

     background: linear-gradient(#09556e,#9b9109);

     align-items: center;
     justify-content: center;
 }

 .navlinks
 {
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-right: 5%;
     justify-content: center;
     align-items: center;
 }

 .navlinks a
 {
     color: #fff;
     font-size: 1.4em;
     margin: 0px 20px;
     text-decoration: none;
 }

.navlinks p
 {
     color: #FFCC00;
     font-size: 1.4em;
     margin: 0px 20px;
     text-decoration: none;
 }

 .navlinks a:hover
 {
     color: #FFCC00;
 }

.title {
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    margin-top: 1.5%;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;

    text-align: justify;
    align-items: center;
    justify-content: center;

    /*border: 5px solid red;
    border-radius: 15px;*/
    box-sizing: border-box;
}

.titleh1bold {
    font-size: 1.7em;
    font-weight: bold;
}

.titleh1italic {
    font-size: 0.9em;
    font-style: italic;
    font-weight: normal;
}
.profile {
    width: 8%;
    min-width: 100px;
    margin-right: 0.5%;
    /*border: 5px solid blue;
    border-radius: 15px;*/
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;
}

.profileImage {
    width: 100%;
    height: auto;
    margin: 0px;
    /*border: 5px solid blue;
    border-radius: 15px;*/
    box-sizing: border-box;
}

.profiletext {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    text-align: left;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 91%;
    margin-left: 0.5%;
    /*border: 5px solid yellow;
    border-radius: 15px;*/
    box-sizing: border-box;
}

.songtitle {
    width: auto;
    padding: 15px;
    /*border: 5px solid brown;
    border-radius: 15px;*/
    box-sizing: border-box;
}


.content {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

     width: 90%;

     margin-top: 30px;
     margin-bottom: auto;
     margin-left: auto;
     margin-right: auto;

     text-align: justify;
     align-items: flex-start;
     justify-content: flex-start;

     /*border: 5px solid purple;
     border-radius: 15px;*/
     box-sizing: border-box;
 }

 .textcontent {
     width: auto;
     max-width: 52%;
     display: flex;
     flex-direction: column;

     margin-left: 1.5%;
     justify-content: flex-start;
     text-align: justify;
     align-items: flex-start;

     /*border: 5px solid silver;
     border-radius: 15px;*/
     box-sizing: border-box;
 }

 .textcontent h2 {
     font-size: 1.7em;
     line-height: 1.5;
     font-weight: bold;
 }

 .textcontent p {
     font-size: 1.4em;
     line-height: 1.5;
 }

 .textcontent hr {
     border: 2px solid #fcad03;
     width: 50%;
     align: left;
     border-radius: 100px;
     margin: 3px 0px;
 }

 .verticaldelimiter {
     font-size: 1.3em;
     color: black;
     vertical-align: sub;
 }

 .artwork {
      width: 35%;
      height: auto;
      margin-right: 1.5%;
      margin-left: 10%;

      /*border: 5px solid gold;
      border-radius: 15px;*/
      box-sizing: border-box;
 }

 .player {
     width: auto;
     /*box-sizing: border-box;
     border: 5px solid red;*/
     border-radius: 15px;
 }

 .player, audio, video, .player:focus, video:focus, audio:focus
 {
    outline: none;
    outline-width: 0;
    border: 0;
 }

 .icon-link
 {
     color: #fff;
     margin: 0px 5px;
 }

 .download-on-appstore-icon
 {
     height: 40px;
     width: 120px;
     fill: white;
     transition: all 0.2s ease-in-out;
 }
 .download-icon
 {
     height: 40px;
     width: 40px;
     fill: white;
     transition: all 0.2s ease-in-out;
 }

 .download-icon:hover
 {
     transform:scale(1.2);
 }

 .downloadlinks
 {
     display: flex;
     width: 100%;
     flex-direction: row;

     align-items: center;
     justify-content: flex-end;
 }

 .footer
 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

     width: 100%;
     height: 100px;

     margin-top: 50px;

     position: relative;
     bottom: 0;

     background: linear-gradient(#9b9109,#09556e);
     /*background: linear-gradient(#ff8d85,#ff8d85); valentines*/

     align-items: center;
     justify-content: center;
 }

 .socialicons
 {
     width: 30%;
     display: flex;
     flex-direction: row;

     justify-content: flex-end;
     align-items: center;
 }
 .aboutresonance {
     width: 30%;

     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

     justify-content: center;
     align-items: center;
 }
 .aboutresonance p {
     font-size: 1em;
     color: #fff;
     margin-left: 25px;
 }
 .documentlinks
 {
     width: 40%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

     justify-content: flex-start;
     align-items: center;
 }

 .documentlinks a
 {
     color: #fff;
     font-size: 1.4em;
     margin: 0px 20px;
     text-decoration: none;
 }

 .documentlinks a:hover
 {
     color: #FFCC00;
 }

@media (max-width: 900px) {
    .nav {
        height: 200px;
    }
    .navlinks {
        flex-direction: column;
    }
    .navlinks a {
        text-align: center;
        margin-top: 5px;
        border-radius: 15px;
    }
}