@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200..700&display=swap');
		
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Stack Sans Text', sans-serif;
        }
		html {
			font-family: "Noto Serif KR", serif;
  			font-weight: 500;
  			font-size: 16px;
  			line-height: 1.6;
  			word-break: keep-all;
		}
		section{ 
			width:100%;
			height: 100vh;
			min-height: 100vh;
			overflow: hidden;
			position: relative;
			
		 }


	  .bg-black{background: black;}
      .wrap{width: 800px; margin: auto; padding-top: 10px; padding-bottom: 10px;}
      .flex{display: flex; justify-content: space-between;}
      .logo h1{ font-size: 1.5rem; padding: 8px 12px; cursor: pointer; }
      .highlight{color: #FFD54F;}
      ul{list-style: none;}
      ul li a{text-decoration: none;
         font-family: 'Suit', sans-serif;
            display: block;
            padding: 15px 12px;
            color: grey}
      ul li a:hover{background: #FFD54F; color: black; transition: all 1s;}		
        .header-group {
		    position: relative;
		    top: 0;
		    left: 50%;
		    transform: translateX(-50%);
		    min-width: 1920px;
		    min-height: 1080px;
		    height: 1080px;
		}

		.layer {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;    
		    height: auto;
		}

		.base {
		    position: relative; 
		    z-index: 1;
		}
		.base2 {
    		width: 100%;
    		display: block;
   			position: relative; 
    		z-index: 1;
		}

		.mid { z-index: 2; }
		.top { z-index: 3; }
		.bigtext {
           position: absolute;
           top: 18%;
           left: 50%;
           transform: translateX(-50%);
           font-size: 237px;       
           color: #FFE241;
           font-weight: 900;
           z-index: 2;
           white-space: nowrap;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }

        .smalltext {
           position: absolute;
           top: 12%;
           left: 60%;           
           font-size: 56px;
           color: white;
           font-weight: 900;
           z-index: 2;
           text-align: right;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .smalltext2 {
           position: absolute;
           top: 72%;
           left: 13%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 6;
           text-align: left;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .bigtext2 {
           position: absolute;
           top: 3%;
           left: 64%;
           transform: translateX(-50%);
           font-size: 244px;       
           color: #FFE241;
           font-weight: 900;
           z-index: 2;
           white-space: nowrap;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }

        .smalltext3 {
           position: absolute;
           top: 3%;
           left: 15%;           
           font-size: 56px;
           color: white;
           font-weight: 900;
           z-index: 2;
           text-align: left;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .part2{background-image: linear-gradient(360deg,rgba(57, 122, 36, 1) 0%, rgba(34, 72, 21, 1) 15%, rgba(5, 10, 3, 1) 67%, rgba(0, 0, 0, 1) 100%);
    		display: block;
    		position: relative;
		    justify-content: center;
		    align-items: center;
		    text-align: center;
		    height: 1600px;
		    min-height: 1600px;
		    max-height: 1600px;
		    width: 100%;
		  }
		  .twitchchat {
           position: absolute;
           top: 18%;
           left: 21%;           
           z-index: 6;
           width: 21%;
        }
        .kicks {
           position: absolute;
           top: 77%;
           left: 56%;           
           z-index: 6;
           width: 40%;
        }
        .twitch {
           position: absolute;
           top: -8%;
           left: 71%;           
           z-index: 6;
           width: 34%;
           animation: rot 5s infinite linear;
        }

        @keyframes rot{
                from{transform: rotateY(0deg);}
                to{transform: rotateY(360deg);}
        }
        .youtube {
           position: absolute;
           top: 16%;
           left: -4%;           
           z-index: 6;
           width: 34%;
           transform: rotate(270deg);
        }
        .text1section2 {
           position: absolute;
           top: 5%;
           left: 19%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .text2section2 {
           position: absolute;
           top: 26%;
           left: 46%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .text3section2 {
           position: absolute;
           top: 45%;
           left: 46%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
        .youtubevid {
           position: absolute;
           top: 31%;
           left: 48%;           
           z-index: 6;
           width: 30%;
        }
        .text1section3 {
           position: absolute;
           top: 13%;
           left: 32%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
            background: purple;
            padding: 20px;
        }
        .text2section3 {
           position: absolute;
           top: 67%;
           left: 48%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
            background: purple;
            padding: 20px;
        }
        .oldpew {
           position: absolute;
           top: 20%;
           left: 15%;           
           z-index: 6;
           width: 25%;
           border-radius: 0%;
        }
         .oldspeed {
           position: absolute;
           top: 56%;
           left: 15%;           
           z-index: 6;
           width: 25%;
           border-radius: 0%;
        }
        .zeroview {
           position: absolute;
           top: 75%;
           left: 34%;           
           z-index: 6;
           width: 10%;
           border-radius: 1%;
        }
        .text1section4 {
           position: absolute;
           top: 39%;
           left: 48%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
			background: rgba(0, 0, 0, 0.6);
		    padding: 20px 30px;
		    border-radius: 0px;
		    color: white;
        }
         .twitchcon {
           position: absolute;
           top: 26%;
           left: 15%;           
           z-index: 6;
           width: 27%;
           border-radius: 0%;
        }
         .esportvenue {
           position: absolute;
           top: 64%;
           left: 60%;           
           z-index: 6;
           width: 25%;
           border-radius: 0%;
        }
         .cookingstream {
           position: absolute;
           top: 106%;
           left: 15%;           
           z-index: 6;
           width: 27%;
           border-radius: 0%;
        }
         .text1section5 {
           position: absolute;
           top: 10%;
           left: 36%;           
           font-size: 40px;
           color: #FFE241;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
         .text2section5 {
           position: absolute;
           top: 33%;
           left: 48%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
            background: purple;
            padding: 20px;
        }
         .text3section5 {
           position: absolute;
           top: 110%;
           left: 48%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
            background: purple;
            padding: 20px;
        }
         .text4section5 {
           position: absolute;
           top: 70%;
           left: 19%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: left;
            background: purple;
            padding: 20px;
        }
         .star1 {
           position: absolute;
           top: -1%;
           left: 71%;           
           z-index: 1;
           width: 34%;
        }
         .star2 {
           position: absolute;
           top: 64%;
           left: 2%;           
           z-index: 1;
           width: 24%;
           transform: rotate(60deg);
        }
         .star3 {
           position: absolute;
           top: 122%;
           left: 81%;           
           z-index: 1;
           width: 15%;
        }
         .text1section6 {
           position: absolute;
           top: 10%;
           left: 44%;           
           font-size: 40px;
           color: #FFE241;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
         .text2section6 {
           position: absolute;
           top: 23%;
           left: 34%;           
           font-size: 24px;
           color: black;
           font-weight: 900;
           z-index: 7;
           text-align: center;
            background: #FFE241;
            padding: 20px;
        }
         .text3section6 {
           position: absolute;
           top: 34%;
           left: 34%;           
           font-size: 24px;
           font-weight: 900;
           z-index: 7;
           text-align: center;
         background: rgba(0, 0, 0, 0.6);
          padding: 20px 30px;
          border-radius: 0px;
          color: white;
        }
         .ninjagif {
           position: absolute;
           top: 33%;
           left: 14%;           
           z-index: 7;
           width: 15%;
        }
        .sticker1{
            animation: opa 3s infinite alternate linear;
         }
        @keyframes opa {
            from{top: 33%}
            to{top: 10%}
        }
         .speedgif2 {
           position: absolute;
           top: 71%;
           left: 14%;           
           z-index: 6;
           width: 15%;
        }
        .sticker2{
            animation: speed2 3s infinite alternate linear;
         }
        @keyframes speed2 {
            from{left: 14%}
            to{left: 40%}
        }
        .speedgif3 {
           position: absolute;
           top: 48%;
           left: 71%;           
           z-index: 6;
           width: 15%;
        }
        .sticker3{
            animation: speed3 3s infinite alternate linear;
         }
        @keyframes speed3 {
            from{top: 48%}
            to{top: 71%}
        }

        .card-area{
         position: absolute;
         height: auto;
         width: 71%;
         top: 220px;
         left: 295px;
         display: grid;
         margin-top: 50px;
         grid-gap: 30px;
         grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
         z-index: 1000;
        }
        .card{
         position: relative;
         border-radius: 10px;
         box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
         overflow: hidden;
        }
        .card img{
         height: 600px;
         width: 100%;
         display: block;
         border-radius: 10px;
         transition: transform 0.5s;
        }
         .overlay{
         height: 0;
         width: 100%;
         overflow: hidden;
         position: absolute;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         left: 0;
         bottom: 0;
         border-radius: 10px;
         background: linear-gradient(rgba(0, 0, 0, 0.7)) 60%;
         padding: 0 50px;
         text-align: center;
         font-size: 14px;
         transition: height 0.5s;
      }
      .overlay h3{
         margin-top: 55%;
         margin-bottom: 5px;
         font-size: 30px;
         color: #FFE241;
         font-weight: 500;
         letter-spacing: 1.6px;
      }
      .overlay p{
         margin-top: 10px;
         margin-bottom: 5px;
         font-size: 16px;
         color: white;
         font-weight: 500;
         letter-spacing: 1.6px;
                  text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .card:hover img{
         transform: scale(1.2);

      }
      .card:hover .overlay{
         height: 100%;
      }
      .text1section7 {
           position: absolute;
           top: 12%;
           left: 42%;           
           font-size: 40px;
           color: #FFE241;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .text2section7 {
           position: absolute;
           top: 87%;
           left: 39%;           
           font-size: 24px;
           color: black;
           font-weight: 900;
           z-index: 7;
           text-align: center;
            background: #FFE241;
            padding: 20px;
      }
      .text1section8 {
           position: absolute;
           top: 2%;
           left: 48%;           
           font-size: 24px;
           color: black;
           font-weight: 900;
           z-index: 7;
           text-align: center;
            background: #B51818;
            padding: 20px;
      }
      .text2section8 {
           position: absolute;
           top: 17%;
           left: 30%;           
           font-size: 40px;
           color: #B51818;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .text3section8 {
           position: absolute;
           top: 32%;
           left: 26%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
      .text4section8 {
           position: absolute;
           top: 105%;
           left: 33%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
        }
      .card-area2{
         position: absolute;
         height: auto;
         width: 76%;
         top: 523px;
         left: 233px;
         display: grid;
         margin-top: 50px;
         grid-gap: 30px;
         grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
         z-index: 1000;
        }
      .card2{
         position: relative;
         border-radius: 10px;
         box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
         overflow: hidden;
        }
      .card2 img{
         height: 400px;
         width: 100%;
         display: block;
         border-radius: 10px;
         transition: transform 0.5s;
        }
      .overlay2{
         height: 0;
         width: 100%;
         overflow: hidden;
         position: absolute;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         left: 0;
         bottom: 0;
         border-radius: 10px;
         background: linear-gradient(rgba(0, 0, 0, 0.7)) 60%;
         padding: 0 50px;
         text-align: center;
         font-size: 14px;
         transition: height 0.5s;
      }
      .overlay2 h3{
         margin-top: 15%;
         margin-bottom: 5px;
         font-size: 30px;
         color: #B51818;
         font-weight: 900;
         line-height: 1.1;
         letter-spacing: 1.6px;
         text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .overlay2 p{
         margin-top: 10px;
         margin-bottom: 5px;
         font-size: 16px;
         color: white;
         font-weight: 500;
         letter-spacing: 1.6px;
                  text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .card2:hover img{
         transform: scale(1.2);

      }
      .card2:hover .overlay2{
         height: 100%;
      }
      .eye1 {
           position: absolute;
           top: -3%;
           left: 73%;           
           z-index: 1;
           width: 18%;
           animation: fadeInOut 5s linear infinite;
           transform: rotate(15deg);
        }
      .eye2 {
           position: absolute;
           top: 8%;
           left: 4%;           
           z-index: 1;
           width: 25%;
           animation: fadeInOut 4s linear infinite;
           transform: rotate(-40deg);
        }
      .eye3 {
           position: absolute;
           top: 36%;
           left: 78%;           
           z-index: 1;
           width: 10%;
           animation: fadeInOut 7s linear infinite;
           transform: rotate(45deg);
        }
      @keyframes fadeInOut {
         0% {
      opacity: 0; 
      }
         50% {
      opacity: 1; 
      }
         100% {
      opacity: 0; 
      }
   }
      .scream1 {
           position: absolute;
           top: 93%;
           left: 3%;           
           z-index: 1;
           width: 25%;
           animation: shake 3s infinite ease-in-out;
        }
      .camera {
           position: absolute;
           top: 100%;
           left: 70%;           
           z-index: 1;
           width: 31%;
           animation: shake2 3s infinite ease-in-out;
        }
      @keyframes shake{
      0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

      @keyframes shake2{
          0% { transform: rotate(-30deg); }
          50% { transform: rotate(10deg); }
          100% { transform: rotate(-30deg); }
      }
      .text1section9 {
           position: absolute;
           top: 36%;
           left: 44%;           
           font-size: 30px;
           color: white;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .text2section9 {
           position: absolute;
           top: 48%;
           left: 27%;           
           font-size: 60px;
           color: #FFE241;
           font-weight: 900;
           z-index: 7;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
      }
      .hate1 {
           position: absolute;
           top: 22%;
           left: 12%;           
           z-index: 1;
           width: 20%;
           border-radius: 5px;
           animation: dubdab 2s infinite ease-in-out;
      }
      @keyframes dubdab {
          0%   { transform: rotate(-10deg) scale(1); }
          50%  { transform: rotate(-10deg) scale(1.15); }
          100% { transform: rotate(-10deg) scale(1); }
      }
      .hate2 {
           position: absolute;
           top: 73%;
           left: 19%;           
           z-index: 1;
           width: 20%;
           border-radius: 5px;
           animation: dubdab2 2s infinite ease-in-out;
      }
      @keyframes dubdab2 {
          0%   { transform: rotate(10deg) scale(1); }
          50%  { transform: rotate(10deg) scale(1.15); }
          100% { transform: rotate(10deg) scale(1); }
      }
      .hate3 {
           position: absolute;
           top: 32%;
           left: 70%;           
           z-index: 1;
           width: 15%;
           border-radius: 5px;
           animation: dubdab2 2s infinite ease-in-out;
      }
      .hate4 {
           position: absolute;
           top: 67%;
           left: 66%;           
           z-index: 1;
           width: 19%;
           border-radius: 5px;
           animation: dubdab 2s infinite ease-in-out;
      }
      .text1section10 {
           position: absolute;
           top: 12%;
           left: 66%;
           transform: translateX(-50%);
           font-size: 24px;
           color: white;       
           font-weight: 900;
           z-index: 2;
           white-space: nowrap;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
           background: rgba(0, 0, 0, 0.6);
          padding: 30px 30px;
          border-radius: 0px;
        }
      .text2section10 {
           position: absolute;
           top: 61%;
           left: 25%;           
           font-size: 24px;
           color: white;
           font-weight: 900;
           z-index: 6;
           text-align: center;
           text-shadow: 0 0 10px #000,
                0 0 20px #000,
                0 0 30px #000;
            background: rgba(0, 0, 0, 0.6);
            padding: 20px;
            border-radius: 0px;
      }
      .yellow {color: #FFE241}



      .section1 {
    		height: 1280px; 
		}
		.section1 .layer .base {
    		height: 100%; 
		}
		.section2 {
    		height: 1080px; 
		}
		.section2 .layer2 .base2 {
    		height: 100%; 
		}
		.section3 {
    		height: 1080px; 
		}
		.section3 .layer3 .base3 {
    		height: 100%; 
		}
		.section4 {
    		height: 1080px; 
		}
		.section4 .layer4 .base4 {
    		height: 100%; 
		}
		.section5 {
    		height: 1600px; 
		}
		.section5 .layer5 .base5 {
    		height: 100%; 
		}
      .section6 {
         height: 1080px; 
      }
      .section6 .layer6 .base6 {
         height: 100%; 
      }
      .section7 {
         height: 1080px; 
      }
      .section7 .layer7 .base7 {
         height: 100%; 
      }
      .section8 {
         height: 1800px; 
      }
      .section8 .layer8 .base8 {
         height: 100%; 
      }
      .section9 {
         height: 1080px; 
      }
      .section9 .layer9 .base9 {
         height: 100%; 
      }
      .section10 {
         height: 1080px; 
      }
      .section10 .layer10 .base10 {
         height: 100%; 
      }
      .site-footer {
         background-color: #111;
         color: silver;
         padding: 40px 20px 20px 20px;
         font-family: 'Suit', sans-serif;
         }

      .footer-container {
         display: flex;
         justify-content: space-between;
         max-width: 1200px;
         margin: 0 auto;
         flex-wrap: wrap;
         }

      .footer-column h4 {
         color: white;
         margin-bottom: 10px;
         font-weight: 700;
         text-align: center;
         }

      .footer-column ul {
         list-style: none;
         padding: 0;
         margin: 0;
         }

      .footer-column li {
         margin-bottom: 8px;
         }

      .footer-column a {
         color: silver;
         text-decoration: none;
         }

      .footer-bottom {
         text-align: center;
         margin-top: 30px;
         font-size: 12px;
         color: gray;
         }