style.css

body {
    font-family: 'poiret one', cursive;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

nav {
    min-height: 80px;
}

main {
    flex: 1 0 auto;
}


footer {
    min-height: 50px;
    text-align: center;
   
}



#logo {
    width: 60px;
    height: 60px;
    position: relative;
    top: 10px;
}

.box {
    text-align: center;
    border-radius: 25px;
    height: 80%;
    margin-top: 30px;
    padding: 20px;       
}
p {    font-family: 'Roboto', sans-serif;
}

iframe {
    border-radius: 10px;
    overflow: hidden;
  }

#playListLoading {
    text-align: center;
    border-radius: 25px;
    padding: 5px 5px;
    height: fit-content;
    width: fit-content;
    justify-content: center;
    margin-top: 30px ;

}

#playList {
    text-align: center;
    border-radius: 25px;
    padding: 5px 5px;
    height: fit-content;
    width: fit-content;
    justify-content: center;
    margin-top: 30px ;

}

#userForecast {
    text-align: center;
    background: #F2DC6D;
    border-radius: 25px;
    padding: 5px 5px;
    height: 200px;
    margin-left: 30px;
}

#spotify-icon {
    width: 30px;
    height: 30px;
    position: relative;
    top: 10px;
}



/* ====================THEMES==================== */


/* Default Theme: */

main.default {
    background: #B0B7BF;
}

.prompt.default {
    background: #64798C;
}

nav.default,
footer.default {
    background: #022340;
}

.box.default {
    background: #F2DC6D;
}

.default button {
    background: #022340;
    color: #B0B7BF;
}

.progress.default {
    background: #022340;
}

.default .indeterminate {
    background: #F2DC6D;
}


/* Few Clouds Theme: */

main.fewClouds {
    background: url(images/fewClouds.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.fewClouds,
footer.fewClouds {
    background: #0583F2;
}

.box.fewClouds {
    background: #E2DAFEDD;
}

.prompt.fewClouds {
    background: #83B8FEDD;
}

.fewClouds button {
    background: #0186FC;
    color: #E2DAFE;
}

.fewClouds.progress {
    background: #E2DAFE;
}

.fewClouds .indeterminate {
    background: #0186FC;
}

/* Sunny Theme: */

main.sunny {
    background: #034AA6;
    background: url(images/sunny.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.sunny,
footer.sunny {
    background: #59A8D9;
}

.box.sunny {
    background: #F2CB05DD;
    color: black;
}

.prompt.sunny {
    background: #0477BFDD;
}

.sunny button {
    background: #0477BF;
}

.sunny.progress {
    background: #59A8D9;
}

.sunny .indeterminate {
    background: #F2CB05;
}


/* Rain Theme:  */

main.rain {
    background: #F0F2F2;
    background: url(images/rain.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.rain,
footer.rain {
    background: #395059;
}

.box.rain {
    background: #2B4032DD;
    color:#F0F2F2;
}

.prompt.rain {
    background: #949FA6DD;
}

.rain button {
    background: #949FA6;
    color: #2B4032;
}

.rain.progress {
    background: #F0F2F2;
}

.rain .indeterminate {
    background: #2B4032;
}


/* /* Partly Cloudy Theme:  */

main.partlyCloudy {
    background: #6387A6;
    background: url(images/partlyCloudy.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.partlyCloudy,
footer.partlyCloudy {
    background: #024059;
    
}

.box.partlyCloudy {
    background: #BABDBFDD;
}

.prompt.partlyCloudy {
    background: #023859DD;
    color: white;
}

.partlyCloudy button {
    background: #024059;
    color: #BABDBF;
}

.partlyCloudy.progress {
    background: #BABDBF;
}

.partlyCloudy .indeterminate {
    background: #6387A6;
}


/* thunderstorm theme */

main.thunderstorm {
    background: #A692A2;
    background: url(images/thunderstorm.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.thunderstorm,
footer.thunderstorm {
    background: #0D0D0D;
}

.box.thunderstorm {
    background: #171726DD;
    color:#E2DAFE;
}

.prompt.thunderstorm {
    background: #534A59DD;
    color:#E2DAFE;
}

.thunderstorm button {
    background: #E2DAFE;
    color: #171726;
}

.thunderstorm.progress {
    background: #171726;
}

.thunderstorm .indeterminate {
    background: #E2DAFE;
}



/* mist theme */
main.mist {
    background: #3E5956;
    background: url(images/mist.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.mist,
footer.mist {
    background: #BFA89B;
}

.box.mist { 
    background: #BFAF8FDD;
    
}

.prompt.mist {
    background: #3E5956DD;
}

.mist button {
    background: #3E5956;
    color: #BFAF8F;
}

.mist.progress {
    background: #142626;
}

.mist .indeterminate {
    background: #F2DAC4;
}

 /* Snow Theme:  */

main.snow {
    background: #7C92A6;
    background: url(images/snow.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

nav.snow,
footer.snow {
    background: #454E59;
}

.box.snow {
    background: #DCE8F2DD;
}

.prompt.snow {
    background: #BACBD9DD;
}

.snow button {
    background: #7C92A6;
    color: #0D0D0D;
}

.snow.progress {
    background: #0D0D0D;
}

.snow .indeterminate {
    background: #7C92A6;
}