@font-face {
  font-family: adobemingstd;
  src: url("../font/adobemingstd-light.otf");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: adobemingstd;
}

.body {
  transition: 0.4s;
}

.bi-sun {
  color: rgb(250, 225, 0);
  text-shadow: 0 0 14px rgb(0, 217, 255);
  cursor: pointer;
  transition: 0.3s;
  animation: rotate 5s linear infinite forwards;
}
.bi-sun:hover {
  color: rgb(216, 195, 5);
  transition: 0.3s;
  text-shadow: 0 0 27px rgb(0, 217, 255);
}

.bi-moon {
  color: #fafafa;
  text-shadow: 0 0 14px rgb(0, 38, 255);
  cursor: pointer;
  transition: 0.3s;
  animation: rotate 5s linear infinite forwards;
}
.bi-moon:hover {
  transition: 0.3s;
  color: #dbdbdb;
  text-shadow: 0 0 27px rgb(0, 38, 255);
}

.bg {
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 0.7960784314);
}

.bg-2 {
  transition: 0.3s;
  background-color: rgba(180, 180, 180, 0.7960784314);
}

.bg-3 {
  transition: 0.3s;
  background-color: rgba(15, 15, 15, 0.9254901961);
}

.vh {
  height: 90vh;
}

.text {
  color: #000000;
  transition: 0.3s;
}
.text:hover {
  color: #7e7e7e;
}

.text-2 {
  color: #ffffff;
  transition: 0.3s;
}
.text-2:hover {
  color: #adadad;
}

.offcanvas-btn {
  border: none;
  background-color: transparent;
  color: #000000;
  transition: 0.3s;
}
.offcanvas-btn:hover {
  color: #7e7e7e;
}

.offcanvas-btn2 {
  color: #ffffff;
}
.offcanvas-btn2:hover {
  color: #adadad;
}

.bi-x-lg {
  border: none;
  background-color: transparent;
  color: rgb(255, 0, 0);
  transition: 0.1s;
}
.bi-x-lg:hover {
  transition: 0.1s;
  transform: scale(1.1);
}

.links {
  color: rgb(17, 0, 255);
  transition: 0.4s;
  text-shadow: 0 0 2px black;
}
.links:hover {
  color: rgb(0, 153, 255);
}

.links2 {
  color: rgb(255, 255, 255);
}
.links2:hover {
  color: rgb(112, 112, 112);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.label {
  cursor: pointer;
  border: 2px solid #000000;
  padding: 12px;
  font-size: 22px;
  border-radius: 35px;
  color: #000000;
  transition: 0.5s;
}
.label:hover, .label:focus {
  background-color: #000000;
  color: #fff;
  animation: label1 0.8s ease-out;
  box-shadow: 0 0 0 2em transparent;
}

.label2 {
  border: 2px solid #ffffff;
  color: #ffffff;
}
.label2:hover, .label2:focus {
  background-color: #ffffff;
  color: #000000;
  animation: label2 0.8s ease-out;
}

.img {
  height: 25rem;
  border-radius: 5px;
}

.pc {
  display: none;
}

@media only screen and (max-width: 990px) {
  .label {
    font-size: 16px;
    border: 1px solid #000000;
  }
  .img {
    height: 14rem;
  }
  .label2 {
    font-size: 16px;
    border: 1px solid #ffffff;
  }
  .pc {
    display: block;
  }
  .picker {
    display: none;
  }
  .picker2 {
    display: none;
  }
}
@keyframes label1 {
  0% {
    box-shadow: 0 0 0 0 black;
  }
}
@keyframes label2 {
  0% {
    box-shadow: 0 0 0 0 rgb(255, 255, 255);
  }
}
.picker {
  border: 1px solid #000000;
  color: #000;
  margin-top: 10px;
  padding: 5px;
  transition: 0.3s;
  background-color: transparent;
  border-radius: 10px;
}
.picker:hover, .picker:focus {
  background-image: linear-gradient(to right, #E7484F, #E7484F 16.65%, #F68B1D 16.65%, #F68B1D 33.3%, #FCED00 33.3%, #FCED00 49.95%, #009E4F 49.95%, #009E4F 66.6%, #00AAC3 66.6%, #00AAC3 83.25%, #732982 83.25%, #732982 100%, #E7484F 100%);
  animation: slidebg 1s ease-in-out infinite alternate;
  transform: scale(1.2);
}

@keyframes slidebg {
  to {
    background-position: 20vw;
  }
}
.picker2 {
  border: 1px solid #ffffff;
  color: #ffffff;
  margin-top: 10px;
  padding: 5px;
  transition: 0.3s;
  background-color: transparent;
  border-radius: 10px;
}
.picker2:hover, .picker2:focus {
  background-image: linear-gradient(to right, #E7484F, #E7484F 16.65%, #F68B1D 16.65%, #F68B1D 33.3%, #FCED00 33.3%, #FCED00 49.95%, #009E4F 49.95%, #009E4F 66.6%, #00AAC3 66.6%, #00AAC3 83.25%, #732982 83.25%, #732982 100%, #E7484F 100%);
  animation: slidebg 1s ease-in-out infinite alternate;
  transform: scale(1.2);
}

/*# sourceMappingURL=picker.css.map */