@font-face {
  font-family: lino;
  src: url(Orange-Typewriter.ttf);
}
@font-face {
  font-family: pixel;
  src: url(Pixel-Regular.ttf);
}
@font-face {
  font-family: pixel2;
  src: url(GomePixel-ARJd7.otf);
}
body {
  background: linear-gradient(to bottom, #50006D 31%, #B83B4F 100%);
}

main {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 1020px;
  font-family: monospace;
  margin-top: 30px;
}

.page {
  border: rgb(203, 255, 203) 2px solid;
  width: 500px;
  height: 700px;
  background-color: white;
}

#one img {
  filter: blur(1px);
  position: relative;
}
#one h1 {
  text-shadow: 1px 1px 2px #008080;
  font-family: lino;
  font-size: 3rem;
  position: relative;
  top: -30px;
  color: #0b293d;
  left: 90px;
  background-color: #e9ffd7;
  border-bottom: black dashed 2px;
  width: 400px;
  text-transform: uppercase;
}
#one h2 {
  position: relative;
  top: -60px;
  left: 35px;
}
#one h2 em {
  color: #2b48dc;
}
#one p {
  padding: 20px;
  font-size: 0.9rem;
  text-align: right;
  position: relative;
  top: -40px;
}
#one a {
  font-size: 0.5rem;
  color: #0b293d;
}
#one .hover {
  background-color: rgb(127, 255, 120);
  color: black;
  font-family: "Courier New", Courier, monospace;
  padding: 15px;
  height: 30px;
  width: 100px;
  position: relative;
  bottom: 120px;
  left: 15px;
  filter: drop-shadow(4px 4px 0px #008080);
}
#one .hover p {
  position: relative;
  right: 10px;
  font-size: 1.2rem;
}
#one .hover:hover {
  bottom: 140px;
}

#two {
  position: relative;
}
#two article {
  padding: 10px;
  font-size: 1rem;
  z-index: 1;
}
#two article h2 {
  margin-top: 0px;
}
#two article strong {
  text-shadow: 1px 1px #008080;
  color: yellowgreen;
  text-transform: uppercase;
  font-size: 2rem;
}
#two article strong:hover {
  color: rgb(219, 32, 125);
  text-shadow: 1px 1px #ffbb7c;
}
#two article p {
  position: relative;
  z-index: 1;
}
#two article a {
  background-color: yellowgreen;
  color: white;
}
#two article a:hover {
  background-color: black;
  color: yellowgreen;
}

#three {
  background-color: white;
}
#three h2 {
  text-align: center;
  font-family: pixel;
  color: white;
  font-size: 2rem;
  margin-bottom: 0px;
  filter: drop-shadow(1px 1px 0 rgb(219, 32, 125)) drop-shadow(-1px 1px 0 rgb(219, 32, 125)) drop-shadow(1px -1px 0 rgb(219, 32, 125)) drop-shadow(-1px -1px 0 rgb(219, 32, 125));
}
#three article {
  display: flex;
  padding: 10px;
  align-items: center;
}
#three article img:hover {
  rotate: 8deg;
  margin-left: 10px;
}
#three article h3 {
  color: rgb(219, 32, 125);
}
#three article em {
  border-bottom: 1px solid rgb(255, 126, 33);
}
#three article .description {
  border-right: rgb(219, 32, 125) dashed 4px;
  border-top: rgb(219, 32, 125) dashed 4px;
  border-bottom: rgb(219, 32, 125) dashed 4px;
  padding-left: 40px;
}

#four footer {
  color: rgb(219, 32, 125);
  padding: 10px;
}
#four article {
  display: flex;
  padding: 10px;
  align-items: center;
}
#four article img:hover {
  rotate: 8deg;
  margin-left: 10px;
}
#four article h3 {
  color: rgb(219, 32, 125);
}
#four article em {
  border-bottom: 1px solid rgb(255, 126, 33);
}
#four article .description {
  border-right: rgb(219, 32, 125) dashed 4px;
  border-top: rgb(219, 32, 125) dashed 4px;
  border-bottom: rgb(219, 32, 125) dashed 4px;
  padding-left: 40px;
}
#four .new {
  color: white;
  background-color: rgb(219, 32, 125);
  padding: 10px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
#four .new h2 {
  font-size: 1.6rem;
}
#four .new .album {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: black;
  justify-content: center;
}
#four .new .album p {
  padding: 10px;
}
#four .new .album mark {
  background-color: black;
  color: black;
}
#four .new .album mark:hover {
  color: white;
}

#five p {
  text-align: center;
  margin-top: 0px;
}
#five .imgtxt {
  display: inline-block;
  position: relative;
}
#five .imgtxt span {
  opacity: 0;
  position: absolute;
  top: 45%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 1.5rem;
  color: rgb(3, 55, 71);
  width: 300px;
  filter: drop-shadow(1px 1px 0 rgb(226, 255, 168)) drop-shadow(-1px 1px 0 rgb(219, 255, 147)) drop-shadow(1px -1px 0 rgb(226, 255, 169)) drop-shadow(-1px -1px 0 yellowgreen);
}
#five .imgtxt:hover span, #five .imgtxt:focus span {
  opacity: 1;
}

#six article {
  display: flex;
  padding: 10px;
  flex-direction: column-reverse;
}
#six article h2, #six article h3 {
  margin: 0px;
}
#six article h3 {
  font-weight: 100;
  font-style: italic;
}
#six article h2 {
  border-bottom: black dashed 2px;
}
#six article:hover h2 {
  margin-right: 40px;
}
#six .hey {
  padding: 5px;
  background-color: #fed000;
}
#six .hey mark {
  background-color: white;
  margin: 5px;
}

#seven article {
  padding: 15px;
}
#seven article img {
  float: right;
  position: relative;
  bottom: 70px;
}
#seven article img:hover {
  filter: hue-rotate(180deg);
}
#seven blockquote {
  background-color: #caff9c;
  padding: 5px;
  border-radius: 5px;
}
#seven blockquote:hover {
  background-color: #e6c0ff;
}

#eight img {
  margin: 30px;
  rotate: -7deg;
  filter: hue-rotate(270deg);
}
#eight h2 {
  position: relative;
  bottom: 130px;
  left: 70px;
  font-size: 1.4rem;
  font-family: pixel2;
  color: orangered;
}
#eight article {
  padding: 10px;
  border: #0b293d solid 2px;
  width: 70%;
  height: 500px;
  margin: auto;
  position: relative;
  bottom: 170px;
  overflow: scroll;
}
#eight article img {
  margin: 5px;
  rotate: 0deg;
  filter: hue-rotate(0deg);
  float: left;
}

#nine article {
  padding: 20px;
}
#nine article img {
  margin: 7px;
}
#nine article a {
  color: rgb(219, 32, 125);
}
#nine article a:hover {
  font-style: italic;
  text-decoration: none;
}
#nine article .tooltip img {
  margin-left: 50px;
}
#nine article .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
}
#nine article .tooltip:hover .tooltiptext {
  visibility: visible;
}

#ten article {
  padding: 20px;
  background-color: #00058e;
  color: white;
}
#ten article em:hover {
  color: #7cf4ff;
}
#ten img {
  border-radius: 4px;
  border: #caff9c 4px solid;
}
#ten img:hover {
  border: #caff9c 4px dotted;
}
#ten footer {
  padding: 15px;
}
#ten footer h2 {
  text-align: right;
}
#ten footer .bye {
  display: flex;
  gap: 20px;
}
#ten footer a {
  color: rgb(219, 32, 125);
}
#ten footer a:hover {
  font-style: italic;
  text-decoration: none;
}

.end {
  text-align: center;
  color: white;
  font-size: 3rem;
  padding: 20px;
  font-family: "Courier New", Courier, monospace;
}
.end a {
  color: white;
}

@media only screen and (max-width: 900px) {
  main {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: monospace;
  }
}/*# sourceMappingURL=summer25.css.map */