@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  overflow-x: hidden;
  margin: 0;
  position: relative;
  overflow-y: scroll;
  background-color: black;
  font-family: "Pretendard", sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

footer {
  z-index: 10;
  transform: translateY(100%);
  width: 100%;
  height: fit-content;
}

section {
  position: fixed;
  width: 100%;
  height: 100vh;
}

header {
  height: 110px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  z-index: 10;
  color: white;
}

.darkness-mobile {
  filter: brightness(var(--brightness, 0.5));
}

/* Custom scrollBar Start */
.scrollBar {
  z-index: 10;
  position: fixed;
  width: 3px;
  height: 40vh;
  background: #4e414199;
  right: 10px;
  top: 30vh;
  border-radius: 4px;
}

.circle {
  width: 3px;
  height: 2vh;
  border-radius: 25px;
  background: hwb(280 18% 36%);
  position: absolute;
}
/* Custom scrollBar End */

/* Header element Start */
.menu-btn:hover .menu-btn {
  background-color: white;
}
.menu-btn:hover .menu-btn-dot {
  transform: translateX(10px) rotate(90deg);
}

#menu-contents::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-image: url(./menu-bg.webp); */
  background-size: cover;
  filter: brightness(0.4);
}

#menu-contents {
  position: absolute;
  top: calc(55px + 2em);
  right: 2.8rem;
  width: 15em;
  display: flex;
  flex-direction: column;
  padding: 20px 0.3125em;
  text-transform: uppercase;
  color: white;
  border: #ffffff29 1px solid;
  background-color: #000000;
}

#menu-contents li {
  border-bottom: #ffffffdf 1px solid;
  cursor: pointer;
}

.--opend #menu-contents {
  visibility: visible;
}

@media (max-width: 767px) {
  .--opend #menu-contents {
    right: 1.575rem;
  }
}

#menu-content {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.5em 0.5em;
  line-height: 1;
}

.menu-title {
  z-index: 10;
  font-size: 1.625em;
  font-weight: 300;
}
/* Header element End */

/* ************ Common element Start ************ */
.scrollElement {
  position: absolute;
  height: 100%;
  width: 1px;
}

#canvas_section {
  perspective: 2000;
  -webkit-perspective: 2000;
  transform-style: preserve-3d;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.intro-txt {
  color: white;
  font-size: 4vw;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-family: orbitron;
}

@media (max-width: 767px) {
  .intro-txt {
    font-size: 6vw;
  }
}
/* ************ Common element end ************ */

/* ************ Mission Start ************ */
#mission-content {
  top: 15%;
  right: 50%;
  transform: translate(50%, -50%);
  scale: 0;
}

#mission-content-1 {
  opacity: 0;
  transform: translateX(-20%);
}
#mission-content-2 {
  opacity: 0;
  transform: translateY(-100%);
}
/* ************ Mission End ************ */

/* ************ Roadmap Start ************ */
#roadmap-content {
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translate(-5.5%, -50%);
}

/* ************ Roadmap End ************ */

/* ************ Core Business Start ************ */
.card-line {
  height: 0px;
  padding-bottom: 0;
}

.card-anim {
  transform-style: preserve-3d;
}

.card-items {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 300px;
  min-height: 400px;
  width: 30vh;
  height: 40vh;
  border-radius: 1em;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.card-items-front {
  background: url(./card_bak.png);
  background-size: cover;
  border: 2px solid rgb(180, 180, 180);
  padding: 1em;
  border-radius: 1em;
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(184, 184, 184);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card-items-back {
  z-index: 11;
  overflow-y: scroll;
  padding: 1em;
  /* border-radius: 1em; */
  backface-visibility: hidden;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 107%;
  background-color: white;
  transform: rotateY(180deg);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card-items-back::-webkit-scrollbar,
.card-items-front::-webkit-scrollbar {
  display: none;
}
/* ************ Core Business End ************ */

/* ************ Team Member Start ************ */
#name {
  background-image: linear-gradient(290deg, #ffc867 10%, #ab3ce5 55%);
  -webkit-background-clip: text;
  color: transparent;
}

#title {
  color: #ffc867;
  font-size: 28px;
}

/* ************ Team Member End ************ */

/* ************ Partnership Start ************ */
.custom_slider li {
  background-color: rgba(255, 255, 255, 1);
  color: white;
  margin: 0 10px;
  padding: 25px;
  border-radius: 15px;
  justify-content: center;
}

.custom_slider li img {
  width: 80%;
}

/* ************ Partnership End ************ */

/* ************ Modal Start ************ */
.modal {
  position: fixed;
  z-index: 11;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  word-break: break-all;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-container {
  background-color: #181818;
  color: white;
  overflow-y: auto;
  margin: 130px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
  height: 80vh;
  border-radius: 20px;
  border: #250c4c 1px solid;
}

.modal-header {
  height: 25px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}

.modal-content {
  height: 100%;
  padding: 10px;
}

.modal-container::-webkit-scrollbar {
  display: none;
}

.close {
  color: #aaa;
  float: right;
  width: 20px;
  height: 20px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* ************ Modal End ************ */

/* ************ Footer element Start ************ */
.footer_sns {
  width: 40px;
}

.footer_sns a:hover#telegram {
  color: #039be5;
  border: 2px solid #039be5;
}

.footer_sns a:hover#medium {
  color: gray;
  border: 2px solid #000000;
}

.footer_sns a:hover#discord {
  color: #5865f2;
  border: 2px solid #5865f2;
}

.footer_sns a:hover#youtube {
  color: #ff0000;
  border: 2px solid #ff0000;
}

.footer_sns a:hover#twitterX {
  color: gray;
  border: 2px solid #000000;
}

/* ************ Footer element End ************ */

/* ************ Content Text Start ************ */

#content-txt-1 {
  top: 15%;
  right: 50%;
  transform: translate(50%, 0%);
  scale: 0;
}

/* ************ Content Text End ************ */