@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: lowercase;
}

body{
    color: #FFF;
    background-color: #000;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

article{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: normal;
    align-content: normal;
}

#inputWrapper{
    flex-grow: 1;
}

#inputWrapper div{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    height: 100%;
}

header, section{
    padding:0;
    margin: 0 10px 10px 10px;
}

header hgroup{
    display: inline-block;
    padding: 2px 20px 2px 0;
    margin: 0;
    vertical-align: middle;
}

header h1,  header h5, header hgroup, section h5, section h3{
    display: inline-block;
    padding: 2px 20px 2px 0;
    margin: 0;
    vertical-align: middle;
}


#results{
    line-height: 1.17em;
}

#volumeContainer{
    /* margin: 0px 50px; */
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
}

#volumeContainer i, #volumeContainer input {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}
#volumeContainer input {
    accent-color: rgb(224, 224, 224);
}

#volumeContainer i{
    font-size: 0.7rem;
    margin-right: 5px;
}

#credits{
    font-size: 0.85rem;
    margin: 0;
    line-height: 0.7em;
}

#baseResult, #sliderResult, #difResult, #credits{
    text-transform: none;
}

#canvas{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

}





.resultYouTried{
    color: rgb(228, 37, 37);
}

.resultAlright{
    color: rgb(221, 101, 21);
}

.resultGood{
    color: rgb(255, 187, 0);
}

.resultGreat{
    color: rgb(20, 202, 50);
}

.resultPerfect{
    color: rgb(28, 109, 230);
}

.resultGod{
    color: rgb(131, 51, 221);
}

.hidden{
    display: none;
}






button{
    display: inline-block;
    outline: 0;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: #fff;
    background: none;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5rem;
    padding: 10px;
    text-align: center;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
button:hover{
    background: rgba(255, 255, 255, 0.13);
}

#waveform{
    font-size: 0.7rem;
    padding: 5px;
    line-height: 15px;
}

#slider {
    accent-color: rgb(161, 161, 161);
    appearance: slider-vertical;
    height: calc(100% - 125px);
    padding: 0 5px;
    margin-top: 25px;

} 


#cc-main {
    color-scheme: dark;

    --cc-bg: #161616;
    --cc-primary-color: rgb(255, 255, 255);
    --cc-secondary-color: #a8a8a8;

    --cc-btn-primary-bg: #5a5a5a;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-hover-bg: #757575;
    --cc-btn-primary-hover-color: #ffffff;

    
    --cc-btn-secondary-bg: #5a5a5a;
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: #272727;
    --cc-btn-secondary-hover-bg: #757575;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: #272727;

    --cc-separator-border-color: #272727;

}

.cc--just-black #cc-main .cm,
.cc--just-black #cc-main .pm {
    border: 1px solid var(--cc-separator-border-color);
}

#helloSection{
    font-size: 0.7rem;
    text-align: center;
}

#helloSection a{
    text-decoration: none;
    color: #fff;
}

#introText {
    font-size: 0.9rem;
    max-width: 685px;
    margin: 10px auto;
}

#introText p {
    margin: 10px;
}

#introText strong{
    font-size: 1.2rem;
    display: block;
}


#introText ul, #introText ol{
    margin: 0 20px;
}

#introText ol > li{
    margin: 20px 0;
}

#introText ul > li{
    margin: 10px 0;
}