* {
  box-sizing: border-box;
}
 
@media (min-width: 600px){
    html {
    height: 100%;
    width: 100%;
    margin: 0;
    }

  body {
    margin: 0;
  }

  #div2 {
    display: flex;
    flex-direction: column;
    margin-left: 15vw;
  }

  #p1 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 2vw;
  }

  #a1 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 2vw;
  }

  section {
    width: 100%;
    height: 25vh;
    margin: 0;
  }

  #name {
    position: fixed;
    top: 5vh;
    right: 5vw;
    color: white;
    font-size: 2vw;
    font-family: "Monsieur La Doulaise", cursive;
  }

  #section1 {
    height: 200vh;
    background: rgb(18, 26, 26);
    z-index: 10;
  }

  #section2 {
    background-color: rgb(49, 49, 49);
    display: flex;
    align-items: center;
  }

  #txt {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 3vw;
    text-shadow: 0px 0px 160px white;
    margin-bottom: 1vh;
    z-index: 1;
  }

  #txt2 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 2vw;
    margin-top: 0;
    text-shadow: 0px 0px 160px white;
    z-index: 1;
  }

  #img2 {
    width: 10vw;
    height: auto;
    border-radius: 1vw;
    border: 2px solid rgb(68, 68, 68);
    z-index: 10;
  }

  #badge {
    height: 7vh;
    z-index: 10;
  }

  #floating-image {
    position: fixed;
    width: 15vw;
    height: auto;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
    transition: transform 0.1s ease-out;
    will-change: transform;
    background: transparent;
  }

  #Stickytext {
    position: fixed;
    top: 50%;
    left : 15vw;
    transform: translate(0%,-50%);
    transition: transform 0.1s ease-out;
    will-change: transform;
  }

  .letter-animate {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    animation: rise 0.7s forwards;
  }

  .letter-animate2 {
    opacity: 0;
    display: inline-block;
    transform: scale(0.1) rotate(-30deg);
    animation: rise2 1s forwards;
  }
}

@media (max-width: 600px) {
  html {
    height: 100vh;
    width: 100vw;
    margin: 0;
    }
  body {
    margin: 0;
  }

  section {
    width: 100%;
    height: 15vh;
    margin: 0;
  }

  #name {
    position: absolute;
    top: 5vw;
    right: 5vw;
    color: white;
    font-size: 2vh;
    font-family: "Monsieur La Doulaise", cursive;
  }
  
  #section1 {
    height: 100vh;
    background: rgb(18, 26, 26);
    z-index: 10;
  }

  #section2 {
    background-color: rgb(49, 49, 49);;
  }

  #txt {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 6vw;
    margin-bottom: 1vh;
    z-index: 1;
  }

  #txt2 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 4vw;
    margin-top: 0;
    z-index: 1;
  }

  #DIV1 {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }

  #img2 {
    width: 20vw;
    height: auto;
    align-items: center;
    margin-right: 5vw;
    border-radius: 3vw;
    border: 2px solid rgb(68, 68, 68);
    z-index: 10;
  }

  #badge {
    height: 7vh;
    z-index: 10;
  }

  #floating-image {
    position: absolute;
    width: 60vw;
    height: auto;
    top: 60vh;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: transform 0.1s ease-out;
    will-change: transform;
    background: transparent;
  }

  #Stickytext {
    position: absolute;
    display: flex;
    width: 80vw;
    top: 7vh;
    left : 50%;
    transform: translate(-50%,0%);
    transition: transform 0.1s ease-out;
    will-change: transform;
  }

  .letter-animate {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px);
    animation: rise 0.7s forwards;
  }

  .letter-animate2 {
    opacity: 0;
    display: inline-block;
    transform: scale(0.1) rotate(-30deg);
    animation: rise2 1s forwards;
  }

    #div2 {
    display: flex;
    flex-direction: column;
    margin-left: 15vw;
  }

  #p1 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 6vw;
  }

  #a1 {
    color: white;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: 6vw;
  }
} 


@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise2 {
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}