:root {
    --color-primary: #3c39e6;
    --color-secondary: #e0ffee;
    --color-tertiary: #2e9fcc;
    --color-button: #29e229;
    --color-button-hover: #2fe51e;
    --color-button-reset: #fc1f1f;
    --color-button-reset-hover: #FB8C00;
    --color-text: #000;
    --color-white: #FFFFFF;

}

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: bold;
}

body {
    height: 100vh;
    background: linear-gradient(to bottom, #2d38d6, #a92323);
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    
}

/* Patrón de rayas diagonales y puntos blancos para el main-content */
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1) 10px,
            transparent 10px,
            transparent 20px
        ),
        radial-gradient(
            circle at 10% 10%,
            rgba(255, 255, 255, 0.3) 2px,
            transparent 2px
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(255, 255, 255, 0.3) 2px,
            transparent 2px
        );
    background-size: 40px 40px, 40px 40px, 40px 40px;
    background-position: 0 0, 20px 20px, 40px 40px;
    opacity: 0.6;
}

/* Banner */
.header-banner {
    flex: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0 0;
    width: 100%;
}

/* Sección de entrada */
.input-section {
    flex: 60%;
    background-color: var(--color-secondary);
    border: 1px solid #000;
    border-radius: 25px 25px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
    border: 5px solid #ffccdd;
    position: relative;
    z-index: 0;
}

.input-section {
    position: relative;
}

/* Patrón de copos de nieve para el fondo del input-section */
.input-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23ffffff" fill-opacity="0.3" d="M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z"/></svg>'); /* Copo de nieve simple */
    background-size: 40px 40px; /* Tamaño del copo */
    opacity: 0.7; /* Transparencia */
    pointer-events: none; /* Permite interactuar con los elementos debajo */
    border-radius: 20px; /* Para que el patrón respete los bordes */
}

/* Títulos */
.main-title {
    font-size: 48px;
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: italic;
    color: var(--color-white);
}

.section-title {
    font-family: "Inter", serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 10px 0;
    text-align: center;
}

/* Contenedores de entrada y botón */
.input-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
}

.input-name {
    width: 100%;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 25px 0 0 25px;
    font-size: 16px;
}

.button-container {
    width: 300px;
    justify-content: center;
}

/* Estilos de entrada de texto */
.input-title {
    flex: 1;
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #333;
    border-right: none;
    border-radius: 25px 0 0 25px;
    font-family: "Merriweather", serif;
    box-shadow: /*0 4px 8px rgba(0, 0, 0, 0.3); */ 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Estilos de botón */
button {
    padding: 15px 30px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    border: 2px solid #000;
    border-radius: 25px;
    box-shadow: /*0 4px 8px rgba(0, 0, 0, 0.3);*/ 0 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.button-add {
    background-color: var(--color-tertiary);
    color: var(--color-white);
    border-radius: 0 25px 25px 0;
}

.button-add:hover {
    background-color: #27AE60;
    transform: translateY(-1px);
}

/* Listas */
ul {
    list-style-type: none;
    color: var(--color-text);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    margin: 20px 0;
}

.result-list {
    margin-top: 15px;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

/* Botón de sortear título */
.button-draw {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 40px;
    color: var(--color-white);
    background-color: var(--color-button);
    font-size: 16px;
}

.button-draw img {
    margin-right: 40px;
}

.button-draw:hover {
    background-color: var(--color-button-hover);
    transform: translateY(-1px);
}

/* Botón de reset */
.button-reset {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 40px;
    color: var(--color-white);
    background-color: var(--color-button-reset);
    font-size: 16px;
}

.button-reset img {
    margin-right: 40px;
}

.button-reset:hover {
    background-color: var(--color-button-reset-hover);
    transform: translateY(-1px);
}