/* 
Author: Wen Fan
Date: 2/18/26
File Name: style.css
*/  

/* CSS Reset */
body, header, nav, main, footer, img, h1, h3, ul {
    margin:0;
    padding:0;
    border:0;
}

/* Body */
body {
    background-color: #0d0d0d;
    font-family: Arial, Helvetica, sans-serif;
    color: #e6e6e6;
    text-align: center;
}

/* Wrapper (MAIN BOX AROUND PAGE) */
#wrapper {
    width: 90%;
    max-width: 900px;
    margin: 5% auto;
    background-color: #1a0000;
    border: 2px solid #ff1a1a;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    padding: 20px;
}

/* Header */
header {
    background-color:#000;
    color:#ff4d4d;
    padding:2%;
}

/* Images */
img{
    max-width:100%;
    display:block;
}

/* Navigation */
nav{
    background-color:#000000;
}

nav ul{
    list-style-type:none;
}

nav li{
    display:block;
    font-size:1.5em;
    font-weight:bold;
    border-top:1px solid #330000;
    padding:1%;
}

nav li a{
    display:block;
    color:#ff4d4d;
    padding:0.5em 2em;
    text-decoration:none;
}

/* Hover effect */
nav li a:hover{
    background-color:#ff1a1a;
    color:#000;
}

/* Main */
main{
    padding:2%;
}

main p {
    font-size:1.25em;
}

main h2 {
    color:#ff4d4d;
}

/* Section boxes */
section {
    background-color: #0d0d0d;
    border: 1px solid #330000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;
}

/* Links */
.link{
    color:#ff4d4d;
    font-weight:bold;
}

/* Footer */
footer{
    font-size:0.85em;
    background-color:#000;
    color:#999;
    padding:1%;
}

/* Forms */
fieldset, input, textarea {
    margin-bottom:2%;
}

label {
    display:block;
    padding-top:2%;
}

form #submit{
    margin:0 auto;
    display:block;
    padding:2%;
    background-color:#ff1a1a;
    color:#000;
    font-size:1.25em;
    border-radius:10px;
    border:none;
}

/* Tables */
table{
    border:1px solid #ff1a1a;
    border-collapse:collapse;
    margin:20px auto;
}

th, td{
    border:1px solid #330000;
    padding:1%;
}

th{
    background-color:#1a0000;
    color:#ff4d4d;
}

tr:nth-child(odd) {
    background-color:#1a1a1a;
}

/* Grid */
.grid{
    display:grid;
    grid-template-columns:auto auto;
    gap:10px;
}

/* Tablet and up */
@media screen and (min-width:620px){
    nav li{
        display:inline-block;
        font-size:1.25em;
    }
}

.images{
    width:250px;
    height:250px;
    border:10px;
    margin:10px auto;
}