body {
  font-family: "SUSE", sans-serif;
  font-optical-sizing: auto;
  font-weight: 2;
  font-style: normal;
  
}

button {
  font-family: "SUSE", sans-serif;
  padding: 10px;
  background-color: rgb(17, 5, 44);
  color: aliceblue;
  border-radius: 10%;
}

button:hover {
  transition-duration: 0.5s;
  background-color: aliceblue;
  color:rgb(17, 5, 44);
}

button:active{
  transform: translateX(10px);
}

input {
  padding:10px;
  font-family: "SUSE", sans-serif;
  background-color:rgb(17, 5, 44,.5);
  color:aliceblue;
  border-color: transparent;
}

input::placeholder {
  color: aliceblue;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('2967.gif');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

.wrapper2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('51MRwGDRnsL._AC_UF350\,350_QL80_.jpg');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

  .wrapper3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('BYNv.gif');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

  .wrapper4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('Binary2.gif');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

  .wrapper5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('https://www.icegif.com/wp-content/uploads/2023/10/icegif-83.gif');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

  
  .wrapper6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    min-height: 1000px;
    background-attachment: fixed;
    background-image: url('IMG_5248.jpg');
    background-position: center;
    background-size: cover;
    margin-top:0;
  
  }

.main-text-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.main-text {
    text-align: center;
    background-color: rgba(11, 40, 77, 0.6);
    padding: 20px;
}


.main-text1 {
  text-align: center;
  background-color: rgba(11, 40, 77, 0.6);
  padding: 20px;
  grid-column: 2;
  grid-row: 2 / 3;
}

.yippeeman {
  grid-row: 1;
  grid-column: 1;
}

.yippeeman:active {
  transform: translateY(10px);
}

.numclicked{
  font-size: 50px;
  color:black;
}

.filler {
  padding:10%;
}
h1 {
  font-size: xx-large;
  color:rgb(247, 244, 240)
}
 
h1:hover {
  transition-duration: 0.5s;
  color:rgb(13, 10, 7);
}

h3,h4 {
  color: rgb(253, 249, 243);
}

h3:hover,h4:hover{
  transition-duration: 0.5s;
  color:rgb(29, 26, 23);
}

.puzzle1img {
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.keyimage {
  height:200px;
  width:400px;
}



.haha{
  height:500px;
}