/* ============================
   TAG SELECTORS (HTML elements)
   ============================ */

* { box-sizing: border-box; }

body {max-width: 1000px;width: 100%;margin: auto;background-color: lightblue;background-image: url(images/paper-9345540_640.jpg);background-size: cover;font-family: Arial, sans-serif;}

h1 { color: #2a4d8f; font-family: Arial, sans-serif; }
h2 { color: #4a6bb3; font-family: Arial, sans-serif; }
h3 { color: #5c5c8a; font-family: Arial, sans-serif; }

p { font-size: 14px; line-height: 1.5; font-family: Arial, sans-serif; }

img { max-width: 100%; height: auto; border-radius: 8px; }
img.center { display: block; margin: auto; }
img.noborder { border: 0px; }

header {height: 250px;background-image: url(images/the-great-wave-off-kanagawa-7107112_640.jpeg);background-size: cover;background-position: center;}

nav {text-align: center;padding: 12px;background-color: #cce0ff;width: 100%;}

nav a { display: block;text-decoration: none;padding: 6px;transition: all 0.3s ease;}

nav a:hover { color:#2a4d8f; text-decoration: underline; }

nav ul { list-style-type: none; margin: 0; padding: 0; }
nav li { display: inline-block; margin: 0 15px; }
nav li a { border: 2px #AAA solid; padding: 6px; }

main {background-color: transparent;padding: 20px;border: 1px solid #ccc;}

section { float: left; width: 65%; }
aside { float: left; width: 30%; padding-right: 20px; }
main::after { content: ""; display: block; clear: both; }

footer {text-align: center;padding: 10px;background-color: lightgoldenrodyellow;color: black;font-size: 12px;font-family: Arial, sans-serif;}

hr {width: 60%;height: 5px;background-color: lightgoldenrodyellow;border: none;margin: 20px auto;}

svg rect { fill: blue; stroke: black; stroke-width: 3; opacity: 0.5; }

blockquote {text-align: justify;margin: 20px;padding: 10px;font-style: italic;}

blockquote:first-letter {font-size: 1.8em;font-weight: bold;}

/* ============================
   TABLE STYLES (NEW)
   ============================ */

table {border: 4px solid #003399;border-collapse: collapse;margin: 20px auto;width: 500px;}

th {background-color: #003399;color: white;text-align: center;padding: 10px;font-size: 1.2em;}

td {padding: 8px;border: 1px solid #003399;}

/* ============================
   IDs
   ============================ */

#wrapper { background-color: white;padding: 20px;border: 2px solid #4a6bb3;}

#goals { background-color: #eef3ff;padding: 10px;border-left: 4px solid #2a4d8f;margin-top: 20px;}

#figureContainer {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;text-align: center;}

/* ============================
   CLASSES
   ============================ */

.profile-photo { max-width: 180px; height: auto; display: block; margin-bottom: 20px; }

.important { color: darkblue; font-weight: bold; }

.highlight { background-color: #fffa9e; padding: 3px; }

.justified { text-align: justify; }

.infobar {background-color: #333;color: white;padding: 10px;text-align: center;margin-bottom: 20px;}

.styled-line {width: 80%;border: 4px solid #4a6bb3;border-radius: 6px;margin: 20px auto;}

.box {border: 2px blue solid;padding: 15px;margin: 20px 0;background-color: #f7faff;box-shadow: 0 4px 10px rgba(0,0,0,0.15);}

.custom-bullets { list-style-image: url(images/Point.gif);margin-top: 20px;}

.special-char {color: purple;font-weight: bold;font-size: 1.3em;}

.transcript-heading { margin-top: 20px;font-size: 1.6em;width: 80%;}

.required { color: red;font-weight: bold;}

.selected { font-weight: bold;text-decoration: underline;}

/* ============================
   MEDIA QUERIES
   ============================ */

@media only screen and (min-width:640px) {nav a { display: inline; }nav li { display: inline; padding: 0 18px; }}

@media only screen and (min-width:720px) {nav a { display: inline; }}

@media only screen and (min-width:1000px) {body { max-width: 1000px; }}
/* Portfolio page header override */
body.portfolio header {background-image: url("images/IMG_6877.jpeg");background-size: cover;background-position: center;}