:root {
  --red: rgb(226, 9, 24);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  background-color: black;
}

.menu {
  background-color: var(--red);
  color: white;

  button {
    transition: 0.3s;

    &:hover {
      background-color: rgb(241, 25, 39);
      color: black;
      cursor: pointer;
    }
  }
}

.notice {
  background-color: rgb(241, 25, 39);
  padding: 15px;
  border-radius: 3px;
}

.red {
  background-color: var(--red);
}

.first-div,
.second-div,
.third-div,
.fourth-div {
  min-height: 100vh;
}

.fifth-div {
  min-height: calc(100vh - 64px - 60px);
  background-color: #484444;
}

.sixth-div {
  min-height: calc(100vh - 120px - 60px);
}

.first-div {
  background-image: url("images/utolsooldal_edited.jpg");
  background-position: bottom;
  background-size: cover;
}

.bg-food {
  background-image: url("images/change.jfif");
  background-position: top;
  background-size: cover;
}

.second-div {
  background-color: black;
}

.third-div {
  background-image: url("images/barbell.jpg");
  background-position: center;
  background-size: cover;
}

.fourth-div {
  background-image: url("images/barbell2.png");
  background-position: center;
  background-size: cover;
}

.contact-image {
  background-image: url("images/contact.jpg");
  background-position: center;
  background-size: cover;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  letter-spacing: 8px;
  line-height: 120%;
}

.raleway {
  font-family: "Raleway", sans-serif;
}

.sitting {
  background-image: url("images/sitting.jpg");
  min-height: calc(100vh - 64px);
  background-position: center;
  background-size: cover;
}

.brand-icon,
.custom-button {
  transition: 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.custom-button {
  border-radius: 3px;

  &:hover {
    cursor: pointer;
  }
}