/* ============================== */
/* General Styles */
/* ============================== */
body {
    font-family: Arial, sans-serif;
    color: black; /* Keep text readable */
    background-color: white;
    margin: 20px;
}

h1 {
    color: darkblue;
}

/* ============================== */
/* Section Header Colors */
/* ============================== */

.about-header {
    color: darkred;
}

.hobbies-header {
    color: seagreen;
}

.education-header {
    color: royalblue;
}

/* ============================== */
/* Education Section Formatting */
/* ============================== */

.college-degree {
    font-weight: bold; /* Bachelor's Degree = Bold */
}

.high-school-diploma {
    font-style: italic; /* High School Diploma = Italic */
}

.certificate {
    text-decoration: underline; /* Certificates = Underlined */
}
/* ============================== */
/* Hyperlink Hover Effect */
/* ============================== */

a {
    transition: font-size 0.3s ease-in-out; /* Smooth transition effect */
}

/* Remove zoom effect from all links by default */
a:hover {
    font-size: 100%; /* Keep normal size */
}

/* Apply zoom effect ONLY to Education links on personal.html */
.personal-education a:hover {
    font-size: 150%; /* Increase text size when hovered */
}



/* ============================== */
/* Custom Radio Buttons (Majors) */
/* ============================== */

/* Hide default radio button */
input[type="radio"] {
    appearance: none; /* Removes default browser styling */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid grey; /* Default grey border */
    background-color: grey; /* Default unselected color */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

input[type="radio"]:checked {
    background-color: green;
    border: 2px solid darkgreen;
}

label {
    margin-left: 5px;
    font-size: 16px;
}

/* ============================== */
/* Custom Checkboxes (Programming Languages) */
/* ============================== */

/* Hide default checkbox */
input[type="checkbox"] {
    appearance: none; /* Removes default browser styling */
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid grey; /* Default grey border */
    background-color: grey; /* Default unselected color */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

/* Selected checkbox should be blue */
input[type="checkbox"]:checked {
    background-color: blue;
    border: 2px solid darkblue;
}

/* Add spacing for better alignment */
.checkbox-container,
.radio-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}