@keyframes wiggle {
	0% {
		transform: rotate(3deg);
	}
	50% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(3deg);
	}
}

* {
	box-sizing: border-box;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: start;
    /* centers vertically */
    min-height: 100vh;
    background: url("../img/asadal.jpg") no-repeat center center fixed;
    background-size: cover;
}

.container {
    display: grid;

    /* Responsive columns — each at least 150px, then share space */
    grid-template-columns: repeat(3, minmax(150px, 1fr));

    /* Responsive rows — auto to content */
    grid-auto-rows: minmax(100px, auto);

    gap: 2vw;
    /* relative gap */
    width: 95vw;
    /* container scales with viewport */
    max-width: 1200px;
    /* optional limit on large screens */
    /* Add padding from the top */
    margin-top: 50px;
    /* adjust as needed */
}



.cell {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    /* fill grid cell */
    height: 100%;
    font-size: calc(1rem + 0.5vw);
    /* text scales with screen */
}

.cell h1 {
    margin: 0;                 /* remove default h1 margin */
    font-size: 1.5rem;         /* adjust size if needed */
    -webkit-text-stroke: 1px rgb(2, 72, 104);
    color:white;
    animation: wiggle 10s infinite;
}


/* Top row H spans all 3 columns */
.cell.h {
    grid-column: 1 / 4;
    
}

.window-body.has-space.top{
    background: url("../img/asadal_top.jpg") no-repeat center center fixed;
    background-size: auto;
}

.cell.s-left {
    grid-column: 1 / 2;
}

.cell.x {
    grid-column: 2 / 4;
}

details {
  margin-bottom: 8px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

/* wrapper for animation */
details > *:not(summary) {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* when open */
details[open] > *:not(summary) {
  max-height: 200px; /* adjust depending on content */
}

.cell.f {
    grid-column: 1 / 4;
}

.cell.f .window-body{
        background-image: url("../img/water-43.gif");
        background-repeat: no-repeat;
        background-size: cover; /* or contain */

}

.cell.EX {
    grid-column: 1 / 4;
}

.window-body {
    text-align: center;
}

.win7 .window {
    width: 90%;
    /* relative to cell width */
    max-width: 100%;
    /* prevent overflow */
}


article[role="tabpanel"] ul {
    list-style: none;
    padding: 0;
}



/* Stack into one column on narrow screens */
@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(80px, auto);
    }

    .cell {
        font-size: 1rem;
    }
}