*{box-sizing: border-box;}

body{
    background-color:#F3E6EC;
    margin: 0; padding: 0; 
    color: #3B2F33;
    font-family:'Times New Roman', Times, serif;
    font-size: 20px;
    background-image:linear-gradient(to bottom, #7B3F5240, #7B3F5220);
    margin-left: 220px;
}

nav{
    background-color: #C9A6B6;
}

h1 {
    color:#7B3F52;
    font-style:italic;
    text-align:center;
    font-size: large 'Times New Roman', Times, serif;
    padding: 1px;
    border-radius: 12px;
    background: #C9A6B630 content-box;
    text-shadow:3px 5px 6px #3B2F3355;
    opacity: 0.9;
}

header {background-color: #A67A8C;}

nav a { color:#3B2F33; }

h2 {color: #7B3F52;}

footer{
    background-color:#C9A6B6;
    color: #3B2F33;
    text-align:center;
    font-size: 88%;
    padding: 7px;
}

li::marker {
  content: "⊹"; 
  color: #7B3F52;
}

nav a{text-decoration:none;}

.transformeffect:hover {
  transform: scale(1.1);
}

#coursesschool {
    background-image:url(coursesschool.png);
    background-repeat:no-repeat;
    background-size:250px;
    height:250px; 
    background-position: bottom center;
}

.sidebar { 
    list-style-type: none;
    background-color: #C9A6B6;
    width:200px; 
    padding:0; 
    margin:0;
    text-shadow:3px 5px 6px #3B2F3355; 
    box-shadow: 3px 4px 5px 6px #3B2F3322; 
    text-align: center; 
    top: 0;
    left: 0; 
    height: 100%;
    position: fixed; 
    overflow-x: hidden;
    display:flex; 
    flex-direction:column;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
}

.award-flex {
    display: flex; 
    flex-wrap: wrap; 
    justify-content:center; 
    margin-top: 30px; 
    gap:20px;
}

.award-flex img {
    flex-basis: 200px; 
    align-self: center; 
    max-width: 100%; 
    height: auto; 
    border-radius: 7px;
}

.sidebar li a {
  display: block; 
  color: #3B2F33;
  padding: 12px 16px; 
  text-decoration: none; 
}

.sidebar li a:hover { 
    color: #F3E6EC; 
    background-color: #A67A8C;
    transition: background-color 0.4s ease;
}

.sidebar li a:active {color:#3B2F33;}

.scroll-container {
    height: 200px;
    color: #3B2F33;
    width:80%;
    overflow-y:auto;
    overflow-x: hidden;
    padding: 14px;
    background-color: #C9A6B655;
    border-radius:9px;
    margin-bottom: 20px; 
    text-align:start;
}

.award-grid {
    display:grid; 
    grid-template-columns: 2fr 2fr;
    margin-top: 20px;
}

a { color:#7B3F52; }

nav {
  background-color: #C9A6B6;
  width: 100%;
  padding: 8px;
  text-shadow: 3px 5px 6px #3B2F3355;
  box-shadow: 3px 4px 5px #3B2F3322;
  text-align: center;
  border-radius: 12px;
  opacity: 0.9;
}

@media (max-width:768px) {
  body {margin-left:0;}
  .award-flex {flex-direction:column; align-items: center;} 
  .sidebar { position: relative; width: 100%; height: auto; flex-direction: row; justify-content: space-around; padding:10px;}
  .sidebar li {flex-basis:auto;}
  .scroll-container {width: 100%;}
}

table {
  font-family: 'Times New Roman', Times, serif;
  border:2px solid #7B3F52; 
  border-collapse: collapse;
  margin: 0 auto;
}

th, td {
    border: 2px solid #7B3F52; 
    text-align: center; 
    padding: 2em;
}

fieldset {
    background-color: #A67A8C20; 
    font-family: 'Times New Roman', Times, serif; 
    color: #3B2F33; 
    display: block; 
    text-align: left;
}





.pink-thumbs {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
    flex-wrap:wrap;
}

.pink-thumbs img {
  width: 260px;
    height:260px;
    object-fit: cover;
  border-radius: 12px;
  box-shadow: 3px 5px 6px #3B2F3355;
  border: 2px solid #7B3F52;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pink-thumbs img:hover {
  transform: scale(1.08);
  box-shadow: 4px 6px 10px #7B3F5240;
}




.awards-table-container {overflow-x: auto; width: 100%;}

.awards-table {width: 100%; 
table-layout: fixed;
border: 2px solid #7B3F52;
border-collapse: collapse;
margin: 0 auto;}

.awards-table th, 
.awards-table td {

border: 2px solid #7B3F52;
text-align: center;
padding: 1em;
word-wrap: break-word;
white-space: normal;


}

.awards-table img {

max-width: 100%;
width: 120px;
height: auto;



}

@media (max-width: 768px) {.awards-table th, 
.awards-table td {padding: 0.5em;}}




.video-container {
position: relative;
width: 100%;
max-width:700px;
margin: 0 auto;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
}


.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;


}


@media (max-width: 768px) {
    .pink-thumbs { 
        flex-direction: column; 
       align-items: center;} 

    .pink-thumbs img {
        width: 80%; 
        max-width: 300px; 
        height: auto;
    }
}