/*
Title: Assignment 6 - Monster Manager
    Class: MULT 114
    Date: Feb 28th, 2025
    Author: Gia Cat Nguyen Tran
*/

/* General styling */
html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Share Tech Mono', monospace;
    background: #fff;
    height: 100%;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 100%;
    flex-grow: 1;
}

body {
    display: flex;
    flex-direction: column;
    background: #fff;
    background-image: url(../media/monster/freepik-monster.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Navigation bar */
.navbar-nav .nav-link {
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: #F58025 !important;
    /* Princeton Orange */
}

.btn-outline-light:hover {
    background-color: #F58025;
    border-color: #F58025;
    color: #fff;
}

header,
footer {
    text-align: center;
}

footer {
    border-top: solid #000000 1px;
    margin-top: 0.5em;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 100%;
}

h1 {
    background-color: #ffffff;
    color: #000000;
    padding: 0.5em;
    border-bottom: 2px solid #000;
}

/* Monster form section */
#monster-form-section {
    margin: auto;
    width: 500px;
    background-color: #ffffff;
    color: #000000;
    border: solid 2px #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#monster-form-section h2 {
    width: fit-content;
    text-align: center;
    padding: 5px;
}

#monster-form {
    margin-bottom: 1.5em;
    width: 100%;
    max-width: 300px;
}

#monster-form div {
    margin-bottom: 1rem;
}

input[type="text"],
select {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    padding: 8px;
    border: solid #000000 2px;
    box-sizing: border-box;
}

button {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 2px 1px #000000;
    width: fit-content;
    padding: 5px;
    text-align: center;
    background-color: #ffffff;
    border: solid #000000 2px;
}

/* Error color */
input[type="text"].error,
select.error {
    border: 2px solid #fd4261;
}

input[type="radio"].error {
    outline: 2px solid #fd4261;
}

/* Monster table section */
#monster-table-section {
    margin-top: 1.5em;
    padding-bottom: 1.5em;
    width: 500px;
    background-color: #ffffff;
    color: #000000;
    border: solid 2px #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#monster-table-section h2 {
    width: fit-content;
    padding: 5px;
    text-align: center;
}

#monster-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    width: 100%;
    max-width: fit-content;
}

#monster-table tr {
    border: solid #000000 1.5px;
    max-width: fit-content;
}

#monster-table th {
    background-color: #000000;
    color: #ffffff;
}

#monster-table th,
#monster-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

/* Responsive */
/* Mobile (max-width: 600px) */
@media screen and (max-width: 600px) {
    body {
        background-size: contain;
        padding: 10px;
    }

    main {
        padding: 0.5rem;
    }

    #monster-form-section,
    #monster-table-section {
        width: 100%;
        max-width: 350px;
        box-shadow: 3px 3px #000000;
    }

    #monster-form {
        max-width: 300px;
    }

    input[type="text"],
    select {
        font-size: 14px;
        padding: 6px;
    }

    button {
        width: 100%;
        font-size: 14px;
        padding: 8px;
    }

    #monster-table {
        font-size: 12px;
        overflow-x: auto;
    }

    #monster-table th,
    #monster-table td {
        padding: 5px;
    }
}

/* Small Screens (max-width: 400px) */
@media screen and (max-width: 400px) {
    h1 {
        font-size: 18px;
        padding: 0.3em;
    }

    #monster-form-section,
    #monster-table-section {
        max-width: 90%;
        padding: 10px;
    }

    #monster-table {
        font-size: 10px;
    }

    button {
        font-size: 12px;
        padding: 6px;
    }
}