/* main background colour */
body {
  background-color: rgb(194, 252, 252);
  color: black;
}

/* Header Background Colour */
header {
  background-color: #333;
  color: white;
  margin: -8px -8px 0;
}

.header-top {
    padding: clamp(20px, 4vw, 36px) clamp(12px, 3vw, 24px) clamp(16px, 3vw, 24px);
    text-align: center;
}

/* Main Title Styling */
.MainTitle {
    font-size: clamp(1.75rem, 5vw, 3rem);
    margin: 0;
}

nav ul {
    list-style-type: none; /* Removes bullet points */
    margin: 0;
    padding: 0 clamp(4px, 1.5vw, 12px);
    display: flex; /* Puts everything on one line */
    justify-content: center;
    flex-wrap: wrap;
}

nav li {
    margin: 0;
}

nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px clamp(14px, 2.5vw, 25px);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    background-color: #333;
    color: white;
    text-decoration: none;
    border: 1px solid #555;
}

nav a:hover {
    background-color: #007bff;
}

.smiley {
    display: block;
    margin: 20px auto;
    width: 150px; /* Adjust size as needed */
    height: auto;
    border: #333 solid 1px;
    border-radius: 10px;
}