:root {

    --bg-color: #c79e52;

    --container-bg: #fef9e7;

    --border-color: #282828;

    --text-color-dark: #282828;

    --text-color-light: #333;

    --text-color-muted: #666;

    --btn-bg: #D50100;

    --btn-text: #FFD700;

    --btn-hover-bg: #5a0000;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

@font-face {

    font-family: 'Stamp Press', 'Times New Roman';

    /* src: url("fonts/StampPressRegular.woff2") format("woff2"); */

    font-weight: normal; 

    font-style: italic; 

}

body::before {

    content:"";

    position: fixed;

    top:0; left:0; right:0; bottom:0;

    pointer-events:none;

    z-index:999;

    background: radial-gradient(circle at center, rgba(255,255,255,0) 50%, rgba(0,0,0,0.30) 100%);

}

body {

    font-family: 'Stamp Press', 'Times New Roman';

    background-color: var(--bg-color);

    min-height: 100vh;

    color: var(--text-color-light);

    padding: clamp(10px, 3vw, 20px);

}

.container {

    max-width: 1024px;

    margin: 0 auto;

    background: var(--container-bg);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    padding: clamp(20px, 5vw, 40px);

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 69, 19, 0.02) 2px, rgba(139, 69, 19, 0.02) 4px),

        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 69, 19, 0.015) 2px, rgba(139, 69, 19, 0.015) 4px),

        radial-gradient(ellipse at 20% 30%, rgba(210, 180, 140, 0.3) 0%, transparent 50%),

        radial-gradient(ellipse at 80% 70%, rgba(222, 184, 135, 0.25) 0%, transparent 50%),

        radial-gradient(circle at 15% 25%, rgba(139, 69, 19, 0.08) 0%, transparent 1%),

        radial-gradient(circle at 75% 15%, rgba(160, 82, 45, 0.06) 0%, transparent 0.8%),

        radial-gradient(circle at 85% 45%, rgba(139, 69, 19, 0.07) 0%, transparent 1.2%),

        linear-gradient(to right, rgba(139, 69, 19, 0.15) 0%, transparent 5%, transparent 95%, rgba(139, 69, 19, 0.15) 100%),

        linear-gradient(to bottom, rgba(139, 69, 19, 0.15) 0%, transparent 5%, transparent 95%, rgba(139, 69, 19, 0.15) 100%);

    pointer-events: none;

    z-index: 1;

}

.container::after {

    content:"";

    position: absolute;

    inset: 0;

    pointer-events: none;

    top:0; left:0; right:0; bottom:0;

    z-index:1000;

    filter: grayscale(0.7) contrast(1.3);

    background: url("imgs/paper.jpg") repeat;

    background-repeat: repeat;

    mix-blend-mode: multiply;

    opacity: 0.7;

}

.container > * {

    position: relative;

    z-index: 2;

}

.header {

    text-align: center;

    margin-bottom: clamp(15px, 3vw, 25px);

    border-bottom: 6px solid #282828;

    padding-bottom: clamp(15px, 3vw, 20px);

    position: relative;

}

.header-icons {

    display: flex;

    justify-content: center;

    gap: clamp(10px, 2vw, 20px);

    margin-top: clamp(15px, 3vw, 20px);

    flex-wrap: nowrap;

}

@keyframes float-rotate-right {

    0% { transform: translateY(0px) rotate(0deg); }

    50% { transform: translateY(-10px) rotate(5deg); }

    100% { transform: translateY(0px) rotate(0deg); }

}

@keyframes float-rotate-left {

    0% { transform: translateY(0px) rotate(0deg); }

    50% { transform: translateY(-10px) rotate(-5deg); }

    100% { transform: translateY(0px) rotate(0deg); }

}

@keyframes float-vertical {

    0% { transform: translateY(0px); }

    50% { transform: translateY(-10px); }

    100% { transform: translateY(0px); }

}

.header-icon {

    width: clamp(80px, 15vw, 180px);

    height: clamp(80px, 15vw, 180px);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));

    transition: transform 0.3s ease-in-out;

}

.header-icon.animate-right {

    animation: float-rotate-right 4s ease-in-out infinite;

}

.header-icon.animate-left {

    animation: float-rotate-left 4s ease-in-out infinite;

}

.header-icon.animate-vertical {

    animation: float-vertical 3s ease-in-out infinite;

}

.header-icon.sole { background-image: url('imgs/sole.png'); }

.header-icon.omou { background-image: url('imgs/omou.png'); }

.header-icon.mano { background-image: url('imgs/mano.png'); }

.header-icon.uomo { background-image: url('imgs/uomo.png'); }

.header-icon.luna { background-image: url('imgs/luna.png'); }

.header h1 {

    color: var(--text-color-dark);

    font-size: clamp(1.8rem, 5vw, 3.5rem);

    margin-bottom: clamp(10px, 2vw, 15px);

    font-weight: normal;

    letter-spacing: 2px;

}

.header p {

    color: var(--text-color-light);

    margin-bottom: clamp(15px, 3vw, 20px);

    font-size: clamp(0.9rem, 2vw, 1rem);

    line-height: 1.4;

    font-style: italic;

}

.calculator-section {

    background: var(--bg-color);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    padding: clamp(15px, 3vw, 25px);

    margin-bottom: clamp(15px, 3vw, 25px);

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.calculator-section h2,

.results-section h2 {

    color: var(--text-color-dark);

    font-size: clamp(1.5rem, 4vw, 2rem);

    margin-bottom: clamp(15px, 3vw, 25px);

    font-weight: normal;

    border-bottom: 6px solid var(--border-color);

    padding-bottom: 10px;

}

.form-group {

    margin-bottom: clamp(15px, 3vw, 20px);

}

.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: bold;

    color: var(--text-color-dark);

    font-size: clamp(1.2rem, 3vw, 1.5rem);

}

.form-group input,

.form-group select {

    width: 100%;

    padding: clamp(10px, 2vw, 12px) clamp(12px, 3vw, 15px);

    border: 3px solid var(--border-color);

    filter: url(#noise);

    background: var(--container-bg);

    font-size: clamp(1.2rem, 3vw, 2rem);

    font-family: 'Stamp Press','Times New Roman';

    color: var(--text-color-light);

    box-shadow: 0 2px 4px rgba(0,0,0,0.15);

}

.form-group input:focus,

.form-group select:focus {

    outline: none;

    background: #fff;

}

.form-group small {

    color: var(--text-color-muted);

    font-size: clamp(0.85rem, 2vw, 1rem);

    font-style: italic;

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(15px, 3vw, 20px);

}

.form-row-date {

    display: grid;

    grid-template-columns: clamp(80px, 15vw, 120px) 1fr clamp(100px, 18vw, 150px);

    gap: clamp(10px, 2vw, 15px);

    align-items: end;

}

.form-info {

    text-align: center;

    margin-top: -10px;

    margin-bottom: clamp(15px, 3vw, 20px);

}

.form-info small {

    color: var(--text-color-muted);

    font-size: clamp(0.85rem, 2vw, 1rem);

    font-style: italic;

}

.calculate-btn {

    background: var(--btn-bg);

    color: var(--btn-text);

    padding: clamp(10px, 2vw, 12px) clamp(25px, 5vw, 35px);

    border: 3px solid var(--border-color);

    filter: url(#noise);

    font-size: clamp(1.1rem, 3vw, 1.4rem);

    font-weight: bold;

    cursor: pointer;

    display: block;

    margin: clamp(20px, 4vw, 25px) auto;

    font-family: 'Stamp Press','Times New Roman';

    letter-spacing: 1px;

    transition: background 0.3s;

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.calculate-btn:hover {

    background: var(--btn-hover-bg);

}

.results-section {

    background: var(--container-bg);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    padding: clamp(15px, 3vw, 25px);

    margin-top: clamp(15px, 3vw, 25px);

    display: none;

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.results-section.show {

    display: block;

}

.result-card,

.calculation-steps,

.tavola-info,

.info-box {

    background: var(--bg-color);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    padding: clamp(15px, 3vw, 20px);

    margin: clamp(10px, 2vw, 15px) 0;

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.tavola-info {

    text-align: center;

    border: 6px solid var(--border-color);

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.result-card h3,

.calculation-steps h3,

.tavola-info h3,

.info-box h3 {

    color: var(--text-color-dark);

    margin-bottom: clamp(10px, 2vw, 15px);

    font-weight: normal;

    font-size: clamp(1.2rem, 3vw, 1.5rem);

}

.tavola-info p,

.info-box p {

    line-height: 1.6;

    font-size: clamp(0.9rem, 2vw, 1rem);

}

.result-numbers {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: clamp(8px, 2vw, 10px);

    margin: clamp(10px, 2vw, 15px) 0;

}

.result-card-footer {

    text-align: center;

    color: #666;

    margin-top: clamp(10px, 2vw, 15px);

    font-size: clamp(0.85rem, 2vw, 1rem);

}

.number-box {

    width: clamp(70px, 12vw, 100px);

    height: clamp(70px, 12vw, 100px);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    background: var(--container-bg);

    color: var(--text-color-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: bold;

    box-shadow: 0 4px 6px rgba(0,0,0,0.2);

}

.calculation-steps ol {

    padding-left: clamp(15px, 4vw, 25px);

}

.calculation-steps li {

    margin-bottom: 10px;

    line-height: 1.6;

    font-size: clamp(0.9rem, 2vw, 1rem);

}

.calculation-steps ul {

    margin-left: clamp(15px, 3vw, 20px);

    margin-top: 10px;

}

strong {

    color: var(--text-color-dark);

    font-weight: bold;

}

em {

    font-style: italic;

    color: var(--text-color-muted);

}

.info-box-margin {

    margin: clamp(20px, 4vw, 25px) 0;

}

.giuliano-box {

    background: var(--container-bg);

    border: 3px solid var(--border-color);

    filter: url(#noise);

    padding: clamp(15px, 3vw, 20px);

    margin-top: clamp(10px, 2vw, 15px);

}

.giuliano-label {

    display: flex;

    align-items: center;

    cursor: pointer;

    font-size: clamp(1rem, 2.5vw, 1.2rem);

}

.giuliano-checkbox {

    width: clamp(20px, 4vw, 25px);

    height: clamp(20px, 4vw, 25px);

    margin-right: clamp(10px, 2vw, 15px);

    cursor: pointer;

    flex-shrink: 0;

}

.giuliano-description {

    margin-top: clamp(10px, 2vw, 15px);

    font-size: clamp(0.85rem, 2vw, 0.95rem);

    color: var(--text-color-muted);

    font-style: italic;

}

/* Stili per la checkbox personalizzata */

input[type="checkbox"] {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    width: clamp(20px, 4vw, 25px);

    height: clamp(20px, 4vw, 25px);

    border: 3px solid var(--border-color);

    filter: url(#noise);

    background-color: var(--container-bg);

    cursor: pointer;

    position: relative;

    top: 6px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.15);

}

input[type="checkbox"]:checked {

    background-color: var(--border-color);

}

input[type="checkbox"]:checked::after {

    content: '✔';

    color: var(--container-bg);

    font-size: clamp(16px, 3vw, 20px);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.easter-egg {

    position: fixed;

    top: 20%;

    left: 50%;

    transform: translateX(-50%);

    background-color: var(--btn-bg);

    color: var(--btn-text);

    padding: clamp(15px, 3vw, 20px) clamp(25px, 5vw, 40px);

    border: 6px solid var(--border-color);

    filter: url(#noise);

    font-size: clamp(1.1rem, 3vw, 1.4rem);

    z-index: 9999;

    animation: fadeInDown 2s ease-in-out forwards;

    font-family: 'Stamp Press', 'Times New Roman';

    box-shadow: 0 4px 6px rgba(0,0,0,0.3);

    max-width: 90%;

    text-align: center;

}

@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translate(-50%, -100%);

    }

    to {

        opacity: 1;

        transform: translate(-50%, 0);

    }

}

@keyframes fadeOutUp {

    from {

        opacity: 1;

        transform: translate(-50%, 0);

    }

    to {

        opacity: 0;

        transform: translate(-50%, -100%);

    }

}

.easter-egg.fade-out {

    animation: fadeOutUp 2s ease-in-out forwards;

}

.error-message {

    background: #ffebee;

    color: #c62828;

    padding: clamp(10px, 2vw, 15px);

    border: 3px solid #c62828;

    margin: clamp(10px, 2vw, 15px) 0;

    border-radius: 0;

    font-size: clamp(0.9rem, 2vw, 1rem);

}

/* Media query per dispositivi molto piccoli */

@media (max-width: 480px) {

    body {

        padding: 10px;

    }

    

    .container {

        border-width: 4px;

    }

    

    .header-icons {

        gap: 8px;

    }

    

    .header-icon {

        width: 60px;

        height: 60px;

    }

    

    .form-row-date {

        grid-template-columns: 1fr;

    }

    

    .calculator-section,

    .results-section,

    .result-card,

    .calculation-steps,

    .tavola-info,

    .info-box {

        border-width: 4px;

    }

}

/* Media query per tablet */

@media (min-width: 481px) and (max-width: 768px) {

    .form-row-date {

        grid-template-columns: 100px 1fr 120px;

    }

}

/* Media query per desktop */

@media (min-width: 769px) {

    .form-row {

        grid-template-columns: 1fr 1fr;

    }

}