@import "colors.css";

@keyframes H1_slidein {
  0% {
    opacity: 0.1;
    transform: translateX(-10%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes H2_slidein {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
    transform: translateX(-10%);
  }

  80% {
    transform: none;
  }

  100% {
    opacity: 1;
  }
}

@keyframes Navbar_slidein {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* hero styles */
.hero {
  width: 100%;
  height: 100vh;
  max-height: 976px;
  position: relative;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
}

.hero-content {
  color: var(--primary);
  font-family: Georgia;

  padding-left: 20vw;
  padding-right: 20vw;
  white-space: nowrap;
}

.hero-content h1 {
  position: relative;
  font-weight: bold;
  font-size: min(5.5rem, 6.5vw);
  margin: 0;
  animation: 1s cubic-bezier(.09, .68, .47, .92) H1_slidein;
}

.hero-content h2 {
  font-weight: normal;
  font-size: min(1.3em, 1.8vw);
  animation: 1.6s cubic-bezier(.09, .68, .47, .92) H2_slidein;
}


.hero-title {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 5rem;
}

.hero-title>h1::after {
  display: none;
  content: "";
  position: absolute;
  width: 1.2em;
  height: 0.05em;
  background-color: white;
  bottom: -2%;
  left: 0;
}

.hero-content>.pill {
  animation: 1.5s ease-in-out fadein;
}

.navbar-menu {
  animation: 1.5s cubic-bezier(.09, .68, .47, .92) Navbar_slidein;
}

.hero-title::before {
  content: " ";
  border: 0.25em solid var(--primary);
  border-radius: 32px;
  height: 100%;
  left: 0;
  position: absolute;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -0.7rem;
  left: 0;
  height: 0.7rem;
  width: 100%;
  background-color: var(--secondary);
}

.pill {
  background: none;
  white-space: nowrap;
  color: var(--primary);
  font-family: Helvetica;
  font-weight: bold;
  font-size: 1.1rem;
  border: 0.15em solid var(--primary);
  border-radius: 32px;
  padding: 0;
  transition: background ease-in-out 200ms;
}

.pill:hover {
  background: var(--primary);
}

.pill:hover .pill-link {
  color: var(--secondary);
  transition: color ease-in-out 200ms;
}

.pill-link {
  display: block;
  padding: 0.4em 1.4em 0.4em 1.4em;
  height: 100%;
  color: var(--primary);
  text-decoration: none;
}

/* letter style */
.letter {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 20vw;
  margin-right: 20vw;
}

#letter-box {
  position: relative;
  margin-right: auto;
  background-color: var(--secondary);
  border-radius: 0px 0px 100px 25px;
  padding-left: 1em;
  padding-right: 2.5em;
  text-align: center;
}

.letter-head {
  color: var(--primary);
  font-family: Helvetica;
  font-size: 1.75rem;
}

.letter-content {
  position: relative;
  padding-left: 5em;
  margin-top: 3vw;
  margin-bottom: 5em;
}

.letter-content h1,
.letter-content h2,
.letter-content h3 {
  font-family: Helvetica;
  font-weight: normal;
}

.letter-content::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border: 3px solid var(--secondary);
  border-radius: 32px;
}

.letter-content::after {
  opacity: 0.3;
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 12rem;
  height: 12rem;
  background-image: url(/icons/stamp.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-clip: content-box;
  transform: rotate(-20deg);
}

/* notice board style */
#show-more {
  width: 9em;
  margin-left: auto;
  margin-bottom: 5em;
}

.letter::after {
  content: "";
  position: absolute;
  height: 0.7rem;
  bottom: -0.7rem;
  right: 0;
  width: 100vw;
  background-color: var(--primary);
}

.notice-board {
  margin: 0;
  padding-left: 20vw;
  padding-right: 20vw;
  border: 0;
  display: flex;
  flex-direction: column;
  background: var(--secondary);
}

#notice-board-box {
  margin-left: auto;
  background-color: var(--primary);
  border-radius: 0px 0px 25px 100px;
  padding-left: 2.5em;
  padding-right: 1em;
  text-align: center;
}

.notice-head {
  color: var(--secondary);
  font-family: Helvetica;
  font-size: 1.75rem;
}

.notice-board-content {
  padding-top: 50px;
  list-style: none;
  color: #FFF;
  text-align: right;
  line-height: 2em;
}

.notice-board-element {
  font-size: 1.1em;
  position: relative;
  padding-bottom: 3rem;

  border-radius: 20px;
  padding: 2% 5% 3rem 5%;
  margin: -2% -5% 0 -5%;
  transition: background-color 0.2s ease,
    font-size 0.2s ease;
  display: block;
  text-decoration: none;
}

.notice-board-element:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.notice-board-element::after {
  /* content: " "; */
  border: 3px solid var(--primary);
  border-radius: 32px;
  position: absolute;
  width: 10%;
  right: 0;
  bottom: 0;
}

.notice-board-date {
  font-weight: bold;
  color: var(--accent);
}

.notice-board-link {
  font-weight: bold;
  text-decoration: none;
  color: var(--primary);
}

.notice-board-summary-container {
  text-align: justify;
  direction: rtl;
}

.notice-board-summary {
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  direction: rtl;
}

/* mobile responsiveness (yes, we made it desktop-first sorry)*/

@media only screen and (max-width: 937px) {
  .hero-content {
    white-space: initial;
    padding: 0 5vw 0 5vw;
    width: 80%;
  }

  .hero-content h1 {
      font-size: min(5.5rem, 22vw);
    }

  .hero-content h2 {
    font-size: min(1.5em, 5.6vw);
  }

  .hero-title {
    padding-left: 0;
  }

  .hero-title::before {
    display: none;
  }

  .hero-title>h1::after {
    display: initial;
  }

  .letter {
    margin: 0 8vw 0 8vw;
  }

  .notice-board {
    padding: 0 8vw 0 8vw;
  }

  .notice-board-element:hover {
    background-color: rgba(0, 0, 0, 0);
  }
}

@media only screen and (max-width: 602px) {
  .pill {
    font-size: min(5.5vw, 1.1rem);
  }

  .hero-content {
    width: 50%;
  }

  .hero-content h1 {
      font-size: min(4.5em, 18vw);
  }

  .hero-content h2 {
    font-size: min(1em, 4.5vw);
  }

  .hero-content>.pill+.pill {
    margin-top: 0.5em;
  }

  .letter {
    margin: 0 5vw 0 5vw;
  }

  #letter-box {
    margin-left: -5vw;
    white-space: nowrap;
    border-bottom-left-radius: 0;
  }

  #letter-box h1 {
    font-size: 1.5em;
  }

  .letter-content::before {
    display: none;
  }

  .letter-content {
    padding: 0 1em 0 1em;
  }

  .notice-board {
    padding: 0 5vw 0 5vw;
  }

  #notice-board-box {
    margin-right: -5vw;
    border-bottom-right-radius: 0;
  }

  #notice-board-box h1 {
    font-size: 1.5em;
  }
}