* {
  scrollbar-width: none;
}

.rain {
    padding-left: 8px;
    padding-right: 32px;
    padding: 3px;
    text-align: center;
    background: linear-gradient(to right, #0000, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #B8BAFF, #E7B8FF, #0000);
    display: inline-block;
    color: #3344f3;
}

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.styled-button {
    background: linear-gradient(180deg, #eff1f5 49%, #9ca0b0 51%);
    box-shadow: -1px -1px 3px inset #4c4f69, 1px 1px 3px inset #eff1f5;
    text-shadow: 1px 1px #eff1f5;
    border-radius: 10px 20px;
    border: 2px solid #bcc0cc;
    padding: 5px 10px; /* Smaller padding for a smaller button */
    font-size: 14px; /* Smaller font size */
    cursor: pointer;
    margin-bottom: 0.3vh;
}

.styled-button:hover, .styled-button:active {
    background: linear-gradient(180deg, #acb0be 49%, #9ca0b0 51%);
    box-shadow: -1px -1px 3px inset #4c4f69, 1px 1px 3px inset #eff1f5;
    text-shadow: 1px 1px #3344f3;
    color: #eff1f5; 
}

.head{
    position:relative;
}
 .header_img{
    aspect-ratio: 26 / 9;
    width:100%;
    height:auto;
    object-fit:fill;
    background-size:cover;
    background-image:url('/assets/emu_moroll.png');
    z-index:-1;
    border-radius: 1.2vh;
}
 .marquee-container{
    position:absolute;
    width:100%;
    overflow:hidden;
    margin-top:10px;
    margin-bottom:10px;
    z-index:1;
    bottom:0
}
 .marquee-background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9)
}
 .marquee-content{
    white-space:nowrap;
    font-family:dosfont2;
    font-size:24pt;
    color:#fff;
    overflow:visible;
    display:inline-block;
    animation:18s linear infinite marqueeScroll;
    position:relative
}
 @keyframes marqueeScroll{
     0%{
        transform:translateX(102%)
    }
     100%{
        transform:translateX(-102%)
    }
}
 .marquee-content span{
    display:inline-block;
    animation:1.5s linear infinite sineWave
}
 @keyframes sineWave{
     0%,100%{
        transform:translateY(3px);
        color:#ff6969;
        transform:scale(.5)
    }
     12.5%{
        color:#ffa769
    }
     25%{
        transform:translateY(-3px);
        color:#f7ff69
    }
     37.5%{
        color:#69ff7f
    }
     50%{
        transform:translateY(3px);
        color:#69faff;
        transform:scale(1.5)
    }
     62.5%{
        color:#7069ff
    }
     75%{
        transform:translateY(-3px);
        color:#b969ff
    }
     87.5%{
        color:#ff69dc
    }
}
 #bgcontainer{
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:-1
}
#bg1 {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("/assets/lmbg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
 body{
    background-color:#000;
    background-repeat:repeat;
    font-size:12pt;
    margin:auto;
    width:92%;
    text-align:left;
    font-family:Didact Gothic, monospace;
    text-rendering: geometricPrecision;
}
 hr{
    border:0;
    height:1px;
    background-image:linear-gradient(to right,#fff,#696b6d,#fff)
}
 a,a:link{
    color:#3344f3;
    animation-iteration-count:infinite;
    font-weight:700;
    text-decoration:none
}
 a:hover{
    color:#3344f3;
    animation-iteration-count:infinite;
    font-weight:700;
    text-decoration:underline;
    cursor:url("/cursor/link.gif"),auto
}
 p{
   line-height: 16pt;
}
img{
   line-height: 16pt;
}
 .owo img{
    filter:drop-shadow(0 0 .1rem #00264d)
}
 .main{
    font-size:12pt
}
 ::-moz-selection{
    color:#fff;
    background:#3344f3
}
 ::selection{
    color:#fff;
    background:#3344f3
}
.title {
    max-height: 150px;        /* Maintain the image's maximum height */
    image-rendering: smooth;  /* Ensure the image renders smoothly */
    display: block;           /* Ensure the image respects the Flexbox properties */
    margin: 0 auto;           /* Ensure the image is centered if display:block */
}
.image-wrapper {
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center;     /* Centers the image vertically if needed */
    margin: 0 auto;          /* Ensures the container itself is centered if it's smaller than its parent */
}
 .welcome{
    font-family:riffic;
    display:table;
    margin:0 auto;
    color:#000;
    letter-spacing:.1vh
}
.container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    gap: .5% .5%;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "head head head head head head head head head head"
        "updt updt body body body body body body navl navl"
        "navb navb body body body body body body cbox cbox"
        "pan1 pan1 pan1 pan1 pan1 pan2 pan2 pan2 pan2 pan2"
        "foot foot foot foot foot foot foot foot foot foot";
    width: 100%;
    height: 200vh; /* Make the container take full viewport height */
}

.head {
    grid-area: head;
    background-color: #fff;
    width: 100%;
    height: auto;
    border: outset 2px #fff;
    border-radius: 1.2vh;
}

.content {
    grid-area: body;
    background-color: #fff;
    width: 100%;
    height: 100%;
    max-height: auto; /* Adjust this value to limit content height */
    border: outset 2px #fff;
    overflow: auto;
    border-radius: 1.2vh;
}

.panel1, .panel2, .nav, .miniblog, .cbox, .musicbox {
    height: 100%;
}

.panel1 {
    grid-area: pan1;
    background-color: #fff;
    width: 100%;
    height: 30vh;
    border: outset 2px #fff;
    overflow: auto;
    border-radius: 1.2vh;
}

.panel2 {
    grid-area: pan2;
    background-color: #fff;
    width: 100%;
    height: 30vh;
    border: outset 2px #fff;
    overflow: hidden;
    border-radius: 1.2vh;
}

.footer {
   grid-area: foot;
   background-color: #fff;
   width: 100%;
   height: auto;
   border: outset 2px #fff;
   text-align: center;
   margin: 0; /* Remove any margin */
   border-radius: 1.2vh;
}

.musicbox {
    grid-area: updt;
    background-color: #fff;
    width: 100%;
    border: outset 2px #fff;
    border-radius: 1.2vh;
}

.nav {
    grid-area: navb;
    background-color: #fff;
    width: 100%;
    border: outset 2px #fff;
    overflow: auto;
    border-radius: 1.2vh;
}

.miniblog {
    grid-area: navl;
    background-color: #fff;
    width: 100%;
    height: 100%;
    max-height: 20em;
    border: outset 2px #fff;
    overflow: auto;
    border-radius: 1.2vh;
}

.cbox {
    grid-area: cbox;
    background-color: #fff;
    width: 100%;
    border: outset 2px #fff;
    overflow: auto;
    text-align: center;
    border-radius: 1.2vh;
}

#pop {
    color: #000;
    margin: 12px;
    -webkit-animation: 1s ease-in-out infinite alternate pop;
    animation: 1s ease-in-out infinite alternate pop;
    -moz-animation: 1s ease-in-out infinite alternate pop;
}

@keyframes pop {
    from, to {
        transform: scale(.8);
    }
    50% {
        transform: scale(.9);
    }
}

@-webkit-keyframes pop {
    from, to {
        -webkit-transform: scale(.8);
    }
    50% {
        -webkit-transform: scale(.9);
    }
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.container, .head, .content, .panel1, .panel2, .footer, .musicbox, .nav, .miniblog, .cbox {
    line-height: 1; /* You can adjust this value as needed */
    padding-bottom: 1;
}

/* Media Queries */
@media (max-width: 1200px) {
    .container {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas:
            "head head head head head head head head"
            "updt updt body body body body navl navl"
            "navb navb body body body body cbox cbox"
            "pan1 pan1 pan1 pan1 pan2 pan2 pan2 pan2"
            "foot foot foot foot foot foot foot foot";
    }
}

@media (max-width: 992px) {
    .container {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "head head head head head head"
            "updt updt body body navl navl"
            "navb navb body body cbox cbox"
            "pan1 pan1 pan2 pan2 pan2 pan2"
            "foot foot foot foot foot foot";
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "head head head head"
            "updt updt body body"
            "navb navb body body"
            "navl navl cbox cbox"
            "pan1 pan1 pan2 pan2"
            "foot foot foot foot";
    }
}

@media (max-width: 576px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "head head"
            "updt updt"
            "body body"
            "navb navb"
            "navl navl"
            "cbox cbox"
            "pan1 pan1"
            "pan2 pan2"
            "foot foot";
    }
}

@media (max-width: 800px) {
    .container {
        display: flex;
        flex-flow: column;
        width: 100%;
        margin-top: 3%;
        margin-left: 5%;
    }
    .head {
        height: auto;
        order: 1;
    }
    .content {
        order: 2;
        max-height: calc(100vh - 200px); /* Maintain height limit for content */
    }
    .musicbox {
        order: 3;
        display: none;
    }
    .nav{
        order: 4;
        height: auto;
    }
    .cbox{
         order: 5;
        height: auto;
    }
    .miniblog{
         order: 6;
        height: auto;
        min-height: 25vh;
        max-height: 20em;
    }
    .panel1, .panel2 {
      order: 7;
      height: auto;
      min-height: 25vh;
    }

    .footer {
        order: 8;
    }
    .table-row {
        flex-direction: column;
    }
    .table-cell {
        text-align: left;
    }
}

/* Responsive Table */
.table-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-row {
    display: flex;
    width: 100%;
}

.table-cell {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
}

/* Make the table cells stack vertically on smaller screens */
@media (max-width: 800px) {
    .table-row {
        flex-direction: column;
    }

    .table-cell {
        text-align: left;
    }
}

 *{
    text-rendering:geometricPrecision;
}
 .sticky-element{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    background-color:#fff;
    padding:0
}

.buttonz:hover {
    image-rendering: smooth;
    z-index:9999;
    transition: transform .2s;
    transform: scale(1.5);
}