:root{
    --bg: #000;
    --text: #e8ded5;
    --muted: #9a8a80;
    --dot: #7bd62f;
    --pumpkin-skin-1: #f6ad60;
    --pumpkin-skin-2: #f18b36;
    --pumpkin-skin-3: #f38b36;
    --pumpkin-skin-4: #c95927;
    --pumpkin-skin-5: #c95927;
    --pumpkin-skin-6: #97441a;
    --pumpkin-stalk-1: #967532;
    --pumpkin-stalk-2: #7b6200;
    --light-flicker-bg-1:#967532;
    --light-flicker-bg-2: #D6A647;
}

*{ box-sizing: border-box;}

.pumpkin{
    position:relative;
    width: 120px;
    height:100px;
    background-color: #f18b36;
    border-radius: 70px;
    margin: 5rem auto 3rem;
    background-image: linear-gradient(
        to right, var(--pumpkin-skin-1)50%,
        var(--pumpkin-skin-2)50%
    );
    box-shadow:-30px 0 0 0 var(--pumpkin-skin-3),
    -50px 0 0 0 var(--pumpkin-skin-3),
    30px 0 0 0 var(--pumpkin-skin-5),
    50px 0 0 0 var(--pumpkin-skin-6);

    transform:scaleY(1.5);
}

.pumpkin:before{
    content:"";
    position:absolute;
    width:11px;
    height: 25px;
    top: -25%;
    left:41%;
    background-image:linear-gradient(-70deg, var(--pumpkin-stalk-1)50%, transparent 50%);
}

.pumpkin:after{
    content: "";
    position: absolute;
    width:11px;
    height:25px;
    top:-25%;
    left:50%;
    background-color: var(--pumpkin-stalk-2);
}

.eye{
    width:25px;
    height:30px;
    background: var(--light-flicker-bg-1);
    position: absolute;
    top:10px;
    right: 60%;
    border-radius: 100% 0 0 50%;
    box-shadow: inset 3px 5px 0 rgba(0,0,0,0.2);
    transform: rotate(-15deg);

}

.eye:after{
    width:25px;
    height:30px;
    background: var(--light-flicker-bg-1);
    position: absolute;
    top:10px;
    right:60%;
    border-radius:100% 0 0 50%;
    box-shadow: inset 3px 5px 0 rgba(0,0,0,0.2);
    transform: translateX(63px) scaleX(-1) rotate(-30deg) translateY(3px);
    content:"";

}

.mouth{
    position:absolute;
    width:90px;
    height:30px;
    background-color:var(--light-flicker-bg-1);
    top:55%;
    left:50%;
    transform: translateX(-50%);
    border-radius: 0 0 30px 30px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);

}

.mouth:before{
    content:"";
    position:absolute;
    top:0;
    left:24%;
    width:1px;
    height:1px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:13px solid var(--pumpkin-skin-1);

}

.mouth:after{
    content:"";
    position:absolute;
    top:0;
    right:24%;
    width:1px;
    height:1px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:13px solid var(--pumpkin-skin-2);
}

.mouth{
    animation: laugh 0.7s infinite, flicker 3s infinite;

}

.eye, .eye:after{
    animation:flicker 3s infinite;
}

@keyframes flicker{
    0%{
        background: var(--light-flicker-bg-1);
    }
    20%{
        background: var(--light-flicker-bg-2);
    }
    30%{
        background: var(--light-flicker-bg-1);
    }
    50%{
        background:var(--light-flicker-bg-1);
    
    }
    60%{
        background: var(--light-flicker-bg-1);

    }
    95%{
        background: var(--light-flicker-bg-1);
    }
}

@keyframes laugh{
    50%{
        height:1.5rem;
    }
}

html, body{
    height:100%;
}

body{

    margin:0;
    background:var(--bg);
    color: var(--text);
    font-family:'Courier New', Courier, monospace;
    font-size: 18px;
    line-height: 1.4;
    padding: 0 1rem;
    display:flex;
    flex-direction:column;

}

body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family:'Courier New', Courier, monospace;
    font-size:18px; 
    line-height:1.4;
    padding: 0 1rem;
    display:flex;
    flex-direction: column;
}

footer{
    text-align: center;
    padding: 1.5rem; color:var(--muted);
}

footer p{
    margin:0;
}

a{ color: var(--dot); }
a:hover{ color: var(--text);}

#stars{ position: fixed; top: 0; left:0; z-index: -1;}

main{ max-width: 40rem; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; min-width:0;}
.home { text-align: center; }

.site_header { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.5rem 0;}
nav a{ margin-right: 1rem; }

nav{
    display:flex;
    justify-content: center;
    gap:1rem;
}

nav a{
    margin-right:0
}

.sub_title { color: var(--muted); }

.project_list { list-style: none; padding: 0; margin:0; }
.project_list p { color: var(--muted); margin: 0; }

.box {
    border: 1px solid var(--dot);
    padding: 1rem 1.5rem;
    max-width: 24rem;
    margin: 2rem auto 0;
    text-align: left;
}

.box h2{margin: 0 0 0.25rem; text-align: center; }
.box .sub_title{ text-align: center; margin-top: 0; }
.box hr{ border:0; border-top: 1px solid var(--dot); margin: 1rem 0;}
.box p { margin: 0.5rem 0;}

#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
}

#gallery button { padding: 0; border: 0; background: none; cursor: pointer; }
#gallery img { width: 100%; height : 10rem; object-fit: cover; display: block; }

#popup { background: #1a121a; color: var(--text); border: 0; max-width: 90vw;}
#popup img { max-width: 100%; max-height: 70vh; display: block; margin: 0.5rem auto; }
#popup::backdrop { background : rgba(0,0,0,0.85); }
#contact_form label { display: block; margin: 1rem 0 0.25rem; }
#contact_form input,
#contact_form textarea {
    width: 100%;
    padding: 0.4rem;
    background: #1a121a;
    color: var(--text);
    border: var(--text);
    border: 1px solid var(--muted);
    font: inherit;
} 

button { font: inherit; }
#contact_form button { margin-top: 1rem; }
.hidden {display: none;}

#spooky {
    display: flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

#trick_treat {
    background:none;
    border: 1px solid var(--dot);
    color: var(--dot);
    font: inherit;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

#trick_treat:hover {
    background: var(--dot);
    color: #000;

}

body.spooky::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:3;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0)30%, rgba(15,90,10,0.85)100%);
}