body { background-color: black; font-family: var(--font-dm-sans); /* Carrega estilo da var em todo o */ } .sidebar{ position:fixed; top: 0; left: 0; bottom: 0; padding: 12px; width: 300px; } .sidebar__navigation{ background-color: var(--bg-sidebar-navigation-color); border-radius: 8px; /* arredondamento da borda*/ } .logo { display: flex; /*disposição dos elementos*/ border-radius: 8px; padding: 16px 0 0 16px; /*recuo sentido horário*/ } .sidebar__navigation .logo img{ width: 80px; } .sidebar nav ul{ margin-top: 20px; padding: 0 20px 10px 20px; } .sidebar ul li{ padding: 10px 0; } .sidebar nav ul li a{ color: #b3b3b3; text-decoration: none; font-weight: 600; font-size: 14px; } .library{ background-color: #121212; border-radius: 8px; display: flex; justify-content: space-between; flex-direction: column; padding: 4px 8px; color:#b3b3b3; font-weight: 600; font-size: 14px; margin-top: 10px; } .library .library__content{ display: flex; justify-content: space-between; } .library .library__button{ display: flex; margin-right: 10px; color:#b3b3b3; background-color: transparent; border: 0px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; text-transform: none; padding: 20px 10px; } .library .library__button .fa{ font-size:20px; font-weight: 300; color:#b3b3b3; margin-right: 10px; padding-right: 8px; } .library .library__content .fa-plus{ margin: 24px 10px } .section-playlist{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; /*distância do justify*/ background-color: #242424; color:#b3b3b3; font-weight: 600; font-size: 14px; margin: 8px 0px; padding: 16px 20px; border-radius: 10px; } .section-playlist .section-playlist__content{ display:flex; flex-direction: column; } .section-playlist__content .text{ padding-bottom: 14px; color: #fff; } .section-playlist__content .title{ font-weight: 700; } .section-playlist__content .subtitle{ font-weight: 500; font-size: 12px; } .section-playlist__content .section-playlist__button{ display: flex; justify-content: center; background-color: #fff; color: #000; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: none; padding: 10px; margin-top: 12px; border: 0px; width: 113px; } .sidebar .cookies{ margin: 25px 20px; } .sidebar .cookies a{ color: #b3b3b3; font-weight: 500; font-size: 10px; text-decoration: none; } .sidebar .cookies a:hover{ /*"animação" quando o usuário passa o mouse em cima do content com hover*/ text-decoration: underline; } .languages .languages__button{ align-items: center; background-color: transparent; border: 1px solid #878787; color: #fff; font-weight: bold; cursor: pointer; width: 170px; margin: 8px; padding: 8px; border-radius: 20px; } .disclaimer-premium{ position: fixed; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to right, rgb(174, 40, 150), rgb(80, 155, 245)); padding: 15px 40px; display: flex; justify-content: space-between; } .disclaimer-premium .text{ flex-shrink: 0; } .disclaimer-premium .disclaimer-premium__title{ color:#fff; text-transform: uppercase; font-weight: 400; font-size: 12px; margin-bottom: 10px; } .disclaimer-premium .disclaimer-premium__subtitle{ color:#fff; font-size: 14px; font-weight: 500; } .disclaimer-premium button{ background-color: #fff; color: #000; font-size: 16px; font-weight: bold; padding: 14px 30px; border: 0px; border-radius: 40px; cursor: pointer; flex-shrink: 0; }