* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
}

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;
}

@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%);
}

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

@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;
}

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

/* Greeting text */
.greeting {
  position: relative;
  top: calc(6.6vh - 31px);
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 100%;
  color: #ebdbb2;
  padding-bottom: 4vh;
}

.greeting h1 {
  position: relative;
  text-align: center;
}

.greeting h2 {
  position: relative;
  text-align: center;
}

.other-info {
  position: relative;
  background-color: #1c2527;
  color: #ebdbb2;
  font-family: "Roboto", sans-serif;
  font-size: 1.2em;
  top: calc(4.6vh - 31px);
  width: fit-content;
  max-width: 100%;
  overflow-x: hidden;
  border: 1px solid transparent;
  border-radius: 5% / 15%;
  margin-left: 0.7vw;
  margin-right: 0.7vw;
  padding-bottom: 2vh;
}

.other-info p {
  position: relative;
  margin-left: 0.5vw;
  text-align: center;
}

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

/* Paragraphs Animation */
.first {
  animation: text-from-right 2s ease-out;
}
.second {
  animation: left-slide 2s ease-out;
}
.last {
  animation: text-from-right 2s ease-out;
}

/* 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;
}

@media screen and (width <= 736px) {
  html,
  body {
    height: auto;
  }

  footer {
    position: relative;
    bottom: 0;
  }

  .copyright {
    position: relative;
    margin-top: 2vh;
  }
}

@media screen and (width <= 655px) {
  .other-info {
    font-size: 1rem;
  }
}

/* Border-radius-related Media Queries */
@media screen and (500px <= width <= 1024px) {
  .other-info {
    border-radius: 8% / 10%;
  }
}
@media screen and (400px <= width <= 500px) {
  .other-info {
    border-radius: 10% / 7%;
  }
}

@media screen and (360px <= width <= 399px) {
  .other-info {
    border-radius: 10% / 6%;
  }
}
 
@media screen and (width <= 359px) {
  .other-info {
    border-radius: 13% / 6%;
  }
}

@media screen and (height <= 840px) {
  .copyright {
    position: relative;
    margin-top: 2vh;
  }
}

@media screen and (height <= 690px) {
  .other-info {
    margin-top: 9vh;
    padding-top: 5vh;
  }
}