:root {
    --primary: #4a4c83ff;  /* Ultra Violet */
    --secondary: #171738ff;  /* Space Cadet */
    --accent: #7180b9ff;  /* Glaucous */
    --highlight: #a8bacfff;  /* Powder Blue */
    --light-accent: #bfe7c8ff;  /* Tea Green */
    --metallic: #5cc172ff;  /* Emerald */
    --soft-highlight: #9edaabff;  /* Celadon */
    --hover-effect: #dff3e4ff;  /* Honeydew */

/* Light theme */
.theme-light {
  --primary: #4a4c83ff;
  --secondary: #171738ff;
  --accent: #7180b9ff;
  --highlight: #a8bacfff;
  --light-accent: #bfe7c8ff;
  --metallic: #5cc172ff;
  --soft-highlight: #9edaabff;
  --hover-effect: #dff3e4ff;
}

/* Dark theme (example) */
.theme-dark {
  --primary: #2d2f55;
  --secondary: #0d0d1a;
  --accent: #535b97;
  --highlight: #8fa3bb;
  --light-accent: #a4d4b3;
  --metallic: #3e9b5e;
  --soft-highlight: #7cc891;
  --hover-effect: #ccebd6;
}


  /* Background and Text */
  --background-color: var(--accent);  /* Main background */
  --secondary-background: var(--secondary);  /* Secondary background */
  --text-color: var(--light-accent);  /* Main text */
  --subtext-color: var(--highlight);  /* Secondary text */

  /* Interactive Colors */
  --link-color: var(--primary);  /* Link color */
  --link-hover-color: var(--soft-highlight);  /* Link hover color */
  --button-color: var(--metallic);  /* Button color */
  --button-hover-color: var(--hover-effect);  /* Button hover color */
}

@media (min-width: 1001px){
#backToTop:hover {
  background-color: var(--metallic);
  transform: scale(1.1);
}

.side-menu {
  width: 5%;
  height: 100vh;
  background: var(--primary);
  position: fixed;
  left: 0;
  top: 0;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--light-accent);
  padding: 15px;
  position: relative;
  transition: width 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
}

.menu-item:hover {
  width: 100px;
  background: var(--primary);
  color: var(--metallic);
}

.menu-item i {
  font-size: 24px;
}
.menu-text {
  display: none;
  font-size: 12px;
}
.menu-item:hover .menu-text {
  display: inline;
  color: var(--metallic);
  font-weight: bold;
}

#flags ul li a {
  color: var(--light-accent);
  text-decoration: none;
  font-weight: bold;
  font-family:"Space Mono", monospace;
  font-size: 18pt;
}

#flags ul a:hover {
  color: var(--metallic);
  border-color: var(--metallic);
  padding: 5px 10px;
  border: 2px solid;
  border-radius: 3px;
}

#flags {
  position: absolute; /* Or fixed if you want it to stay at the bottom while scrolling */
  left: 50%;
  transform: translateX(-50%); /* Ensures it's centered */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#flags ul {
  list-style: none;
  padding: 0;


}

}
#en-button.hidden, #hu-button.hidden {
  display: none;
}


@media (max-width: 1000px){
/* Prevent content from being hidden under the fixed menu */
body {
  padding-top: 30px;
}
/* General menu styling */
.side-menu {
  background-color: var(--primary);
  padding: 10px 0;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Making the menu items horizontal */
.menu {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.menu-item {
  color: var(--highlight);
  text-decoration: none;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-item:hover {
  background-color: var(--hover-effect);
  border-radius: 5px;
  color: var(--secondary);
}
.menu-text{
  display: flex;
  font-size: 11pt;
}

/* Icons styling */
.menu-item i {
  font-size: 20px;
}

/* Language selection */
#flags ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

#flags li {
  display: inline;
}

#flags a {
  color: var(--highlight);
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  border: 1px solid var(--highlight);
  border-radius: 3px;
}

#flags a:hover {
  background-color: var(--highlight);
  color: var(--secondary);
}

}

@media(max-width:500px){
  .menu-text{
    display: none;
  }
}

body {
  background-color: var(--background-color); 
  color: var(--text-color); 
  font-family: Muli, sans-serif;
  margin-top: 60px; /* Add top margin to push content down */
}

h1, h2 {
  color: var(--highlight);
  font-family: "Space Mono", monospace;

}
.link, .link:visited {
  color: var(--metallic);
  font-weight: bold;
}

.link:hover {
  color: var(--link-hover-color);
  font-weight: bold;
}

/* Back to Top Button */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 65px;
  background-color: var(--metallic);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

#backToTop.show {
  display: block;
  opacity: 1;
}

#backToTop:hover {
  background-color: var(--soft-highlight);
}