:root {
  --primary-color: #252839;
  --secondary-color: #2b2e3f;
  --border-color: #4b4e5f;
  --text-color1: #fefefe;
  --text-color2: #f6f6f6;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
}

#back-btn {
  margin-top: clamp(20px, 5vw, 50px);
  margin-left: clamp(20px, 5vw, 50px);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: clamp(5px, 1vw, 8px);
  font-size: clamp(0.8rem, 3vw, 0.9rem);
  color: var(--text-color2);
  background-color: var(--secondary-color);
  box-shadow: 3px 4px var(--border-color);
  opacity: 0.8;
}
#back-btn:hover {
  background-color: var(--primary-color);
  color: var(--text-color1);
  opacity: 1;
}
#back-btn:active {
  box-shadow: 1px 2px;
  transform: translate(2px, 3px);
}

#back-to-top {
  position: fixed;
  bottom: 5%;
  right: 5%;
  border: none;
  border-radius: 50%;
  font-size: 3rem;
  cursor: pointer;
}