/* CSS HEX 
--black-chocolate: #131200ff;
--mantis: #78bc61ff;
--dark-khaki: #c0c781ff;
--camel: #c59b76ff;
--salmon: #e9806eff;
*/

body{
    background-color: rgb(39, 39, 39);
}

.gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}

#tokenSection {
    display: none;
}

#returnSection {
    display: none;
}

#widget {
    background: #f6f3f8;
    border-radius: 3vw;
    width: 100%;
    padding: 1vw;
    font-family: 'Rajdhani', sans-serif;
    aspect-ratio: 20 / 7;
}

.containerYellow {
    border: 1vw solid #85272f;
}

.containerBlue {
    border: 1vw solid #394470;
}

.containerGreen {
    border: 1vw solid #2a6159;
}

#container {
    background: #f6f3f8;
    border-radius: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.tituloYellow {
    border-bottom: 1vw solid #85272f;
    background: #ffdfae;
}

.tituloBlue {
    border-bottom: 1vw solid #394470;
    background: #5f95c7;
}

.tituloGreen {
    border-bottom: 1vw solid #2a6159;
    background: #a8bd95;
}

#titulo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 22%;
    width: 100%;
    border-radius: 2vw 2vw 0 0;
    padding: 0 0 0 1vw;
}

.musiquinhaYellow {
    color: #85272f;
}

.musiquinhaBlue {
    color: #ffffff;
}

.musiquinhaGreen {
    color: #2a6159;
}

#musiquinha {
    letter-spacing: 0.2vw;
    font-weight: 500;
    font-size: 4.5vw;
}

#symbols {
    height: 130%;
    padding-right: 1vw;
}

.expande {
    animation: letter-expand 2s ease forwards;
}

.encolhe {
    animation: letter-collapse 2s ease forwards;
}

#music {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1vw;
    overflow: hidden;
}

#albumImage{
    height: 100%;
    fill: #85272f;
}

#trackInfo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 0 0 5vw;
    overflow: hidden;
}

.yellowTitle {
    background: #ffdfae;
    color: #85272f;
}

.blueTitle {
    background: #8bbde9;
    color: #ffffff;
}

.greenTitle {
    background: #bedfa6;
    color: #2a6159;
}

#trackTitle{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#musicText {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.musicText {
    text-align: center;
    font-size: 9vw;
}

.musicTextoverflow {
    text-align: center;
    font-size: 9vw;
    transform: translateX(150%);
    animation: scroll 15s linear infinite;
    white-space: nowrap;
}

#assets {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60%;
    width: 100%;
}

#play {
    width: 25%;
}

#soundwave {
    width: 75%;
    margin-right: -3vw;
}

.welcomeText{
    font-size:2em;
}

@keyframes scroll {
    from {
      transform: translateX(150%);
    }
    to {
      transform: translateX(-150%);
    }
}

@keyframes letter-expand {
    from {
        letter-spacing: 0.2vw;
    }
    to {
        letter-spacing: 2vw;
    }
}

@keyframes letter-collapse {
    from {
        letter-spacing: 2vw;
    }
    to {
        letter-spacing: 0.2vw;
    }
}