@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*main style*/ 
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Medium';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  border:none;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #181716;
}
body {
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  background: #181716;
  --bg: #181716 !important;
  --bar: #fff !important;
  overflow: hidden;
    -webkit-overflow-scrolling: touch;
  scrollbar-face-color:var(--bar);
  scrollbar-highlight-color:var(--bg);
  scrollbar-3dlight-color:var(--bg);
  scrollbar-darkshadow-color:var(--bg);
  scrollbar-shadow-color:var(--bg);
  scrollbar-arrow-color:var(--bg);
  scrollbar-track-color:var(--bg);
}
* {-webkit-tap-highlight-color:transparent; }
*, body, html, a, a:hover, img:hover, input, input:hover, label, label:hover, map, map:hover, area, area:hover {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}
*:focus { outline:none; }
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a {-webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */}
::-webkit-scrollbar {
   width:4px;
	 height:6px;
}
::-webkit-scrollbar-track-piece  {
   	background-color:var(--bg);
}
::-webkit-scrollbar-thumb {
   width: 10px;
  	background-color:var(--bar);
}

/*intro*/

    #preload-screen {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: black;
      z-index: 100;
      transition: opacity 1s ease;
    }
    #grain-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9999;
      opacity: 1;
      mix-blend-mode: overlay;
      background-image: url(https://i.imgur.com/ijbAnMc.jpeg);
      background-repeat: repeat;
      background-size: 300px; /* or 'cover' */
      animation: grainMove 1s steps(5) infinite;
    }
    @keyframes grainMove {
      0%   { background-position: 0 0; }
      25%  { background-position: 100px -5px; }
      50%  { background-position: -15px 35px; }
      75%  { background-position: 10px -220px; }
      100% { background-position: 0 0; }
    }
    
    .image-container {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      max-width: 800px;
      max-height: 70vh;
      display: none;
      z-index: 5;
    }
    #bg {
      position: fixed;
      opacity: 0;
      mix-blend-mode: exclusion;
      transition: opacity 2s ease;
      z-index: 10;
      background: url(https://i.imgur.com/D50gMqG.jpeg) center center !important;
      background-size: cover; 
      top: 0; left: 0;  
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

#title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 300px;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 20;
  font-family: 'Pretendard-ExtraBold', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  text-shadow: 0 0 3px rgba(24, 23, 22, 0.8);
  -webkit-text-stroke: 0.3px #4db1be;
  letter-spacing: -0.03px;
  color: #fff;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#title .left {
  margin-bottom: 150px;
}
#title .right {
  margin-top: 150px;
}

/*mobile*/
@media screen and (max-width:699px) {
  
   .image-container {
     max-width: 400px;
   }
   .image-container.final {
     max-width: 200% !important;
   }
    #title {
        font-size: 11px;
    }
  
}