* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

body::before {
  content: '';
  background-image: url(../images/leaves.webp);
  filter: blur(1.1px) brightness(0.9);
  position: fixed;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

header {
  overflow-x: hidden;
  padding-bottom: 5px;
}

header #Main_logo {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 20vh;
  width: auto;
}

/* Logo Size Adjustment */
@media screen and (width <= 365px) {
  header #Main_logo {
    height: 15vh;
    width: auto;
  }
}

.menu {
  position: relative;
  width: 100vw;
  height: 31px;
  text-wrap-mode: nowrap;
  animation: left-slide 2s ease-out;
}

.menu #About_Me {
  position: absolute;
  left: calc(50% + 180.17px);
  transform: translateX(-50%);
}

.menu #Contacts {
  position: absolute;
  left: calc(50% - 180.17px);
  transform: translateX(-50%);
  background-color: #706d54
}

.menu #Homepage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (width <= 500px) {
  .menu #About_Me {
    left: calc(50% + 100.17px);
  }
  .menu #Contacts {
    left: calc(50% - 100.17px);
  }
}

.menu a {
  color: #ebdbb2;
  background-color: #665c54;
  border: 3px solid #9a7b4f;
  border-radius: 10px / 10px;
  padding: 3px;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  transition: all 50ms linear;
}
.menu a:hover {
  background-color: #706d54;
  outline: 2px solid #706d54;
  outline-offset: 3px;
}

/* Greeting text */
h1 {
  position: relative;
  top: calc(6.6vh - 31px);
  max-width: 100%;
  color: #ebdbb2;
  text-align: center;
  padding-bottom: 4vh;
}

.logos-container {
  display: flex;
  position: relative;
  justify-content: center;
  gap: 40px;
  top: 10vh;
  animation: text-from-right 2s ease-out;
}

.logos-container a {
  width: 96px;
  height: 96px;
}

@media screen and (width <= 500px) {
  .logos-container {
    flex-wrap: wrap;
  }
}

/* Languages */
.languages {
  position: fixed;
  bottom: 0;
  right: 0.25vw;
  margin-bottom: 1vh;
  font-family: "Roboto", "sans-serif";
  font-weight: bold;
  z-index: 100;
}

.languages #ru {
  text-decoration: none;
  color: #ebdbb2;
}

.languages #en,
.languages #ua {
  text-decoration: none;
  margin-right: 0.5vw;
  color: #ebdbb2;
}

.languages #en {
  text-decoration: underline 4px #b8bb26;
}

.copyright {
  position: fixed;
  bottom: 0;
  left: 0.25vw;
  margin-bottom: 1vh;
  color: #ebdbb2;
  z-index: -1;
}

/* Animations */

@keyframes text-from-right {
  from {right: 200vw;}
  to {right: 50%; transform: translateX(50%);}
}

@keyframes left-slide {
  from {left:200vw;}
  to {left:0;}
}