/* General page styling */
body {
  background-color: #FADEEB; /* light pink */
  color: black;              /* default text color */
  font-family: arial, sans-serif;
  margin: 0;
  display: flex;
}

/* Sidebar styling */
.sidebar {
  height: 100vh;
  width: 200px;
  background-color: #ECD5F5;
  color: purple;
  padding-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: blue;
  padding: 12px 20px;
  text-decoration: none;
  transition: background 0.3s;
}

.sidebar a:hover {
  color: #FFFFFF;
}

/* Main content */
.main-content {
  margin-left: 200px;
  padding: 20px;
  flex: 1;
  z-index: 1; /* make sure it's above background elements */
}

/* Main content links */
.main-content a {
  color: #003AFF; 
  text-decoration: none;
}

.main-content a:hover {
  color: #FF0000;
}

/* Images spacing */
img {
  margin-right: 20px;
  display: inline-block;
}

/* Silkscreen font styles */
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
}

/* Rainbow blinking text */
.rainbow-blink-text {
  background: linear-gradient(5deg, aqua, pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: blink 1s infinite alternate;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Link colors */
a {
  color: blue;
  text-decoration: none;
}

a:hover { color: red; }
a:visited { color: purple; }
a:active { color: green; }

/* Floating objects */
.container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  z-index: 0; /* behind main content */
}

.floating-object {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  animation: floatAnimation 10s infinite linear forwards;
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
}