@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Import custom font */
@font-face {
    font-family: Arial;
    src: url('../../fonts/rainyhearts.eot');
    src: url('../../fonts/rainyhearts.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/rainyhearts.woff2') format('woff2'),
         url('../../fonts/rainyhearts.woff') format('woff'),
         url('../../fonts/rainyhearts.ttf') format('truetype'),
         url('../../fonts/rainyhearts.svg#RainyHearts') format('svg');
    font-weight: normal;
    font-style: normal;
}
html{
    font-family: Arial, cursive; 
}

.blurred-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../images/background.png') repeat;
    background-attachment: fixed;
    filter: blur(10px); /* Adjust the blur level */
    z-index: -2; /* Push it behind other content */
}

.dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(223, 159, 201, 0.2);*/
    
    background: rgba(0, 0, 0, 0.3);
    z-index: -1; /* Ensure it sits behind content */
    pointer-events: none; /* Allow interaction with content */
}
/* Wrapper Styles */
.outest-wrapper {
    display: flex; /* Arrange regions side by side */
    height: 100vh; /* Full height of the viewport */
    overflow-y: scroll; /* Prevent global scrolling */
    margin: 0;
    padding: 0;
    
}

.outest-wrapper::-webkit-scrollbar {
    display: none; 
}

/* Generic styling for all regions */
.region {
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 1rem; /* Add padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.region::-webkit-scrollbar {
    display: none; 
}

/* Left region styling */
.left {
    flex: 1;
    padding: 2rem;
}

/* Middle region styling */
.middle {
    min-width: 50%;
    flex: 1; /* Take up the remaining space */

    padding: 2rem; /* More padding for the middle */
}

/* Right region styling */
.right {
    flex: 1; /* Adjust width as needed */
    padding: 2rem;
}

.controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
}

button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1rem;
}

/* Base style for Windows 98 windows */
.window {
    position: relative;
    background-color: #ffffff; /* Window background */
    border: 2px solid #cccccc; /* Outer border */
    padding: 10px;
    box-shadow: inset -2px -2px #ffffff, inset 2px 2px #000000; /* Beveled 3D effect */
    width: auto; /* Example width */
    margin-bottom: 20px;

}

/* Title bar */
.window .title-bar {
    background: linear-gradient(to bottom, #df9fc9, #e0b8d1); /* Blue gradient for title bar */
    color: white;
    font-weight: bold;
    padding: 5px;
    text-align: left;
    border-bottom: 2px solid #808080; /* Slight 3D effect */
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Buttons in the title bar */
.window .title-bar .buttons {
    display: flex;
    gap: 4px;
}

.window .title-bar .button {
    width: 12px;
    height: 12px;
    background-color: #c0c0c0; /* Button gray */
    border: 1px solid #808080;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #000000; /* 3D button effect */
    cursor: pointer;
}

.window .title-bar .button:hover {
    background-color: #a0a0a0; /* Darker on hover */
}

/* Content area */
.window .content {
    padding: 10px;
    border: 2px solid #cccccc;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #000000; /* 3D inset */
    margin-top: 5px;
}

.gameplay-box {
    width: auto; /* Make the boxes span nearly half of the main-content width */
    background-color: #e3b5e7;
    overflow-y: auto; /* Enables vertical scrolling for these boxes */
    height: 100%; /* Ensure full height for independent scrolling */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin: 10px; /* Add spacing between boxes */
    text-align: center;
    border: 2px solid #e3b5e7;
}


.main-content::after {
    content: "";
    display: table;
    clear: both; /* Clear floats to prevent layout issues */
}

/* Wrapper Styles */
.outer-wrapper {
    display: flex;
    flex-direction: column; /* Stack inner-box and box2 vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: center;
    min-height: 100vh; /* Ensure it spans at least the viewport height */
    width: 100%;
}

/* Inner Box */
.inner-box {
    display: flex; /* Enables horizontal alignment of children */
    flex-direction: row; /* Ensure children are laid out in a row */
    flex-wrap: nowrap; /* Prevent children from wrapping to a new line */
    background-color: white;
    border: 2px solid #ff80ab;
    border-radius: 10px;
    max-width: 1200px;
    width: 90%; /* Adjust width as needed */
    gap: 20px; /* Space between sidebar and main content */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Sidebar */
.sidebar {
    background-color: #fce4ec;
    width: 250px; /* Fixed width for the sidebar */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent shrinking of the sidebar */
}

/* Main Content */
.main-content {
    flex-grow: 1; /* Make the main content take up the remaining space */
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.box1 {
    display: flex; /* Flexbox layout for horizontal alignment */
    flex-direction: row; /* Ensure children are in a row */
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: flex-start; /* Align items to the left */
    align-items: center; /* Vertically center items */
    gap: 20px; /* Add space between the child boxes */
    width: auto;
    max-width: 1200px;
    background-color: white;
    border: 2px solid #ff80ab;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
}

.box1inner {
    flex: 0 0 auto; /* Prevent the inner boxes from shrinking */
    width: 240px; /* Set a fixed width for each box */
    text-align: center;
    background-color: #fce4ec;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.box1inner h3 a {
    text-decoration: none;
    font-weight: bold;
}

.box1inner h2 {
    color: #ff99dd;
    font-weight: bold;
}

.box2 {
    width: 90%;
    max-width: 1200px;
    background-color: white;
    border: 2px solid #ff80ab;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: left;
    margin-bottom: 20px; /* Add spacing between sections */
    margin-top: 20px;
}

/* Center the first block on the page */
.outer-wrapper .inner-box {
    margin-top: auto; /* Allow the first block to appear centered vertically */
    margin-bottom: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .inner-box {
        flex-direction: column;
    }

    .sidebar,
    .right-bar {
        width: 100%;
    }

    .main-content {
        width: 100%;
    }
}


/* Sidebar Styles */
.sidebar,
.right-bar {
    background-color: #fce4ec;
    width: 250px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li a {
    text-decoration: none;
    color: #6a1b9a;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar ul li a:hover {
    background-color: #f48fb1;
    color: white;
}

/* Sidebar Dropdown Menu */
.submenu {
    display: none; /* Initially hidden */
    padding-left: 20px; /* Indent submenu items */
    margin-top: 5px;
}

.submenu li {
    margin: 5px 0;
}

.submenu li a {
    font-size: 0.85em;
    color: #6a1b9a; /* Match the sidebar link color */
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.submenu li a:hover {
    background-color: #f48fb1;
    color: white;
}

/* Show submenu when active */
.dropdown-toggle.active + .submenu {
    display: block;
}


/* Section-Specific Styling */
#about {
    margin-top: 20px;
    background-color: #ffc1d6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

#about-me h2 {
    color: #ff99dd;
    font-size: 1.8em;
}

#favorite-beatmaps h2 {
    color: #ff66a3;
    font-size: 1.8em;
    text-align: center;
}

#favorite-beatmaps h3 {
    color: #ffffff;
    font-size: 1em;
    text-align: center;
}

#favorite-beatmaps .beatmap-list {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for multiple boxes */
    gap: 15px; /* Add spacing between boxes */
    justify-content: center; /* Center align the boxes */
}

.beatmap {
    background-color: #ff99c8;
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    width: 180px; /* Fixed width */
    height: 250px; /* Fixed height */
    box-sizing: border-box; /* Include padding in width/height */
    overflow: hidden; /* Prevent overflowing content */
    justify-content: space-between; /* Evenly space content inside the box */
}

.beatmap img {
    width: 120px; /* 50% larger than original (80px * 1.5 = 120px) */
    height: 120px; /* Keep the height proportional */
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #fff;
}

.beatmap h3 a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center; /* Center the title text */
    word-wrap: break-word; /* Ensure long words break to prevent overflow */
}

.beatmap h3 a:hover {
    text-decoration: underline;
}

.beatmap audio {
    width: 0%;
    height: 25px;
    margin-top: 5px;
    background-color: #ffccd5;
    border: none;
    border-radius: 5px;
}

/* Specs Section */
#specs {
    margin-top: 20px;
    background-color: #ffc1d6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
}

/* Dropdown Buttons */
.dropdown-btn {
    width: 100%;
    background-color: #ff669a;
    color: #fff;
    border: none;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.dropdown-btn:hover {
    background-color: #ff3377;
}

.dropdown-content {
    display: none;
    background-color: #ffccd5;
    margin-top: 5px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dropdown-content p {
    margin: 5px 0;
    color: #333;
}

.dropdown.active .dropdown-content {
    display: block;
}

/* Footer */
footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.8em;
    color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
    .inner-box {
        flex-direction: column;
    }

    .sidebar,
    .right-bar {
        width: 100%;
    }

    .main-content {
        width: 100%;
    }

    #favorite-beatmaps .beatmap-list {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns for smaller screens */
    }
}