/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* CONFIGURAÇÕES GERAIS E VIBE DO SITE */
body {
    background-color: #0d0d0c;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 20px;
    display: block; /* Ajustado para melhor compatibilidade de fluxo */
}

/* CONTAINER PRINCIPAL (LIMITADOR DE LARGURA) */
.layout-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto; /* Centraliza o site na tela */
    background-color: #141613; 
    border: 3px solid #ff4500; 
    padding: 20px;
    box-shadow: 10px 10px 0px #000;
    box-sizing: border-box;
}

/* RENDERIZAÇÃO DO HEADER */
header {
    text-align: center;
    border-bottom: 6px double #ff4500;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

header h1 {
    color: #ff5722;
    font-family: 'Impact', sans-serif;
    font-size: 3rem;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

header p {
    font-style: italic;
    font-size: 1.2rem;
    margin: 5px 0 0 0;
    color: #dcdcdc;
}

/* CAIXAS CINZAS DO LAYOUT */
.box {
    background-color: #c8d2db;
    color: #1c1c1c;
    padding: 15px;
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #ff4500;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* SEÇÃO DE CIMA (Dois blocos lado a lado usando tabelas para compatibilidade estrutural) */
.top-section {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px 0;
    margin-left: -20px;
    margin-right: -20px;
}

.top-section .box {
    display: table-cell;
    vertical-align: top;
}

/* SEÇÃO DA PLAYLIST */
.playlist-section {
    margin: 25px 0;
    border-top: 2px dashed #ff4500;
    padding-top: 15px;
}

.playlist-title {
    font-family: 'Impact', sans-serif;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.album-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 12px 0; /* Espaçamento entre os quadradinhos */
}

.album-art {
    display: table-cell;
    width: 75px;        /* Define uma largura menor fixa */
    height: 75px;       /* Define uma altura menor fixa */
    background-color: #c8d2db;
    border: 2px solid #fff;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;   /* Esconde o que sobrar da imagem */
}

/* Isso garante que a imagem que você colocar se ajuste perfeitamente ao quadradinho */
.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Faz a imagem preencher o quadrado sem distorcer */
    display: block;

}

/* SEÇÃO DE BAIXO (Layout Colagem) */
.bottom-section {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px 0;
    margin-top: 25px;
}

/* Espaço para a imagem/arte da esquerda (Onde fica o esqueleto) */
.collage-art {
    display: table-cell;
    vertical-align: top;
    background-color: #e5ad23; 
    border: 3px solid #000;
    padding: 20px;
    color: #000;
    font-family: 'Impact', sans-serif;
    font-size: 2rem;
    text-align: center;
    box-shadow: 5px 5px 0px #ff4500;
    box-sizing: border-box;
}

/* Lista de caixas horizontais da direita */
.horizontal-boxes {
    display: table-cell;
    vertical-align: top;
}

.horizontal-box {
    background-color: #c8d2db;
    color: #1c1c1c;
    padding: 20px;
    border: 2px solid #000;
    margin-bottom: 15px;
    box-shadow: 4px 4px 0px #000;
    box-sizing: border-box;
}