style-big.css

:root {
  --verde-escuro: rgb(3, 107, 82);
  --verde-claro: rgb(47, 193, 140);
  --roxo-escuro: rgb(65, 25, 127);
  --roxo-claro: rgb(137, 88, 163);
  --azul-claro: rgb(0, 213, 226);
  --azul-escuro: rgb(0, 109, 251);
  --cinza-claro: rgb(225, 229, 235);
  --cinza1: rgb(62, 66, 75);
  --cinza2: rgb(40, 42, 47);
  --cinza3: rgb(30, 31, 36);
  --cinza4: rgb(26, 27, 28);
}

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

body {
  background-color: var(--cinza4);
  color: white;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  width: 100vw;
}

header {
  align-items: center;
  align-content: center;
  display: flex;
  justify-content: center;
  padding: 30px 0;
  margin: 0 auto;
}

footer {
  background-color: rgb(24, 24, 24);
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.2rem 0;
}

.title {
  font-size: 25px;
}

.img-logo-title {
  height: 50px;
}

.image-card {
  height: 200px;
  width: 200px;
}

.step {
  height: 250px;
}


.genre, .playlist {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  width: 80%;
  margin: 30px auto;
  flex-wrap: nowrap;
  overflow-x: scroll;
  /* overflow: hidden; */
}

.genre__card, .playlist__card {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 250px;
  min-height: 250px;
  background-color: var(--cinza3);
  margin-left: 1rem;
}

.item-selected {
  background-color: var(--cinza1);
}


.genre::-webkit-scrollbar, .playlist::-webkit-scrollbar {
  display: none;
}

.track {
  padding-bottom: 100px;
}

.track__card {
  background-color: var(--cinza2);
  font-size: 20px;
  padding: 10px 15px;
  margin: 5px;
}

.return-container {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0px;
  background-color: rgb(29, 29, 29);
  width: 100%;
  padding: 0.2rem;
}

.return {
  width: 60px;
  height: 60px;
  background-color: rgb(157, 67, 241);
  border: none;
  outline: none;
  border-radius: 35px;
}


@media screen and (min-width: 1000px){
  
}

/* https://prod.liveshare.vsengsaas.visualstudio.com/join?C85ADF95AE7DBB1704D56A57EDC2C8792B8C */