:root {
    --bodyfont: sans-serif;
    --headerfont: serif;
    --titlefont: serif;

    --pagebg: url(/assets/backgrounds/black-thread-light.png) #945600;

	--boxbg:#fcf0e0;
	--color:#1f0d04;
	--headers:#1f0d04;
	
	--link:#621B00;
	--linkhover:#C75000;

    --titlecolor:#fcf0e0;

	--sidebarbg: rgb(0,0,0,0.3);
	--menubg:#2F1000;
	--menucolor:#df932a;
    --menubghover:#2F1000;
    --menucolorhover:#fbc171;
    --menuborder:#621B00;
	
	--formbg:#f1dec4;
	--formcolor:#621B00;
	
	--detailsbg:#f1dec4;
	--hr:#621B00;

}

* { margin: 0; padding: 0; transition:background 0.5s ease, color 0.5s ease; }
img { margin:2px; max-width: 100%; height:auto; }

body { 
    background: var(--pagebg);
    color:var(--color);
    font: 1rem sans-serif; 
    letter-spacing:.5px;
}



#container {
    display:flex;
    flex-wrap:wrap;
}

blockquote {
	padding-left:30px;
	font-family:serif;
}

/* MENU */

#sidebar-container {
    flex: 1 1 calc(10% - 20px);
    min-width: 150px;
    box-shadow:1px 1px 3px rgb(0,0,0,0.5);
    background:var(--sidebarbg);
}

#sidebar {
    position:sticky;
    width: calc(100% - 20px);
    padding:10px;
    text-align:center;
    font:1.2rem var(--headerfont);
    top:10px;
}


.door-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* always 2 doors per row */
  gap: 2rem;
  max-width: 700px;
  width: 90%;
  margin: 0 auto;
}

/* Door style */
.door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 200px; /* stay tall like a door */
  background: linear-gradient(to bottom, #3c2f2f, #1a0d0d);
  border: 4px solid #000;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  color: #eee;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* "Door knob" */
.door::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: gold;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Hover: subtle spooky effect, but keep door shape */
.door:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 200, 100, 0.4);
}


/* Hover effect: creak open */
.door:hover {
  transform: rotateY(-15deg) scale(1.05);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.7);
}


/* HEADER */

#main-header {
    font: 1.5em var(--titlefont);
    color: var(--titlecolor);
    font-style: italic;
	font-size: 1.5rem;
	margin-bottom:10px;
  text-shadow: 0 0 10px #ff6600;
    font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* CONTENT */

main {
    padding:10px;
    display:flex;
    flex-wrap:wrap;
    flex: 1 1 calc(85% - 20px);
}

main section, #footer {
    padding:15px;
    margin:12px;
    background: var(--boxbg);
    box-shadow:1px 1px 1px rgb(0,0,0,0.5);
}


#footer {
    text-align:center;
    margin-top:20px;
    flex: 1 1 100%;
    padding:15px;
    background: var(--boxbg);
    box-shadow:1px 1px 1px rgb(0,0,0,0.5);
}

main a {
    color:var(--link);
}

main a:hover, main a:focus {
    color: var(--linkhover);
}

main a img:hover, main a:focus img {
    opacity:0.7;
}

main p {
    margin:10px 0px 10px 0px;
    line-height:1.4;
}

main h1 {
    font:2em var(--headerfont);
    margin:5px 0 5px 0;
    color:var(--headers);
	font-size: 2.5rem;
  text-shadow: 0 0 10px #ff6600;
    font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

main h2 {
    margin:10px 0 10px 0;
    font:1.7em var(--headerfont);
    color:var(--headers);
}

main h3 {
    margin:5px 0 5px 0;
    font: 1.4em var(--headerfont);
    color:var(--headers);
}

main h4 {
    font:1.2em var(--headerfont);
    margin:5px 0 5px 0;
    color:var(--headers);
}

main input, textarea, select, button { 
    background: var(--formbg);  
    color: var(--formcolor);
    font: 1rem var(--bodyfont); 
    border: 1px solid var(--hr); 
    padding: 5px; 
    margin: 5px;
}

main ul, ol { 
    list-style-position: outside;
}

main li {
    margin:5px 0 5px 0;
    line-height:1.4;
    margin-left: 30px;
}

main summary {
    cursor:pointer;
    margin: 5px 0px 5px 0px;
}

main details {
    padding:8px;
    background:var(--detailsbg);
    margin:5px 0 5px 0;
    border-radius:5px;
}

main hr {
    border:0.5px solid var(--hr);
    margin:20px;
}


/* FLEX AND GRID */

.flexcontainer {
    display:flex;
    flex-wrap:wrap;
    margin:auto;
}

.full { flex: 1 1 calc(100% - 30px);}
.half { flex: 1 1 calc(50% - 55px); }
.third { flex: 1 1 calc(33% - 55px); }
.twothird { flex: 1 1 calc(66% - 55px); }
.quarter { flex: 1 1 calc(25% - 60px); }
.threequarter { flex: 1 1 calc(75% - 55px); }

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    margin:auto;
}

@media screen and (max-width: 1024px) {    
    main {
        padding:0;
        flex: 0 0 100%;
        display:block;
    }

    .flexcontainer {
        display:block;
    }

    #footer {
        margin-top: 20px;
    }

    #sidebar-container {
        flex:0 0 100%;
    }
    
    #sidebar {
        position:relative;
        height:auto;
        text-align:center;
        margin-bottom:1em;
    }

	
	.door-grid {gap: 2rem;
  grid-template-columns: repeat(4, 1fr); /* always 2 doors per row */
  }
}

@media (max-width: 900px) {
	.door-grid {gap: 1rem;
  grid-template-columns: repeat(4, 1fr); /* always 2 doors per row */
  }
}

@media (max-width: 600px) {
  h1 { font-size: 1.8rem; }
  .front-door { width: 100px; height: 150px; line-height: 150px; }
  .door {
  width: 75px;
  height: 120px; /* stay tall like a door */
  border: 2px solid #000;
  border-radius: 3px;
}
  .subtitle {font-size:.8rem;}
  .door-grid {gap: 1rem;
  grid-template-columns: repeat(4, 1fr); /* always 2 doors per row */
  }
  
  .door.jukebox::before {
  font-size: 2rem;
}
}