*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body{
   overflow:hidden;
   font-family: 'Press Start 2P', cursive; 
   background:#7dd3fc; 
   }  

/* WORLD */

#world{
   position: relative;
   width: 8500px;
   height: 100vh;
   overflow: hidden; 
   background: linear-gradient(
     to bottom,
     #5c94fc 0%,
     #87ceeb 60%,
     #3cb043 60%,
     #3cb043 100%
   );
 }

/* SUN */
.sun{
   position: absolute;
   width: 140px;
   height: 140px;
   background: gold;
   border-radius: 50%;
   top: 50px;
   right: 300px;
   box-shadow: 0 0 100px gold;
   animation: sunPulse 4s infinite alternate;
}

@keyframes sunPulse{
   from{
      transform: scale(1);
   }
   to{
      transform: scale(1.1);
   } 
}

/* CLOUDS */
.cloud{
   position: absolute;
   width: 200px;
   height: 60px;
   background: white;
   border-radius: 100px;
   opacity: .95;
}
    
.cloud::before,
.cloud::after{
   content:'';
   position: absolute;
   background: white;
   border-radius: 50%;
}

.cloud::before{
   width: 90px;
   height: 90px;
   top: -30px;
   left: 20px;
}

.cloud::after{
   width: 110px;
   height: 110px;
   top: -45px;
   right: 20px; 
}

.cloud1{
   top: 100px;
   left: 200px;
   animation: floatCloud 25s linear infinite;
}

.cloud2{
   top: 180px;
   left: 1600px;
   animation: floatCloud 35s linear infinite;
}

.cloud3{
   top: 80px;
   left: 3500px;
   animation: floatCloud 30s linear infinite;
}

.cloud4{
   top: 140px;
   left: 80%;
   animation: floatCloud 40s linear infinite;
}

@keyframes floatCloud{
   0%{ transform: translateX(0);}

   50%{ transform: translateX(50px);}

   100%{ transform: translateX(0);}
}

/* GROUND */

.ground{
   position:absolute;
   bottom: 0;
   width: 8500px;
   height: 120px;
   background: repeating-linear-gradient(
    90deg,
    #9b4d00 0px,
    #9b4d00 60px,
    #7a3d00 60px,
    #7a3d00 120px
   );
 }

/* PLAYER */

#player{
   position:absolute;
   width: 70px;
   height: 120px;
   left:100px;
   bottom:120px;
   z-index:100;
   transition: transform 0.1s;
   display: flex;
   flex-direction: column;
   align-items: center;
}

@keyframes auraPulse{
   from{
      transform: scale(1);
      opacity: .5;
   }
   to{
      transform: scale(1.1);
      opacity: 1;
   }
}
  
/* Aarura */

.cap{
   width: 70px;
   height: 20px;
   background: linear-gradient(90deg,#ecd90c,#e6ac00 );
   border: 4px solid black;
   position: absolute;
   border-radius: 20px 20px 5px 5px;
   box-shadow: 0 0 15px #ff9900;
}

.face{
   width: 50px;
   height: 40px;
   background:#ffd6b3;
   border: 4px solid black;
   position: absolute;
   top: 18px;
   left: 10px;
}

.eyes{
  position:absolute;
  width:22px;
  height:6px;
  background:black;
  top:38px;
  left:24px;
  border-radius:20px;
  box-shadow:0 0 5px white;
}

.body{
   width: 55px;
   height: 35px;
   background: violet;
   border: 4px solid black;
   position: absolute;
   top: 55px;
   left: 7px; 
   border-radius: 10px;
   box-shadow: 0 0 10px #7b2cbf;
}

.legs{
   width: 55px;
   height: 25px;
   background:indigo;
   border: 4px solid black;
   position: absolute;
   top: 85px;
   left: 7px;
}
/* WALK */
.walk .legs{
   animation:walk .2s infinite alternate ;
}

@keyframes walk{
  from{
      transform: translateX(-3px);
   }
   to{
      transform: translateX(3px);
   }
}

/* PANELS */

.panel{
   position: absolute;
   width: 550px;
   background: #aba0ea;
   border: 8px solid black;
   padding: 40px;
   box-shadow: 15px 15px black;
   transition: .4s;
}

.panel:hover{
   transform:
   translateY(-10px)
   rotateY(-5deg)
   scale(1.03);
}

.panel h2{
   font-size: 20px;
   margin-bottom: 30px;
}

.panel p{
   font-size: 11px;
   line-height: 2;
}

/* SKILLS */

.skills{
   display:flex;
   flex-wrap:wrap;
   gap:15px;
   margin-top:25px;
}

.skill{
   background:gold;
   padding:15px;
   border:4px solid black;
   transition:.2s;
}

.skill:hover{
   transform:scale(1.15) rotate(-3deg);
}

/* PROJECTS */

.project{
    margin-top:20px;
    padding:20px;
    background:#5c94fc;
    color:white;
    border:4px solid black;
    transition:.3s;
}

.project:hover{
    transform:
    translateX(10px)
    scale(1.05);
}

/* COINS */

.coin{
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: gold;
   border: 5px solid black;
   position: absolute;
   animation: coinSpin .5s infinite alternate;
}

@keyframes coinSpin{
   from{ 
      transform: rotateY(0deg);
   }
   to{ 
      transform: rotateY(180deg);
   }
}

/* ENEMIES */

.enemy{
   width: 60px;
   height: 60px;
   background: #ea00f6;
   border-radius: 50%;
   border: 5px solid black;
   position:absolute;
   animation: enemyMove .6s infinite alternate;
}

@keyframes enemyMove{
   from{
      transform: translateX(-40px);
   }
   to{
      transform:translateX(40px);
   }
}

/* BLOCKS */

.block{
   position:absolute;
   width:80px;
   height:80px;
   background:#e45b24;
   border:5px solid black;
   animation:blockFloat 2s infinite ease-in-out;
 }

@keyframes blockFloat{
   0%,100%{
     transform:translateY(0px);
   }
   50%{
     transform:translateY(-15px);
   }
 }   

/* FLAG */
   
#flag{
    position:absolute;
    right:300px;
    bottom:120px;
    width:15px;
    height:350px;
    background:black;
 }

.flag-top{
    width:120px;
    height:80px;
    background:rgb(245, 3, 144);
    position:absolute;
    left:15px;
    top:0;
    clip-path:polygon(0 0,100% 50%,0 100%);
    animation:flagWave 1s infinite alternate;
 }

@keyframes flagWave{
    from{
        transform:skewY(0deg);
    }
    to{
        transform:skewY(5deg);
    }
}

/* UI */

#ui{
    position:fixed;
    top:20px;
    left:20px;
    z-index:9999;
    color:white;
    text-shadow:4px 4px black;
    line-height:2;
}

/* START GAME */

#start{
    position:fixed;
    width:100%;
    height:100%;
    background: linear-gradient(50deg, violet,indigo,blue,green,orange,red);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:10000;
    text-align:center;
}

#start h1{
    font-size:50px;
    line-height:2;
    animation:titleGlow 1s infinite alternate;
}

@keyframes titleGlow{
    from{
        text-shadow:0 0 10px white;
    }
    to{
        text-shadow:0 0 30px gold;
    }
}

#start button{
    margin-top:40px;
    padding:25px 40px;
    border:none;
    background:#04d3fc;
    border:6px solid black;
    cursor:pointer;
    font-family:'Press Start 2P', cursive;
}

/* PARTICLES */

.particle{
   position: absolute;
   width: 10px;
   height: 10px;
   background:yellow;
   border-radius:50%;
   pointer-events:none;
   animation:particle 1s forwards;
 }

@keyframes particle{
    to{
        transform:translateY(-100px) scale(0);
        opacity:0;
    }
 }

#end-screen{
    position:fixed;
    inset:0;
    background:linear-gradient(rgb(143, 176, 247));
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    backdrop-filter:blur(10px);
    opacity:1;
    pointer-events:auto;
    transition:opacity .6s ease; 
}
/* PORTAL BOX */

.portal-box{

    width:650px;
    max-width:90%;
    padding:50px;
    border-radius:30px;
    background:linear-gradient(45deg,violet,indigo,blue);
    border:2px solid rgba(3, 0, 0, 0.843);
    box-shadow:
    0 0 40px rgba(183,0,255,0.5),
    0 0 100px rgba(0,255,255,0.15);

    backdrop-filter:blur(15px);
    animation:portalAppear 1s ease;
}

/* PORTAL ANIMATION */

@keyframes portalAppear{

    from{
        opacity:0;
        transform:
        scale(.8)
        translateY(40px);
    }

    to{
        opacity:1;
        transform:
        scale(1)
        translateY(0);
    }
}

/* HEADING */

.portal-box h1{

    color:white;
    margin-bottom:30px;
    font-size:25px;
    text-align:center;
    line-height:1.6;
    text-shadow:gold;
}

/* TEXT */

.portal-box p{

    color:#d6d6ff;
    line-height:2;
    margin-bottom:35px;
    text-align:center;
    font-size:11px;
}

/* INPUTS */

.portal-box input,
.portal-box textarea{

    width:100%;
    margin-top:20px;
    padding:18px;
    border:none;
    border-radius:15px;
    background:rgba(8, 4, 4, 0.529);

    color:white;
    font-family:'Press Start 2P', cursive;
    font-size:10px;
    outline:none;
    border:2px solid rgba(202, 119, 249, 0.644);
    transition:.3s;
}

/* INPUT FOCUS */

.portal-box input:focus,
.portal-box textarea:focus{

    border:2px solid #000000;
    box-shadow:
    0 0 20px rgba(199,125,255,0.4);
}


/* TEXTAREA */

.portal-box textarea{

    height:140px;
    resize:none;
    line-height:1.8;
}

/* BUTTON */

.portal-box button{

    margin-top:25px;
    width:100%;
    padding:20px;
    border:none;
    border-radius:15px;
    background:
    linear-gradient(50deg,rgb(116, 0, 225),rgb(190, 67, 234));
    color:white;
    font-family:'Press Start 2P', cursive;
    font-size:11px;
    cursor:pointer;
    transition:.3s;
}

/* BUTTON HOVER */

.portal-box button:hover{

    transform:
    scale(1.03);
    box-shadow:
    0 0 30px #ec9898;
}

/* SOCIALS */

.socials{
    
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

/* SOCIAL LINKS */

.socials a{

    text-decoration:none;
    color: rgb(255, 255, 255);
    transition:.3s;
    font-size:12px;
}

/* SOCIAL HOVER */

.socials a:hover{

    transform:
    scale(1.1);
    color:rgb(245, 205, 3);
}