/*

    index.css
    2025 coded by Okamoto

*/

@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html{
    background-color: #FF6C0C;
    color: #FFFFFF;
    font-family: "Yusei Magic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    font-optical-sizing: auto;
    animation: bg-color 1.5s forwards;
}

@keyframes bg-color {
  0% {
    background-color: #00CAFF;
  }

  50% {
    background-color: black;
  }

  100% {
    background-color: #FF6C0C;
  }
}

body{
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#background_image{
    object-fit: cover;
    top: 0px;
    left: 0px;
}

#main_image{
    top: 0px;
    left: 0px;
    position: absolute;
}

#under_image{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: underslideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes underslideIn {
  0% {
    transform: translateY(-300px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

#right_image{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: rightslideIn 1s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.2s;
}

@keyframes rightslideIn {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

h1{
    position: absolute;
    top: 133px;
    left: 2px;
}

#time{
    top: 299px;
    left: 300px;
    position: absolute;
    line-height: 35px;
}

#nowtime{
    font-size: 48px;
    text-align: center;
    letter-spacing: 3px;
}

h2{
    top: 605px;
    left: 410px;
    position: absolute;
}

o{
    top: 616px;
    left: 185px;
    position: absolute;
}

p{
    top: 616px;
    right: 10px;
    position: absolute;
}


g{
    font-size: 48px;
    top: 674px;
    left: 20px;
    position: absolute;
    text-align: center;
}

b{
    font-size: 96px;
    top: 640px;
    left: 200px;
    position: absolute;
    letter-spacing: 10px;
}

c{
    font-size: 30px;
    top: 714px;
    right: 20px;
    position: absolute;
    letter-spacing: 3px;
}

d{
    font-size: 42px;
    top: 804px;
    left: 40px;
    position: absolute;
    text-align: center;
}

e{
    font-size: 72px;
    top: 770px;
    left: 225px;
    position: absolute;
    letter-spacing: 10px;
}

f{
    font-size: 24px;
    top: 825px;
    right: 25px;
    position: absolute;
    letter-spacing: 3px;
}

dia{
    font-size: 21px;
    top: 865px;
    right: 85px;
    position: absolute;
    letter-spacing: 1px;
}

#arrival{
    top: 530px;
    left: 190px;
    position: absolute;
}

#timetable{
    top: 910px;
    left: 240px;
    position: absolute;
}

lab{
    top: 990px;
    left: 240px;
    position: absolute;
}

.black{
    color:black;
}

dye{
    color:#FF6C0C;
}