/* font */
@font-face {
  font-family: 'Kode_Mono'; 
  src: url('https://lonelyseabird.neocities.org/seabird_website/Pixelify.ttf') format('woff2'),
       url('https://lonelyseabird.neocities.org/seabird_website/Pixelify.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
    overflow: hidden; 
    height: 100%;
    width: 100%;
    background: #7d8590
    
}
 body{
        opacity: 1
}

/* interactive area */
.canvas {
    position: absolute;
    width: 100%;   
    height: 100%;   
}

/* table */
.table {
    border: 5px solid #1a1a1a; 
    padding: 10px;
}

/* placeholders */
.placeholder {
  width: fit-content;
  height: fit-content;
  position: absolute;
}
.placeholder span {
  font-family: 'Kode_Mono';
  font-weight: bold;
  opacity: 0;
  position: fixed;
  width: 20vw;
  height: 6vw;
  top: 12vw; 
  left: 15vw;
  z-index: 99;
  font-size: 2.0rem;
  color: #191919;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black;
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(10, end),
    blink-caret .75s step-end infinite;
}
/* typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 50% }
}
/* cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  10% { border-color: black; }
}
.placeholder:hover span, .placeholder:focus span {
  opacity: 1;
}
.placeholder:hover img, .placeholder:focus img {    
  transition: transform 0.3s ease;
}
.placeholder:hover img {
    transform: scale(1.1);
} 

/* icon 1 */
.icon {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}
.icon span {
  font-family: 'Kode_Mono';
  font-weight: bold;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.0rem;
  color: white;
}
.icon:hover span, .icon:focus span {
  opacity: 1;
}
.icon:hover img, .icon:focus img {    
  transition: transform 0.3s ease;
}
.icon:hover img {
    transform: scale(1.1);
}

/* icon 2 */
.icon2 {
  background-image: url('https://lonelyseabird.neocities.org/seabird_website/images/me_pixel.png'); 
  background-size: cover;
  transition: background-image 0.3s ease-in-out; 
}
.icon2:hover {
  background-image: url('https://lonelyseabird.neocities.org/seabird_website/images/me2_pixel.png');
}

/* icon 3 */
.icon_3 {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
  z-index: 90;
}
.icon_3 span {
  font-family: 'Kode_Mono';
  font-weight: bold;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-40%, -50%);
  z-index: 90;
  font-size: min(4vw, 2rem);
  color: #191919;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(10, end),
    blink-caret .75s step-end infinite;
}
/* typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 90% }
}
/* cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  20% { border-color: black; }
}

/* icon 4 */
.icon4 {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}