* {
    font-family: 'Space Mono', monospace;
    color: #111111;
    
}
p{
    font-size: 2vh;
}
h4{
    font-size: 2.5vh;
    padding: 0%;
    margin: 0%;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    
}
.bg{
    position: absolute;
    z-index: -100;
    height: 100vh;
    width: 300vw;
    background-size: 18px 18px;
    background: repeating-linear-gradient(
        45.9deg,
        #dddddd,
        #dddddd 10px,
        #eeeeee 10px,
        #eeeeee 20px
      );
      background-position: px 0%;  
      animation-name: panbg;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
}
@keyframes panbg {
    0% {
        background-position-x: -50vw;        
    }
    100% {
        background-position-x: 50vw;
    }
}
.large-title {
    display: flex;
    justify-content: center;
    width: 100%;
    text-shadow: 0.2rem 0.2rem 0.2rem rgb(0 0 0 / 40%);
}
.large-title h1 {
    text-align: center;
    font-size: 8vh;
    margin: 0;
    padding-top: 0;
}
.container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: fit-content; /* Adjusts the container to fit its content */
}
.menu {
    width: 40vh;
    padding: 2vh;
    box-sizing: content-box;
}
.menu ul {
    list-style: none;
    padding: 0;
}
.menu ul li {
    margin: 1vh 0;
    text-align: right; 
}
.menu ul li a {
    text-decoration: none;
    color: 111111;
    font-size: 6vh;
    cursor: pointer;
    text-shadow: 0.2rem 0.2rem 0.2rem rgb(0 0 0 / 40%);
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.square {
    width: 85vh;
    height: 85vh;
    border: 0vh solid #111111;
    overflow: hidden;
    position: relative;
    box-shadow: 0.25vw 0.25vw 0.75vw 0.3vw rgb(0 0 0 / 40%);
}
.scrollable-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* Added smooth scrolling behavior */
}
.page {
    height: 100%;
    scroll-snap-align: start;
    padding: 0px;
    box-sizing: border-box;
}

.imgrow{
    display: flex;
    margin-right: 5%;
    margin-left: 5%;
    padding-top: 2.5%;
    vertical-align: middle;
    box-sizing: border-box;
}

.column {
    flex: auto;
    padding: 1vh;
    box-sizing: border-box;
    text-align: left;
    width: 33%;
  }

.column ul{
    padding-left: 20px;
}
.column ul li {
    font-size: 2vh;
}
.page:nth-child(odd) {
    background-color: #eeeeee;
}
.page:nth-child(even) {
    background-color: #eeeeee;
}

.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
  .space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
  }
  
  .space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
  }
  
  .space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
  }
  

  /* Media query for portrait orientation */
@media (max-width: 800px) and (orientation: portrait) {
    .large-title h1 {
        text-align: center;
        font-size: 8vw;
        margin: 0;
        padding-top: 0;
    }
    p{
        font-size: 2vw;
    }
    h4{
        font-size: 2.5vw;
        padding: 0%;
        margin: 0%;
    }
    .container {
        flex-direction: column;
        align-items: center;
    }
    .menu {
        width: 100%;
        display: flex;
        padding: 0%;
    }
    .column {
        padding: 1vw;
        box-sizing: border-box;
        text-align: left;
        width: 25%;
      }
    .menu ul {
        font-size: 2.5vw; /* Adjust menu font size for better fit on narrow screens */
        text-align: center;
        columns: 5;
        height: 3vw;
    }
    .menu ul li {
        font-size: 2.5vw; /* Adjust menu font size for better fit on narrow screens */
        text-align: center;
        margin: 0%;
    }
    .menu ul li a {
        font-size: 2.5vw; /* Adjust menu font size for better fit on narrow screens */
        margin: 0%;
    }
    .content {
        margin-left: 0;
        width: 100%;
    }
    .square {
        width: 80vw;
        height: 100vw;
    }
    .page {
        height: 100vw;
    }
}