body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
color: #111;
}

header {
background: #002147;
color: white;
padding: 1rem;
}

nav ul {
list-style: none;
display: flex;
gap: 1rem;
padding: 0;
}

nav a {
color: white;
text-decoration: none;
}

nav a:hover,
nav a:focus {
text-decoration: underline;
}

main {
/*width: 95%;*/
max-width: 1400px;
margin: auto;
padding: 2rem;
}

.skip-link {
position: absolute;
left: -9999px;
}

.skip-link:focus {
left: 10px;
top: 10px;
background: black;
color: white;
padding: 8px;
}

/* Menu Code */


/* .menu-frame {
display: inline-block;
border: 2px solid white;
border-radius: 10px;
background: #003366;
margin-top: 8px;
padding: 4px 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
} */

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}


.menu-frame {
width: 100%;
height: 60px;
border: 2px solid white;
border-radius: 10px;
background: #003366;
box-sizing: border-box;
margin-top: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

header {
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.08) 2px,
transparent 2px,
transparent 6px
),
linear-gradient(180deg,#003366,#002a55);
color: white;
padding: 1rem;
}

/* header {
background: #003366;
color: white;
padding: 20px 0;
} */

.header-container {
max-width: 1100px;
margin: auto;
padding: 0 20px;
}

/* .menu-frame {
width: 100%;
border: none;
height: 60px;
background: #003366;
} */

footer {
background: #f2f2f2;
padding: 1rem;
text-align: center;
}

/* Navigation menu */

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}

nav li {
display: inline;
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 8px 12px;
}

nav a:hover,
nav a:focus {
background-color: #0055aa;
border-radius: 4px;
}

/* Research Page Pictures */
.research-media {
margin-top: 20px;
}

.research-media img {
width: 100%;
max-width: 900px;
height: auto;
border-radius: 6px;
display: block;
}

/* Homepage Pictures */
.home-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 4vw;
margin-top: 30px;
}

.home-links img {
width: 100%;
max-width: 350px;
height: auto;
border-radius: 6px;
transition: transform 0.2s;
}

.home-links img:hover {
transform: scale(1.05);
}

/* Creating Columns */
.top-row {
display: flex;
flex-wrap: wrap;
gap: 40px
/*gap: 4vw;*/
}

.left-text {
flex: 2;
min-width: 300px;
}

.right-text {
flex: 1;
min-width: 250px;
}

/* Mobile Rules for Display */

@media (max-width: 800px) {

.top-row {
flex-direction: column;
}

.home-links {
justify-content: center;
}

}

/* Visible Focus Indicator. */
a:focus {
outline: 3px solid #ffbf47;
outline-offset: 2px;
}

/* Box Properties. */
.task-box {
border: 2px solid #003366;
background-color: #f5f8fc;
padding: 20px;
margin-bottom: 30px;
border-radius: 6px;
max-width: 600px;
}

.task-box h3 {
margin-top: 0;
}

.task-box ul {
padding-left: 20px;
}

/* Course Homepage Links. */
.course-links {
display: flex;
gap: 40px;
margin-top: 30px;
}

.course-tile {
width: 260px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #f8f8f8;
}

.course-tile img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.course-links img:hover {
transform: scale(1.05);
transition: transform 0.2s;
}


.course-links {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
clear: both;
}


hr.dashed {
  border-top: 3px dashed #bbb;
  border-bottom: none; /* Fix for potential double line in Chrome */
}
hr.dotted {
  border-top: 3px dotted #bbb;
  border-bottom: none;
}


/* Grid Links. */
.lecture-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
margin-top: 20px;
}

.lecture-button {
display: block;
text-align: center;
padding: 12px;
background-color: #003366;
color: white;
text-decoration: none;
border-radius: 6px;
font-family: Verdana, sans-serif;
}

.lecture-button:hover {
background-color: #0055aa;
}

/* Gradient Divider */
.gradient-divider {
border: none;
height: 4px;
background: linear-gradient(
to right,
transparent,
#003366,
#4c8ed9,
#003366,
transparent
);
margin: 50px 0;
border-radius: 2px;
}


/* Course Card */
.course-links {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
flex-wrap: wrap;
}

.course-card {
width: 260px;
text-align: center;
}

.course-card a {
text-decoration: none;
color: #003366;
font-family: Verdana, sans-serif;
}

.card-image {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.2s;
}

.card-image:hover {
transform: scale(1.05);
}

.card-title {
margin-top: 12px;
font-weight: bold;
font-size: 16px;
}

.card-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}

.course-card {
width: 260px;
}

.course-card:hover {
transform: translateY(-4px);
transition: 0.2s;
}


/*Lecture--Activity Button */

.lecture-button {
display: inline-block;
padding: 10px 16px;
border-radius: 6px;
text-decoration: none;
font-family: Verdana, sans-serif;
font-weight: bold;
color: white;
margin-right: 10px;
}

/* Blue button */
.see-activity {
background-color: #003366;
}

.see-activity:hover {
background-color: #0055aa;
}

/* Green button */
.submit-activity {
background-color: #bb3560;
}

.submit-activity:hover {
background-color: #3fa33f;
}


/* Blog Page*/
.blog-post {
border: 1px solid #ccc;
border-radius: 6px;
padding: 15px;
margin-bottom: 20px;
background: #f9f9f9;
}

.blog-post summary {
font-weight: bold;
font-size: 18px;
cursor: pointer;
}

.blog-post[open] {
background: #ffffff;
}


/*Google Form Code*/
.form-container {
max-width: 900px;
margin: 30px auto;
}