:root {
  --primary-color: #010b26;
  --button-color: #f1f3f9;
}

.works-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.top-spa {
  background-color: var(--primary-color);
  width: 100%;
  height: 250px;
}

.bottom {
  display: flex;
  flex-direction: row;
  margin-left: 5%;
  margin-right: 5%;
}

.side-menu {
  display: flex;
  flex-direction: column;
  border: 1px black solid;
  width: 25%;
  margin-bottom: 5%;
}

.side-menu-head {
  background-color: var(--primary-color);
  width: 100%;
}

.side-menu-head h1 {
  text-align: center;
  font-size: 1.5vw;
  color: white;
  margin: 0%;
  padding: 5%;
}

.side-menu ul,
li {
  width: 100%;
  list-style-type: none;
  padding: 0;
  text-align: center;
  margin-bottom: 5%;
}

.side-menu a {
  margin: auto;
  display: block;
  text-decoration: none;
  color: black;
  border: 1px black solid;
  padding: 3% 0%;
  font-size: 1.2vw;
  width: 80%;
}

.side-menu a:hover {
  background-color: #010b26;
  color: white;
}

.works-main {
  margin-left: 5%;
  display: flex;
  flex-direction: column;
  width: 75%;
  position: relative;
  align-items: center;
}

.works-main-img {
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  width: 35%;
  height: 400px;
  margin-top: -200px;
  align-items: flex-end;
  justify-content: center;
}

.works-main-img h2 {
  color: white;
  font-size: 2vw;
  font-weight: 500;
}

.works-main p {
  margin-top: -2%;
  margin-bottom: 10%;
  font-size: 1.5vw;
  line-height: 200%;
}