@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

* {
  box-sizing: border-box;
}

/* header */

.main-header-include {
  position: relative;
  z-index: 5;

  top: 0;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-bottom: 2px #999 solid;
  position: sticky;
}

.main-header-include .menu-item-container,
.main-header-include .main-menu,
.main-header-include {
  height: 80px;
}

.main-header-include .main-menu {
  width: 85%;
}

.main-header-include .main-menu > ul {
  display: flex;
  justify-content: center;

  height: 100%;
}

/* main menu */

.main-header-include .menu-item-container {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  border-bottom: 4px solid transparent;
}

.main-header-include .menu-item-container:last-of-type {
  padding: 0;
}

.main-header-include .menu-item-container > p,
.main-header-include .menu-item-container > a {
  width: 100%;
  height: 80px;

  padding: 0 40px;

  display: flex;
  align-items: center;
}

.main-header-include .red-border {
  border-bottom: 4px solid red;
}

.main-header-include .force-active {
  border-bottom: 4px solid red;
  color: red;
}

.main-header-include .fa-solid.fa-angle-up.force-red,
.main-header-include .main-menu .force-red,
.main-header-include .main-menu .red,
.main-header-include .main-menu .fa-solid.red {
  color: red;
}

.main-header-include .main-menu .force-inactive {
  color: black;
  border: none;
}

.main-header-include .main-menu a,
.main-header-include .main-menu p {
  user-select: none;
  transition: color 300ms;
  text-decoration: none;
  color: black;
  font-size: 1.6rem;
  font-weight: 600;
}

.main-header-include .menu-item-container:hover .fa-solid.fa-angle-up,
.main-header-include .menu-item-container:hover > a,
.main-header-include .menu-item-container:hover > p {
  transition: color 300ms;
  color: rgb(240, 1, 1);
}

.main-header-include .fa-solid.fa-angle-up {
  transform: translateY(-10%);
  rotate: 180deg;

  margin-left: 10px;

  font-size: 1.6rem;
  color: black;
}

.main-header-include .fa-solid.fa-angle-up.arrow-flip {
  rotate: 0deg;
}

/* drop down menu */

.main-header-include .dropdown-menu {
  display: none;

  position: absolute;
  top: 125px;
  left: 7.5%;
  right: 7.5%;

  margin: 0 40px;
  margin-top: 25px;

  border-radius: 5px;
  background-color: white;

  cursor: default;
}

.main-header-include .dropdown-menu a {
  color: rgb(58, 58, 58);
  user-select: none;
}

.main-header-include .dropdown-active {
  display: flex;
}

.main-header-include .dropdown-menu li {
  flex: 1;
}

.main-header-include .dropdown-menu > li > span {
  margin: 40px 20px 30px 50px;
  display: block;
}

.main-header-include .dropdown-menu > li > span > a:hover {
  text-decoration: solid;
  text-decoration-color: black;
  text-decoration-line: underline;
}

.main-header-include .submenu-list a {
  font-size: 1.1rem;
  font-weight: 600;

  display: inline-block;
  margin: 25px 20px 20px 50px;
}

.main-header-include .submenu-list li:last-of-type a {
  margin-bottom: 60px;
}

.main-header-include .submenu-list a:hover {
  text-decoration: solid;
  text-decoration-color: gray;
  text-decoration-line: underline;
}

.brightness-change {
  height: 100vh;
}

.brightness {
  background-color: rgba(0, 0, 0, 0.7);
}

.hidden {
  display: none;
}