@charset "utf-8";
/* CSS Document */
header nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

header nav a {
  padding: 0.3rem 0.85rem;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  header nav a {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
  }
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background:#eaf3f5;
}

/* HEADER */
.top-header{
    background:#a9b6ff;
    display:flex;
    align-items:center;
    padding:15px;
}

.top-header h1{
    color:#d6ff00;
    font-size:96px;
    margin-left:20px;
    text-shadow:2px 2px 4px #000;
}

.logo{
    width:100px;
}

/* NAVIGATION */
.navbar{
    background:#9fc3c9;
    display:flex;
    justify-content:center;
    gap:40px;
    padding:12px;
}

.navbar a{
    text-decoration:none;
    color:#0a2240;
    font-weight:bold;
}

/* MAIN LAYOUT */
.main-container{
    display:flex;
    padding:20px;
}

/* MEANSCORE PANEL */
.mean-score{
    width:20%;
    background:#bcd2d6;
    padding:15px;
    border-radius:10px;
    text-align:center;
}

.mean-score img{
    width:100%;
    margin-top:10px;
}

/* DASHBOARD */
.dashboard{
    width:80%;
    margin-left:20px;
    background:white;
    padding:20px;
    border-radius:10px;
}

.motto{
    text-align:center;
    font-style:italic;
    margin-bottom:20px;
}

/* BEST STUDENT */
.best-student{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#f4f7f8;
    padding:15px;
    border-radius:8px;
}

.student-img{
    width:120px;
    border-radius:50%;
}

.score{
    color:#ff8800;
    font-weight:bold;
}

/* CARDS */
.cards{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.card{
    flex:1;
    background:#f4f7f8;
    padding:15px;
    border-radius:8px;
}

.card h3{
    margin-bottom:10px;
}

.card ul{
    list-style:none;
}

.card li{
    padding:5px 0;
}

/* FOOTER */
footer{
    text-align:center;
    padding:15px;
    margin-top:20px;
    background:#dbe4e8;
}