html {
    scroll-behavior: smooth !important;
}
header {
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    top:10vh;
    height:100vh;
    padding:0 0 12rem 0;
    transform-style:preserve-3d;
    z-index:-1;
}
.hidden {
    opacity: 0;
    transition: all 1.5s;
  }
  .show {
    opacity: 1;
}
.window-btn{
    background-color:white;
    border-radius:5px;
    width:70%;
    border:2px solid #bba0ca;
    align-items: center;
    justify-content: center;
    color:#49285B;
}
.window-btn:active{
    border:1px solid rgb(73, 40, 91);
}
.window-btn-div{
    display:flex;
    /* padding:0.5vw 0 0 0; */
    width:100%;
    justify-content: center;

}
.window-btn:hover{
    background-color:#EADEFF;
    cursor: pointer;
}
.logo{
    /* height:5vh; */
    /* border:1px solid black; */
    margin:5px 5px 1px 5px;
    transition: transform .2s;
}
.logo:hover{
transform: scale(1.2);
}
.email{
    margin-bottom:10vw;

}

section{
    /* height:70vh; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index:-1;
}
.blabels{
    font-size:1.5vw;
    padding-top: 5vw;
}


.labels{
    font-family: 'Roboto Mono', cursive;
}

.slogan{
    font-family: 'Roboto Mono', monospace;
    font-style: bold;
    text-align:center;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-transform: uppercase;
    color: #501a6d;
}
.slogan{
    font-size:1.5vw;
}

.ball{
    position: relative;
    top:5vw;
    width:40vw;
    height:50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.fg,
.bg,
.bg2 {
    position:absolute;
    object-fit:cover;
    z-index: -1;
}
.fg{
    width:80vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translateZ(-5px) scale(1.5);
}
.bg2{
    opacity:40%;
    width:42vw;
    transform: translateZ(-15px) scale(3.5);
}
.bg{
    width:70vw;
    transform: translateZ(-10px) scale(2);
}


.name{
    background-image: linear-gradient(#dcd6f7, #a6b1e1);

    height: 100vh;
    overflow-x:hidden;
    perspective:10px;
}
.title{
    text-align: center;
    font-family: 'Silkscreen', cursive;
    color:white;
    font-size: 8vw;
    margin:0 4vw 0 2vw;
}
.explain{
    position:relative;
    text-align: left;
    margin:5px;
}
.desc{
    color:#157f9d;
    font-size:2.1vw;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100vw;
    padding: 0 20vw 0 20vw;
    justify-content:space-between;
}

.child-to-body {
    padding:0 3rem 0 3rem;
    height: 200px;
    flex-shrink: 0;
}


.subtitle{
    font-family: 'Silkscreen', cursive;
    font-size:4vw;
}

.subtitle::before, .subtitle, .subtitle::after{
    content: attr(data-text);
    position: fixed;
    top:110vh;
    left:23%;
}
.subtitle::before, .subtitle::after{
    z-index: -1;
}

.skillTitle {
    font-family: 'Silkscreen', cursive;
    font-size:2vw;
}
#frontProjectDesc{
    margin:5px;
    font-size:15px;
}
.subtitle::before{
    color:#ff00c1;
    animation: glitch-effect 2.1s infinite;


}
.subtitle::after{
    color:blue;
    animation: glitch-effect 2.5s infinite;

}

@keyframes glitch-effect{
    0%{
        left: 22.8%;
        top:109.8vh;
    }
    25%{
        left: 23.1%;
        top:110.1vh;
    }
    50%{
        left: 22.9%;
        top:110.2vh;
    }
    75%{
        left: 23.1%;
        top:109.9vh;
    }
    100%{
        left: 23%;
        top:109.8vh;
    }
}
.shake{
    position: relative;
    width:200px;
    animation: shake 1.25s cubic-bezier(.36,.07,.19,.97) infinite;
    animation-play-state: paused;
}

.pBody{
    background-color:purple;
}
.shake:hover{
    animation-play-state: running;
}

@keyframes shake {
    0 { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-10px, 0) rotate(-20deg); }
    30% { transform: translate(10px, 0) rotate(20deg); }
    50% { transform: translate(-10px, 0) rotate(-10deg); }
    60% { transform: translate(10px, 0) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0); }
  }

.pokeball::before,
.pokeball::after {
  content:"";
  position: absolute;
}

.pokeball::before {
    background: red;
    width: 100%;
    height: 50%;
  }

.pokeball::after {
    top: calc(50% - 5px);
    width: 100%;
    height: 10px;
    background: #000;
  }

  .pokeball__button {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 4px solid #7f8c8d;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 0 7px black;
    animation: blink .5s alternate infinite;
    animation-play-state: paused;
  }

  .pokeball:hover .pokeball__button{
      animation-play-state: running;
  }

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 4px;
}

    .div1 {
        grid-area: 1 / 1 / 2 / 2;

     }
    .div2 { grid-area: 1 / 2 / 2 / 3; }

    .game-window__body{
    background-color: rgb(255,255,255,0.1);
        /* background-image: linear-gradient(to bottom, rgb(255,255,255,0.5),rgba(187,160,202, 0.8)); */
    border-bottom-left-radius:15px 15px;
    border-bottom-right-radius:15px 15px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    display: flex;
    padding:2vw;
    /* z-index:-1; */
    /* width:90vw; */
    /* padding:5px; */
}

.game-window__header{
    /* background-color:rgb(224, 173, 255); */
    border-top-left-radius:15px 15px;
    border-top-right-radius:15px 15px;
    /* height:5vh; */
    display:flex;
    /* padding:5px; */
    /* width:79.2vw; */
}
.headerBg1{
    background-color: #e6cccc;
}
.headerBg2{
    background-color: rgb(254, 241, 219);
}
.headerBg3{
    background-color: #a9b79d;
}
.submitBtn{
    color:#000;
    background-color: white;
    border-radius: 10px;
    border:1px #e6cccc solid;
    margin-top:10px;
    padding:15px;
    cursor:pointer;
}
.submitBtn:hover{
    background-color:#EADEFF;
}
.skillLogo{
    aspect-ratio: 1/1
    width: 60px;
    height:60px;
    transition: transform .2s;
    margin:1.2vw;
}
.skillLogo:hover{
    transform: scale(1.2);
}

.skillLogoGrp{
    display: flex;
    flex-wrap: wrap;
    margin:15px;
    background-color: rgb(255,255,255,0.5);
    justify-content: center;
    border-radius: 5px;
}
.skillLogoGrp:nth-child(1) {
    transition-delay: 200ms;
  }
.skillLogoGrp:nth-child(2) {
    transition-delay: 300ms;
  }
.skillLogoGrp:nth-child(3) {
    transition-delay: 400ms;
  }
.skillLogoGrp:nth-child(4) {
    margin-bottom: 0;
    transition-delay: 500ms;
  }
.socialContainer{
    margin: 3vh 0vh 0 3vh;
}
.social{
    width: 2vw;
    margin-right: 2vh;
    filter: opacity(0.6) drop-shadow(0 0 0 blue)

}
.social:hover{
    filter: opacity(0.4) drop-shadow(0 0 0 blue)
}
@media (max-width: 480px) {
    .social{
        width:4vw;
    }
    .logo{
        height: 4vh;
    }
    .game-window {
      width:100vw;
    }
    .video{
       height: 50vw;
       margin:5px 0 5px 0;
    }
    .labels{
        font-size:3vw;
        margin:.5vw;
        align-items: center;
        justify-content: center;
    }
    .window-btn-div{
        padding:0.3vw 0 0 0;
    }
    .game-window__body{
        align-items: top;

    }
    .exp{
        height: 90vh;
        width: 96%;
        margin: 0 2vw 0 2vw;
    }
    .proj{
        width: 96%;
        margin: 0 2vw 0 2vw;
    }
    .textArea{
        width:90vw;

    }
    .afterBall{
        margin-top:15vw;
    }
    .window-btn{
        margin-top:5px;
    }
    .skillTitle {
        font-family: 'Silkscreen', cursive;
        font-size:5vw;
    }
    .labelsDate{
        justify-content: space-between;
        text-align: center;
        font-size:9px;
    }
    #frontProjectDesc{
        margin:5px;
        font-size:3vw;
    }
    .frontRow{
        max-height: 20vh;
    }
  }
  @media (min-width: 490px) {
    .logo{
        height:5vh;
    }
    .game-window {
      width:90vw;
    }
    .video{
        max-height:40vw;
        margin:10px 0 10px 0;

    }
    .labels{
        font-size:1vw;
    }
    .labelsDate{
        justify-content: space-between;
        font-size:10px;
    }
    .window-btn-div{
        padding:0.5vw 0 0 0;
    }
    .game-window__body{
        align-items: center;
        /* height: 50vh; */
    }

    .textArea{
        width:50vw;
    }
    #windowNameFront{
        font-size:25px;
    }


  }
  @media (max-width: 490px){
    .shake{
        width: 150px;
    }
    .skillLogo{
        aspect-ratio: 1/1

        width: 50px;
        height:50px;
        margin:3vw;
    }
    .game-window__body{
        margin: 0 2vw 0 2vw;
    }
    .game-window__header{
        margin: 0 2vw 0 2vw;
    }
    #windowNameFront{
        font-size: 20px;
    }
    .slogan{
        font-size:2.5vw;
        color: #501a6d;
    }
  }
  .sayhi:nth-child(1){
    transition-delay: 200ms;
  }
  .sayhi:nth-child(2){
    transition-delay: 400ms;
  }
  .textArea{
    font-family: 'Roboto Mono', monospace;
    padding:5px;
    resize: none;
    border: 1px solid rgb(78, 35, 104);
  }
  .video{
    width:100%;
    /* height:40vw; */
    /* margin:10px 0 10px 0; */
  }
  /* .game-window{
    /* width:90vw; */
    /* width:90vw;
    z-index:-1; */
    /* margin-left:5%; */

    /* background-color: pink; */


    /* position:fixed;
    left:15vw;
    right:15vw; */
    /* margin: 0 15vw 0 15vw; */


  @keyframes blink {
    from { background: #eee;}
    to { background: #e74c3c; }
  }