@import url(./_global.css);

/* 
--------------------------------------------------------------
layout > container
 */

.l-container {
  width: 100%;
  margin-inline: auto;
  padding-bottom: 100px;
}

.l-container--s {
  width: 80%;
  max-width: 1720px;
  margin-inline: auto;
}

/* 
--------------------------------------------------------------
layout > flex
 */

.l-flex {
  display: flex;
}

.l-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-flex-colmuns-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 
--------------------------------------------------------------
layout > header
 */

.l-header {
  margin-bottom: 345px;
}

.l-header-inner {
  position: relative;
  width: 100%;
  margin-inline: auto;
  height: 100vh;
  display: flex;
  flex-direction: column-reverse;
}

.l-header-video {
  width: 80%;
  height: 80%;
  position: absolute;
  bottom: 10%;
  right: 0;
  z-index: -1;
  object-fit: cover;
  border: 3px solid var(--main);
  border-radius: 24px;
}

.l-header-sticker {
  width: 100%;
  height: 140%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 70%;
  left: 50%;
  z-index: -1;
  object-fit: cover;
}

.l-header-inner-title {
  font-family: "Rubik Mono One", sans-serif;
  font-size: 8vw;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ff3b3b;
  text-shadow: 0 0 2px #ff3b3b, 0 0 1px #ff3b3b, 0 0 15px #ff9c00,
    0 0 40px #ff3b3b;
  transition: text-shadow 0.2s ease;
  display: inline-block;
}

.l-header-inner-logo {
  width: 30%;
}

/* 
--------------------------------------------------------------
layout > other page
 */

.l-otherpage-nav {
  width: 100%;
  padding: 10px;
}

.l-otherpage-title {
  font-size: 2vw;
  color: var(--main);
  font-size: 25px !important;
}

.l-otherpage-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.l-otherpage-nav-list-item {
  border: 5px solid var(--black);
  position: relative;
  border-radius: 24px;
}

.l-otherpage-nav-list-item-inner {
  width: 100%;
  height: 30vh;
}

.l-otherpage-nav-list-item-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}

.l-otherpage-nav-list-item-background video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.l-otherpage-nav-list-item-inner-title {
  font-size: 5vw;
  z-index: 100;
}

.l-otherpage-nav-list-item-inner-title--top {
  color: #e54423;
  text-shadow: 0 0 2px #e54423, 0 0 1px #e54423, 0 0 15px #000, 0 0 40px #e54423;
}

.l-otherpage-nav-list-item-inner-title--top:hover {
  color: #fff;
}

.l-otherpage-nav-list-item-inner-title--practice {
  color: #09ff4e;
  text-shadow: 0 0 2px #09ff4e, 0 0 1px #09ff4e, 0 0 15px #000, 0 0 40px #09ff4e;
}

.l-otherpage-nav-list-item-inner-title--practice:hover {
  color: #f600b1;
}

.l-otherpage-nav-list-item-inner-title--teams {
  color: #f67200;
  text-shadow: 0 0 2px #f67200, 0 0 1px #f67200, 0 0 15px #fff, 0 0 40px #f67200;
}

.l-otherpage-nav-list-item-inner-title--teams:hover {
  color: #098dff;
}

.l-otherpage-nav-list-item-inner-title--event {
  color: #f0f600;
  text-shadow: 0 0 2px #f0f600, 0 0 1px #f0f600, 0 0 15px #000, 0 0 40px #f0f600;
}

.l-otherpage-nav-list-item-inner-title--event:hover {
  color: #00f6f6;
}

.l-otherpage-nav-list-item-inner-title--contact {
  color: #ad09ff;
  text-shadow: 0 0 2px #ad09ff, 0 0 1px #ad09ff, 0 0 15px #fff, 0 0 40px #ad09ff;
}

.l-otherpage-nav-list-item-inner-title--contact:hover {
  color: #52f600;
}

/* 
--------------------------------------------------------------
layout > footer
 */

.l-footer {
  width: 100%;
  margin-inline: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding-inline: 40px;
  padding-block: 20px;
}

.l-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-flex-colmuns-center {
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.l-footer-logo {
  height: 10vh;
  aspect-ratio: 1/1;
}

.l-footer-logo img {
  object-fit: cover;
}

.l-footer-text {
  font-family: "Dela Gothic One", sans-serif;
  color: var(--main);
  font-size: 1vw;
}

.l-footer-nav-list {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.l-footer-nav-list-item {
  width: 5vh;
}