@font-face {
    font-family: 'pixel';
    src: url('PixelSquare10.ttf') format('truetype');
}
body {
    margin: 0px;
    font-family: pixel; /* Use any font you wish */
    font-size:22px;
    background-color: #A8F0CB;
    padding-top:0px;
    padding-right: 20px;
}

hr {
    border:2px solid black;
}	

.button {
  display: inline;
  width: 10%;
  border: 0px solid black;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  border: 4px solid black;
}

h1 {
    font-size:42px;
    margin: 0px;
}

a {
    color: black; /* Text color for links */
    text-decoration: none; /* Remove underline from links */
}

 a:hover {
    color: white; /* Text color for links */
    text-decoration: underline;
}

.container {
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items to the start of the cross axis */
}

.navbar {
    width: 200px; /* Set width for the navigation bar */
    background-color: #A8F0CB; /* Dark background for navbar */
    padding: 15px;
    color: Black;
    margin-top: 60px
}

.navbar ul {
    list-style-type: none; /* Remove default bullet points */
    padding: 10px;
}

.navbar li {
    margin: 10px 0; /* Space between items */
}

.navbar a {
    color: black; /* Text color for links */
    text-decoration: none; /* Remove underline from links */
}

.navbar a:hover {
    color: white; /* Text color for links */
    text-decoration: underline;
}

.content {
    flex: 1; /* Content area takes the remaining space */
    padding: 20px; /* Padding for content area */
}

header {
    background-color: #A8F0CB; /* Light background for header */
    padding: 10px;
    margin:0px;
}

/* Blinking Animation */
.blinking {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0; /* Invisible at halfway point */
    }
}