@font-face {
        font-family: "sniglet"; /* Choose a name for your font */
        src: url("fonts/Sniglet Regular.otf") format("otf"), /* Path to your font file */
             url("fonts/Sniglet Regular.ttf") format("ttf"),
             url("fonts/Sniglet-webfont.woff") format("woff"); /* Include other formats for broader browser support */
        font-weight: normal; /* Define font weight if applicable */
        font-style: normal;  /* Define font style if applicable */
    }

html {
  min-height of 100%;
  cursor:  url("images/cursor.cur"), grab;

}

h1 {
  text-align: center;
  font-family: "sniglet", "Cherry Bomb One", system-ui;
  color: transparent;
  font-weight: 400;
  font-style: bold;
  font-size: 14vw;
  background:   rgba(223, 158, 130, 1); 
  background-clip: text; 
  -webkit-text-stroke-width: 0.5vw; 
  -webkit-text-stroke-color:    rgba(0, 0, 0, 1);
  text-shadow: rgba(200, 69, 13, 1) 0.5vw 0.5vw 0.5vw;

} 


body {
  background: rgba(175, 200, 13, 1);
  cursor:  url("images/cursor.cur"), pointer;
  display: flex;
  flex-direction: column;

  

}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  opacity: 1;
}

button {
  background: rgba(200, 48, 155, 1);
  border-style: double; 
  border-color:  rgba(0, 0, 0, 1);
  border-width:1vw;
  display:block;
  height: 10vw;
  width: 10vw;
  border-radius: 49%;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;    /* Vertically center */
  text-align:center;
  width: 17%;
  font-family: "Kode Mono", monospace;
  font-weight: 1000;
  font-style: normal;
  font-size: 3.5vw;
  color: rgba(4, 26, 152, 1);
  text-shadow:  rgba(0, 0, 0, 1)  -0.1vw -0.1vh;
  box-shadow: -0.5vw -0.5vw rgba(0, 0, 0, 1), 
              -0.1vw 0 rgba(0, 0, 0, 1);
  line-height: 0.7;
  letter-spacing: 0.3vw;
  cursor: grab;
}

button:hover {
  background:    rgba(0, 89, 255, 1);
  color:  rgba(255, 28, 225, 1); 
  text-shadow:  rgba(0, 0, 0, 1)  -0.1vw -0.1vh;
  opacity: 100%;
  cursor: grab;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0); /*Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #d6450cff;
  margin: 3% auto; /* 15% from the top and centered */
  padding: 2vw;
  border-radius: 20%;
  border: 1vw double rgba(29, 213, 255, 1);
  width: 60%; /* Could be more or less, depending on screen size */
  height: auto;
  display: flex;
  justify-content: space-round; /* Horizontally center */
  align-items: center;    /* Vertically center */
  text-align:center;
  gap: 5%;
  font-size: 2vw;
  font-family: "Kode Mono", monospace;
  font-weight: 500;
  font-style: normal;
  color: rgba(128, 40, 10, 1);
  text-shadow: 0.1vw 0.1vw  rgba(0, 0, 0, 1);
  box-shadow: 0.1vw 0.1vw 1vw  rgba(0, 0, 0, 1),
    -0.1vw -0.1vw 1vw   rgba(0, 0, 0, 1);
  line-height: 1.3;
  cursor: grab;

}

.selfie {
  border-radius: 20%;
  border: 1vw double rgba(29, 213, 255, 1);
  float: left;
  width: 30%;
  height: 70%;
}

/* The Close Button */
.close {
  color: rgba(29, 213, 255, 1);
  float: right;
  font-size: 5vw;
   font-family: "Lobster", sans-serif;
   font-weight: 400;
   font-style: normal;

}

.close:hover,
.close:focus {
  color:  rgba(178, 230, 23, 1);
  text-decoration: none;
  cursor: grab;
}

@keyframes color-change {
  0% { color: rgba(255, 206, 29, 1); }
  25% { color: rgba(29, 255, 195, 1); }
  50% { color: rgba(101, 255, 29, 1); }
  75% { color: rgba(236, 255, 29, 1); }
  100% { color: rgba(255, 206, 29, 1); }
}

.special-word {
  font-family: "Lobster", sans-serif;
   color: rgba(2, 38, 220, 1);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 300%;
  letter-spacing: 0.1vw;
}

.name2 {
  animation: color-change 3s infinite;
  font-family: "Lobster", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 200%;
  letter-spacing: 0.1vw;
}

.name3 {
   color: rgba(0, 0, 0, 1);
   font-size: 120%;
}

.special-words {
  color: rgba(29, 213, 255, 1);
  font-size: 150%;
}

.link {
  color:  rgba(255, 206, 29, 1);
 text-decoration: underline dotted;
 font-size: 120%;
}

.link:hover {
  color:   rgba(178, 230, 23, 1);
}

@media screen and (max-width: 600px) {
  .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 4vw;

  }

  button {
    width: 40vw; 
  }
  .modal-content {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* Vertically center */
    text-align:center;
    width: 80%;
    font-size: 4vw;
  }
  
  .selfie {
    width: 75%;
  }
}