home.css

@font-face {
  font-family: Gilroy-Light;
  src: url(fonts/gilroy-light.otf);
}

@font-face {
  font-family: Gilroy-Medium;
  src: url(fonts/gilroy-medium.otf);
}

@font-face {
  font-family: Gilroy-Bold;
  src: url(fonts/gilroy-bold.otf);
}

html {
  /* Set font size for easy rem calculations
   * default document font size = 16px, 1rem = 16px, 100% = 16px
   * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
  */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 912px / 16px = 57em */
@media (max-width: 57em) {
  html {
    font-size: 50%;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  width: 100%;
}

#container {
  max-width: 1920px;
  min-width: 400px;
  display: grid;
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: 60% auto;
}

/* 1275px / 16px = 80em */
@media (max-width: 80em) {
  #container {
  grid-template-columns: auto 20%;
  }
}

/* 928px / 16px = 58em */
@media (max-width: 58em) {
  #container {
  grid-template-columns: auto 25px;
  }
}

#top-container {
  grid-area: top;
  display: flex;
}

.nav {
  background-color: #fff;
  height: 407px;
  width: 37px;
  writing-mode:vertical-rl;
  margin-top: 130px;
  margin-right: min(17.5vw, 336px);
}


/* 943px / 16px = 59em */
@media (max-width: 59em) {
  .nav {
  margin-right: auto;
  }
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin: 0px;
  margin-right: 2.5px;
}

nav li {
  display:inline-block;
  list-style-type: none;
  font-family: Gilroy-Light;
  font-size: 25px;
}

a:link {
  text-decoration: none;
  color: #000;
}

a:visited {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: none;
  font-family: Gilroy-Medium;
}

a:active {
  text-decoration: none;
  font-family: Gilroy-Medium;
}

.rotate {
  display: block;
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#logo {
  width: 384px;
  height: auto;
  margin-top: 170px;
  margin-left: auto;
  display: block;
}

/* 1275px / 16px = 80em */
@media (max-width: 80em) {
  #logo {
    width: 300px;
    margin-top: 186px;
  }
}

/* 700px / 16px = 44em */
@media (max-width: 44em) {
  #logo {
    width: 239px;
    margin-top: 197px;
  }
}

/* 1120px / 16px = 70em */
@media (max-width: 70em) {
  #logo {
    margin-right: 20%;
  }
}

/* 848px / 16px = 53em */
@media (max-width: 53em) {
  #logo {
    margin-right: 15%;
  }
}

/* 496px / 16px = 31em */
@media (max-width: 31em) {
  #logo {
    margin-right: 29px;
  }
}

#footer_container {
  grid-area: footer;
  display: grid;
  grid-template-columns: auto 98px 21px 80px 10.5px 80px 17.5%;
  grid-template-areas: ". lang . fb . insta .";
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

#language_wrapper {
  grid-area: lang;
  width: 98px;
  height: 88px;
  display: flex;
  color: #fff;
  font-family: Gilroy-Light;
  font-size: 2.5rem;
  justify-content: space-evenly;
  align-items: center;
}

#language_wrapper a:link {
  color: #fff;
}

#language_wrapper a:visited {
  color: #fff;
}

#language_wrapper a:hover {
  font-family: Gilroy-Bold;
}

#language_wrapper a:active {
  font-family: Gilroy-Bold;
}

#language_line {
  background-color: #fff;
  width: 3px;
  height: 38px;
  margin-bottom: 6px;
}

#fb_wrapper {
  background-color: #fff;
  grid-area: fb;
  width: 80px;
  height: 88px;
}

#facebook_link {
  display: block;
  height: 65px;
  width: 63.5px;
  margin:auto;
  margin-top: 5px;
}

#insta_wrapper {
  background-color: #fff;
  grid-area: insta;
  width: 80px;
  height: 88px;
}

#instagram_link {
  display: block;
  height: 65px;
  width: 63.5px;
  margin:auto;
  margin-top: 5px;
}

#vertical_line {
  background-color: #33ff98ff;
  width: 3px;
  height: 311px;
  margin-left: 19%;
  margin-right: 29px;
  margin-bottom: auto;
}

/* 1120px / 16px = 70em */
@media (max-width: 70em) {
  #vertical_line {
    margin-left: 0px;
  }
}

#horizontal_line {
  grid-area: horizontal_line;
  background-color: #33ff98ff;
  width: 943px;
  height: 3px;
  margin-left: auto;
  margin-top: 42.9px;
  margin-bottom: 25.5px;
}

/* 943px / 16px = 59em */
@media (max-width: 59em) {
  #horizontal_line {
    width: 100%;
  }
}

#text_container {
  grid-area: text;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  font-family: Gilroy-Light;
  font-size: 2.5rem;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-right: 8.3%;
  margin-top: 98px;
}

/* 1275px / 16px = 80em */
@media (max-width: 80em) {
  #text_container {
    padding-left: 5vw;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

#text {
  width: 660px;
}

/* 700px / 16px = 44em */
@media (max-width: 44em) {
  #text {
    width: 100%;
  }
}

#container {
  grid-template-areas:
    "top top"
    "text ."
    "horizontal_line horizontal_line"
    "footer footer";
}