@font-face {
    font-family: "meteoric";
    src: url("fonts/meteoric.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  


.star1{
  
position:fixed;
top:40%;
left:50%;
scale: 30%;
opacity: 0;
}
.star2{
  
  position:fixed;
  top:20%;
  left:5%;
  scale: 20%;
  opacity: 0;
  }

  .star3{
  
    position:fixed;
    top:20%;
    left:65%;
    scale: 15%;
    opacity: 0;
    }

    .readme{
position: fixed;
      scale: 0%;
      opacity: 1;
      rotate:10deg;
      top:10%;
      left:40%;
      }
  
header:hover .star1{
  opacity: 0.6;
  transition: transform 2s ease;
  transform: rotate(360deg);
}
header:hover .star2{
  opacity: 0.8;
  transition: transform 2.5s ease;
  transform: rotate(180deg);
}
  
header:hover .star3{
  opacity: 0.5;
  transition: transform 3.5s ease;
  transform: rotate(160deg);
}
header:hover .readme{
  opacity: 1;
  scale:50%;
  transition: scale 1s ease;
}
header:hover{
  cursor: url("cursor_hover.png"), auto;	
}

body{
    font-family:"meteoric";
    max-width: 80%;
    padding: 20px;
    color: rgb(255, 255, 255);
    background-color: black;
    margin: 0 auto;
    background-image: url("background.gif");
    cursor: url("cursor.png"), auto;	


}
p{
    margin-bottom: 20%;
}
.icon{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding-bottom: 5px;
}

h1{
    font-size: 100px;
position: relative;

}
h2{
    text-align: center;
    font-size: 30px;
    line-height: 180%;
    color: rgb(248, 255, 111);
}


h3{
    line-height: 180%;
    max-width: 60%;
    
    
}
h5{
    text-align: left;
    font-size: 16px;
    line-height: 250%;
    font-family: "meteoric";
    font-weight: 400;
    font-style: normal;
    max-width: 65%;
    margin: 0 auto;
}

.images{
    max-width: 40%;
  border-radius: 70%;
    padding: 5%;
    position: relative;
    display: block;
  margin-left: auto;
  margin-right: auto;

}


.list{
    text-align: center;
    margin: 0 auto;
    font-size:30px ;
    line-height: 150%;
    color: black;
    border-radius: 10px;
    width: 85%;
    height: auto;
    padding: 10px;
}

a{
    max-width: 50%;
font-family: "meteoric";
color: rgb(255, 255, 255);
font-size: 15px;
padding: 10px;
border-radius: 30px;
text-decoration: none; 
border-color: white;
background-color: rgb(0, 0, 0);
transition: background-image 0.5s ease, background-color 0.3s ease;padding: 1s ease;
}

a:hover{
    font-size: 16px;
    color: rgb(248, 255, 111);padding: 10 10 10 5;
    
    transition: background-image 0.5s ease, background-color 0.3s ease;padding: 1s ease;
    cursor: url("cursor_hover.png"), auto;	
}


.target{
scroll-margin-top: 200px;
}

.fly {
    position: absolute;
    top: 50%; /* 垂直置中 */
    left: -200px; /* 從畫面外左邊開始 */
    width: 150px;
    transform: translateY(-50%); /* 完全垂直置中 */
    animation: fly-across 6s linear infinite;
  }
  
  @keyframes fly-across 
  {
    0% {
      left: -200px;
      top: -200px;
    }
    100% {
      left: 100vw;
      top:100vx;
    }
    0% {
        left: -200px;
        transform: translateY(-50%) rotate(0deg);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        left: 100vw;
        transform: translateY(-50%) rotate(360deg);
        opacity: 0;
  }
}



.back{
  text-align: center;
  font-size: 30px;
  box-shadow: 0 0 10px  rgb(255, 255, 255);
  padding:10px;
 margin: auto;
  width: 20%;
  margin-bottom: 200px; 
  border-radius: 50%;
}


.title{
  scroll-margin-top: 200px;
}
 

.on{
  display: none;
  max-width: 40%;
  border-radius: 70%;
    padding: 2%;
    position: relative;
opacity: 0;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 1s ease;
  cursor: url("cursor_hover.png"), auto;	
}
.off{
  max-width: 40%;
  border-radius: 70%;
    padding: 2%;
    position: relative;
    display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: url("cursor_hover.png"), auto;	
  transition: opacity 1s ease;
}
.off:hover + .on{
display: block;
opacity: 1;
transition: opacity 1s ease;
cursor: url("cursor_hover.png"), auto;	
}



 
.rotate {
  max-width: 40%;
  border-radius: 70%;
    padding: 10%;
    position: relative;
    display: block;
  margin-left: auto;
  margin-right: auto;
  animation: spin 8s linear infinite;
}
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }}
  
    .editor{
      color: rgb(248, 255, 111);
    }