/* css/style-web.css */

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Frontpage Sections */
.frontpage_top {
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frontpage_top h1 {
    font-family: 'Harlow Solid', serif; /* Gaming-inspired font */
    font-size: 72px;
}

.frontpage_middle,
.frontpage_bottom {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

.list_new_label,
.list_popular_label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    margin-right: 10px;
    font-size: 1em;
    font-family: 'Harlow Solid', serif; /* Gaming-inspired font */
}

.new_left,
.new_right,
.popular_left,
.popular_right {
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

.light-mode .new_left,
.light-mode .new_right,
.light-mode .popular_left,
.light-mode .popular_right {
    color: #007bff; /* Blue for light mode */
}

.light-mode .new_left:hover,
.light-mode .new_right:hover,
.light-mode .popular_left:hover,
.light-mode .popular_right:hover {
    color: #0056b3; /* Darker blue on hover */
}

.dark-mode .new_left,
.dark-mode .new_right,
.dark-mode .popular_left,
.dark-mode .popular_right {
    color: #00cc00; /* Accent color (from original) */
}

.dark-mode .new_left:hover,
.dark-mode .new_right:hover,
.dark-mode .popular_left:hover,
.dark-mode .popular_right:hover {
    color: #009900; /* Darker accent on hover (from original) */
}

/* Overlay Styles */
.light-mode .overlay-content {
    background-color: #fff; /* White background for light mode */
    border: 1px solid #ccc; /* Gray border for light mode */
}

.dark-mode .overlay-content {
    background-color: #1a1a1a; /* Dark background (from original) */
    border: 1px solid #00cc00; /* Accent border (from original) */
}

.overlay-content input,
.overlay-content select,
.overlay-content button {
    border: 1px solid;
}

.light-mode .overlay-content input,
.light-mode .overlay-content select,
.light-mode .overlay-content button {
    background: #fff; /* White background for light mode */
    color: #333; /* Dark text for light mode */
    border-color: #ccc; /* Gray border for light mode */
}

.dark-mode .overlay-content input,
.dark-mode .overlay-content select,
.dark-mode .overlay-content button {
    background: #333; /* Dark background (from original) */
    color: #fff; /* White text (from original) */
    border-color: #00cc00; /* Accent border (from original) */
}

.light-mode #newCharButton {
    background-color: #fff; /* White background for light mode */
    border: 1.5px solid #007bff; /* Blue border for light mode */
}

.dark-mode #newCharButton {
    background-color: #333; /* Dark background (from original) */
    border: 1.5px solid #00cc00; /* Accent border (from original) */
}

/* Modal Styles */
.light-mode .modal-content {
    background-color: #fff; /* White background for light mode */
    border: 1px solid #ccc; /* Gray border for light mode */
}

.dark-mode .modal-content {
    background-color: #1a1a1a; /* Dark background (from original) */
    border: 1px solid #00cc00; /* Accent border (from original) */
}

/* Media Query for Mobile Portrait (720x1280) */
@media screen and (max-width: 720px) {
    .frontpage_top {
        height: 30%;
    }

    .frontpage_middle,
    .frontpage_bottom {
        height: 30%;
        padding: 10px;
    }

    .list_new_label,
    .list_popular_label {
        font-size: 0.8em;
    }

    .new_left,
    .new_right,
    .popular_left,
    .popular_right {
        font-size: 18px;
        padding: 5px;
    }

    .modal-content {
        width: 90% !important;
        height: 60% !important;
        min-width: auto;
        max-width: none;
    }
}