/* Stylesheet by Noah Sisson and Nathan Porter

      |\      _,,,---,,_
ZZZzz /,`.-'`'    -.  ;-;;,_
     |,4-  ) )-,_. ,\ (  `'-'
    '---''(_/--'  `-'\_) 
    
    "Me"
    - Nathan

*/
/* 
code for different viewports
@media only screen and (max-width: ???px){}
*/

/* styles for main elements */

body {
    background-color: #232c35;
    margin-right: 100px;
    margin-left: 100px;
}

h2 {
    color: #ffffff;
    margin-left: 1em;
    padding: .5em;
    border-radius: 5px;
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style: normal;
}

i {
    color: #ffffff;
    font-size: 2em;
    margin-top: .25em;
    margin-right: .25em;
    margin-left: .25em;
}

label {
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style: normal;
}

a {
    text-decoration: none;
} a:active {
    color: #ffffff;
}

/* styles for nav bar flex container and flex items */

/* top box is a flex container that has moth the nav bar and banner image */
.topBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* aligns and places audio visualizer image within topBox */
.bannerImg {
    position: relative;
    margin-top: -250px;
    margin-left: 2.5%;
    max-width: 95%;
    z-index: -1;
    height: 100%;
}

/* the flexbox that contains the nav bar and everythin in it */
.flexContainerNav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #12171b;
    color: #ffffff;
    margin-top: -8px;
    position: fixed;
    z-index: 2;
    width: 100%;
}

/* button classes for 3 buttons in nav bar */
.btn {
    margin-left: 50px;
    border-radius: 30px;
    height: 3.3em;
    align-self: center;
}.btn a i:hover {
    color: #12171b;
    background-color: #ffffff;
}.btn a{
    color: #ffffff;
    display: block;
    width: 50px;
    height: 50px;
    padding:0;
    margin:0;
}
.btn a i{
    border-radius: 50px;
    padding: 10px;
    margin-top: -1px;
    margin-left: 5px;
    margin-right: 5px;
}


/* 'flexHeader' is the class for the flebox item logo image (not there yet)*/
.flexHeader {
    display: flex;
    justify-content: center;
    flex-grow: 0;
    flex-direction: row;
    width: auto;
}

/* search Bar in nav bar*/
.flexSearch {
    flex-grow: 1;
    text-align: center;
}.flexSearch input{
    margin: 1em;
}.flexSearch [list]::-webkit-list-button,
.flexSearch [list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* class that styles input */
input[type=text], select, textarea {
    background-color: #3754BE;
    color: #edfdff;
    border-radius: 5px;
    padding: .75em;
    border: none;
    width: 80%;
    text-align: left;
    font-style: italic;
    font-size: 1.25em;
}input[type=text]::placeholder{
    color: #ffffff;
}

/* style specifies how big the spacer divs are */
.spacer {
    height: 40vh;
}.spacer2 {
    height: 50vh;
}
/**/

/* styles for the main section */

/* master div for the two side-by-side sections (scroller and filter search) */
.mainDiv {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-top: -250px;
}

/* div that contains collections and popular sounds */
.filterdpop {
    display: flex;
    flex-direction: column;
    background-color: #12171b;
    flex-basis: 67%;
    border-radius: 5px;
    max-width: 67%;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 75px;
}.filterdpop h1 {
    padding-left:1em;
    font-size: 2em;
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: left;
}

/* div that contains h1 tags in filterdpop */
.h1Container {
    width: 100%;
    text-align: left;
    color: #ffffff;
}

/* flexbox container for horizontal scroller */
.collectionsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 95%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: grey #12171b;
}.collectionsContainer2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 95%;
    flex-wrap: wrap;
    grid-row-gap: 10px;
}

.audioList {
    flex-basis: 48.5%;
    border-radius: 5px;
    margin: 5px;
    flex-wrap: nowrap;
}


/* flex item inside scroller */
.flexSoundbox {
    background-color: #3754BE;
    margin: 1em;
    flex-basis: 10em;
    text-align: center;
    border-radius: 5px;
    height: 10em;
    min-width: 10em;
}.flexSoundbox i {
    font-size: 50pt;
    text-align: center;
    padding-bottom: .2em;
    color: #ffffff;
}.flexSoundbox h2{
    color: #ffffff;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 15pt;
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style:italic;
}
.flexSoundbox h1{
    color: #ffffff;
}
.flexSoundbox a {
    text-decoration: none;
}
/* div that contains filter section */
.filterdpop2 {
    background-color: #12171b;
    flex-basis: 33%;
    border-radius: 5px;
    padding: 1em;
}.filterdpop2 h1 {
    color: #ffffff;
    padding: 0 1em 1em 1em;
    text-align: center;
    margin: 0;
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style: normal;
}.filterdpop2 label {
    color: #ffffff;
}

.audioListSub1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    border-radius: 5px;
    text-align: left;
}.audioListSub2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    text-wrap: none;
    flex-wrap: nowrap;
}.audioListSub2 i{
    font-size: 25pt;
}.audioListSub2 h2{
    text-decoration: none;
    margin:0;
}

.switchBtn {
    color: #ffffff;
} .switchBtn:hover {
    color: #c2c2c2;
}

.audioListSwitch {
    flex-basis: 48.5%;
    border-radius: 5px;
    margin: 5px;
    flex-wrap: nowrap;
}

/* flexbox for wrapping filter buttons */
.filtersContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1em;
    gap: 5px;
}

/* flex item for filtersContainer */
.filterButton {
    background-color: #1f2b5d;
    color: #edfdff;
    border-radius: 25px;
    padding: 5px;
    width: auto;
    padding-right: .5em;
    padding-bottom: .5em;
    border: solid #ffffff 1px;
}.filterButton h3 {
    font-size: 15pt;
    margin:0;
    padding: .25em;
    font-family: "asap", sans-serif;
    font-weight: 600;
    font-style: normal;
}.filterButton:hover {
    background-color: #ffffff;
    color: #1f2b5d;
}

/* div that contains search bar in filters section */
.flexFilterSearch {
    display: flex;
    justify-content: center;
}

.flexFilterSearch input[type=text], select, textarea {
    background-color: #3754BE;
    color: #edfdff;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: .5em;
    border: none;
    width: 80%;
    text-align: left;
    font-style: italic;
}

.spacer a{
    color: #232c35;
}

/* end styles for main section */

/* Styles for about us section */



/*
MOBILE STYLES BEGIN
*/
@media only screen and (max-width:690px) {
    .topBox {
        display: none;
    }
}