/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #FFE5F0; 
  background-size: cover;
  color: #F494C6;
  font-family: Arial Black;
}

.header {
  overflow: hidden;
  background-color: #F9BEDC;
  padding: 0;
  min-width: 100vw;
  }

.header-right {
  position: fixed;
  top: 60px;
  left: 200px;
  width: 500px;
  margin-top: 0;
  font-family: Luminari;
  font-size: 30px;
  display: flex; gap: 100px
}

/*.sidebar {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  width: 150px;*/
/*  background-color: #F9BEDC;*/
/*  position: fixed;*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

/*.sidebar a {*/
/*  display: block;*/
/*  color: #F494C6;*/
/*  padding: 5px;*/
/*  text-decoration: none;*/
/*}*/

/* Links on mouse-over */
/*.sidebar:hover {*/
/*  background-color: #F494C6;*/
/*  color: white;*/
/*}*/

/*.sidebar-gif-container {*/
  /* This is crucial for absolute positioning of child elements relative to the container */
/*  position: absolute; */
  /* Set size and styles for your container (adjust as needed) */
/*  width: 200px;*/
/*  height: 200px;*/
/*}*/

/*.sidebar-gif-container {*/
  /* Position the GIF exactly over the container */
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: fill; /* Ensures the GIF covers the area nicely */
  /* Initially hide the GIF */
/*  opacity: 0;*/
  /* Add a smooth transition for the fade effect */
/*  transition: opacity 0.3s ease;*/
/*}*/

/* When the container is hovered, change the GIF's opacity */
/*.sidebar-gif-container:hover .sidebar {*/
/*  opacity: 1;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: fill;*/
/*}*/