@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap");

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

body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #27292d;
}

.welcome {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.welcome span {
  font-size: 100px;
  letter-spacing: 15px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  text-shadow: 8px 8px #f4b809, 20px 20px #000000;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bolder;
}

.welcome p {
  color: #fff;
  padding: 5vh 15px;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 1px;
  text-align: center;
}

footer {
  display: flex;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: 1px;
  justify-content: center;
  align-items: center;
  color: white;
}

footer a {
  color: white;
  text-decoration: none;
  margin-left: 5px;
}

@media only screen and (max-width: 991px) {
  .welcome span {
    font-size: 70px;
    padding: 0 15px;
  }
  .welcome p {
    font-size: 18px;
    line-height: 28px;
  }
}

@media only screen and (min-width: 1200px) {
  .entry.three {
    width: 33.333%;
  }
  .entry.two {
    width: 50%;
  }
}

@media only screen and (max-width: 768px) {
  .welcome p {
    padding-top: 70px;
  }
}

/* ________ Entry styles ________ */

.entry {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 15px;
  min-height: 50vh;
}

.entry div {
  position: relative;
}

.entry div:before,
.entry div:after {
  display: block;
  content: "";
  position: absolute;
}

/* ________ Frank styles ________ */

#frank {
  background-color: #ddd;
}

#frank div {
  width: 130px;
  height: 160px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) center 87% / 60px 20px,
    linear-gradient(to right, seagreen, seagreen) center / 60px 100%,
    linear-gradient(rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 50%) center 94% / 80px 10px,
    radial-gradient(30px 30px, black, transparent),
    radial-gradient(circle, #21653f 25%, seagreen 25%, seagreen 50%, transparent 50%) 0 60% / 30px 30px,
    radial-gradient(#216537 25%, seagreen 25%, seagreen 50%, transparent 50%) 100% 60% / 30px 30px;
  background-repeat: no-repeat;
}

#frank div:before {
  width: 100px;
  height: 135px;
  left: 15px;
  background: seagreen;
  border-radius: 6px 6px 15px 15px;
  background-image: linear-gradient(#333333, black), linear-gradient(seagreen, seagreen),
    radial-gradient(transparent 40%, #216438 40%, #216438 50%, transparent 50%),
    radial-gradient(black 15%, #ff9900 15%, #ff9900 30%, white 30%, white 45%, transparent 45%),
    radial-gradient(black 15%, #ff9900 15%, #ff9900 30%, white 30%, white 45%, transparent 45%),
    linear-gradient(to bottom, black, black), radial-gradient(ellipse, black 50%, transparent 50%),
    radial-gradient(ellipse, black 50%, transparent 50%), radial-gradient(black 50%, transparent 50%);
  background-size: 40px 2px, 22px 16px, 30px 30px, 25px 25px, 25px 25px, 100% 20px, 15px 40px, 17px 40px, 15px 20px;
  background-position: center 120px, center 89px, center 85px, 20px 70px, 55px 70px, 0 0px, -5px -3px, 6px -7px,
    103% 11px;
  background-repeat: no-repeat;
  transition: 0.2s ease-in-out;
}

#frank div:after {
  width: 30px;
  height: 10px;
  left: 32px;
  top: 67px;
  right: 0;
  border-radius: 2px;
  box-shadow: 36px 0px 0px 0px;
  background-color: black;
  transition: 0.2s ease-in-out;
}

#frank div:hover:before {
  background-size: 20px 2px, 22px 16px, 30px 30px, 25px 25px, 25px 25px, 100% 20px, 15px 40px, 17px 40px, 15px 20px;
}

#frank div:hover:after {
  top: 60px;
}

/* ________ Phone styles ________ */

#phone {
  background-color: #ccc;
}

#phone div {
  width: 110px;
  height: 210px;
  border-radius: 12px;
  border: 4px solid #010101;
  background-image: linear-gradient(106deg, #000000bf 44%, rgba(0, 0, 0, 0.65) 40%, #000000bf 95%);
  transition: 0.2s ease-in-out;
}

#phone div:before {
  width: 42px;
  height: 6px;
  background-color: #010101;
  left: 30px;
  top: 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-image: radial-gradient(
      circle at center 35%,
      #cccccc 0%,
      #001736 2%,
      #001736 5%,
      #676f77 5%,
      #676f77 6%,
      transparent 10%,
      transparent 10%
    ),
    radial-gradient(circle at 18% 35%, rgba(70, 70, 70, 0.8) 2%, transparent 4%, transparent 100%);
}

#phone div:after {
  width: 4px;
  height: 18px;
  top: 30px;
  left: -5px;
  background-color: #010101;
  border-radius: 8px;
  box-shadow: 0px 20px 0px 0px, 108px 0px 0px 0px, 108px 15px 0px 0px;
}

#phone div:hover {
  transform: scale(1.01) translateY(-5px);
  box-shadow: 0px 25px 25px -10px #00000066;
  transition: 0.5s;
}

/* ________ Pokeball styles ________ */

#pokeball {
  background-color: #aaa;
}

#pokeball div {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: white;
  background-image: linear-gradient(#010101, #010101), radial-gradient(#010101 15%, transparent 15%),
    linear-gradient(to top, transparent 50%, rgba(255, 0, 0, 0.9) 50%);
  background-position: center;
  background-size: 100% 10px, 100%, 100%;
  background-repeat: no-repeat;
  box-shadow: inset -12px -8px 0px rgba(0, 0, 0, 0.2);
  transition: 0.4s cubic-bezier(0.68, -1, 0.27, 2);
}

#pokeball div:before {
  width: 19px;
  height: 19px;
  top: 50%;
  left: 50%;
  background-image: radial-gradient(#fff 100%, white 100%);
  transform: translate(-50%, -50%);
  box-shadow: inset 2px 2px 0 0 #fff, inset -2px -3px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

#pokeball div:hover {
  border-radius: 25%;
}

#pokeball div:hover:before {
  box-shadow: inset -2px -2px 2px 0 #fff, inset 2px 3px 0 0 rgba(0, 0, 0, 0.2);
  width: 18px;
  height: 18px;
}

/* ________ Dice styles ________ */

#dice {
  background-color: #d1d1d1;
}

#dice div {
  width: 130px;
  height: 130px;
  margin-bottom: -50px;
  margin-left: -60px;
  transform: scale(0.75);
  background-color: #f0f0f0;
  background-image: radial-gradient(circle, black 50%, transparent 50%);
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.4s ease;
}

#dice div:before {
  height: 50px;
  width: 130px;
  top: -50px;
  left: 30px;
  background-color: white;
  transform: skewX(-50deg);
  background-image: radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%),
    radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%);
  background-size: 60px 25px;
  background-position: top right, top left, bottom left, bottom right;
  background-repeat: no-repeat;
  transition: 0.4s ease;
}

#dice div:after {
  height: 130px;
  width: 60px;
  top: -25px;
  left: 130px;
  background-color: #ddd;
  transform: skewY(-40deg);
  background-image: radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%),
    radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%),
    radial-gradient(black 25%, transparent 25%);
  background-size: 25px 57px;
  background-position: top left, top right, bottom left, bottom right, center;
  background-repeat: no-repeat;
  transition: 0.4s ease;
}

#dice div:hover {
  transform: scale(0.85);
  background-image: radial-gradient(circle, black 50%, transparent 50%),
    radial-gradient(circle, black 50%, transparent 50%), radial-gradient(circle, black 50%, transparent 50%),
    radial-gradient(circle, black 50%, transparent 50%), radial-gradient(circle, black 50%, transparent 50%),
    radial-gradient(circle, black 50%, transparent 50%);
  background-size: 30px 25px;
  background-position: 18% 15%, 18% 50%, 18% 85%, 82% 15%, 82% 50%, 82% 85%;
}

#dice div:hover:before {
  background-image: radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%),
    radial-gradient(black 25%, transparent 25%);
  background-size: 60px 25px;
  background-position: bottom left, top right, center;
}

#dice div:hover:after {
  background-image: radial-gradient(black 25%, transparent 25%), radial-gradient(black 25%, transparent 25%);
  background-size: 25px 57px;
  background-position: top right, bottom left;
}

/* ________ Captain styles ________ */

#captain {
  background-color: #c1c1c1;
}

#captain div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  background: radial-gradient(
    #0472b9 30%,
    #ce0020 30%,
    #ce0020 44%,
    white 44%,
    white 56%,
    #ce0020 56%,
    #ce0020 70%,
    transparent 70%
  );
  background-position: center;
  background-repeat: no-repeat;
  transition: 1s cubic-bezier(0.18, 0.2, 0.32, 1.2);
  border-radius: 50%;
}

#captain div:before {
  content: "★";
  color: rgba(255, 255, 255, 0.9);
  font-size: 60px;
  margin-top: -4px;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

#captain div:after {
  width: 99%;
  height: 99%;
  border-radius: 100%;
  background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, transparent 100%)
      center / 99% 99%,
    linear-gradient(-45deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, transparent 100%) center /
      99% 99%,
    linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.15) 50%, transparent 65%, transparent 100%) center / 99% 99%,
    linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.15) 50%, transparent 65%, transparent 100%) center / 99%
      99%;
  background-position: center;
  background-repeat: no-repeat;
}

#captain div:hover {
  transform: rotate(360deg);
}

/* ________ Light styles ________ */

#light {
  background-color: #a1a1a1;
}

#light div {
  width: 120px;
  height: 120px;
  border: 5px solid #010101;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-bottom-width: 1px;
  margin-top: -40px;
  background: radial-gradient(circle at 39% 66%, transparent 5%, #010101 6%, #010101 8%, transparent 9%),
    radial-gradient(circle at 61% 66%, transparent 5%, #010101 6%, #010101 8%, transparent 9%),
    linear-gradient(to bottom, #010101, #010101) center 73% / 27px 3px,
    linear-gradient(#010101, #010101) 45% 100% / 3px 35px, linear-gradient(#010101, #010101) 55% 100% / 3px 35px;
  box-shadow: inset 3px 3px 0px 0px rgba(255, 255, 255, 0.5);
  background-repeat: no-repeat;
}

#light div:before {
  width: 50px;
  height: 40px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -36px;
  border: 3px solid #010101;
  border-top: none;
  background: linear-gradient(#010101, #010101) 18px 0 / 3px, linear-gradient(#010101, #010101) 29px 0 / 3px,
    linear-gradient(transparent, transparent) 0 / 100%;
  background-repeat: no-repeat;
}

#light div:after {
  width: 58px;
  height: 24px;
  bottom: -45px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 2px;
  box-shadow: inset 0px 4px #d0d0d0, inset 0px 8px #454545, inset 0px 12px #d0d0d0, inset 0px 16px #454545,
    inset 0px 20px #d0d0d0, inset 0 -4px #454545;
  transform: skewY(-2deg);
}

#light div:hover {
  box-shadow: 0 -30px 120px 10px #fffacd, inset 3px 3px 0px 0px rgba(255, 250, 205, 0.5);
  background-color: #c8c6b3;
}

#light div:hover:before {
  background-color: #c8c6b3;
}

/* ________ Pictures styles ________ */

#picture1 {
  background-color: #ddd;
}

#picture2 {
  background-color: #ccc;
}

#picture3 {
  background-color: #aaa;
}

.picture div {
  width: 220px;
  height: 160px;
  border: solid 20px #eee;
  border-top-color: #ddd;
  border-right-color: #eee;
  border-bottom-color: #fff;
  border-left-color: #eee;
  border-radius: 2px;
  background: linear-gradient(45deg, black, black) center / 75% 66%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  transform-origin: top left;
  background-attachment: fixed;
}

.picture div:before {
  border-radius: 2px;
  bottom: -9px;
  left: -9px;
  right: -9px;
  top: -9px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
}

.picture div:after {
  border-radius: 2px;
  bottom: -11px;
  left: -11px;
  right: -11px;
  top: -11px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

.picture div:hover {
  transform: rotate(4deg);
}

#picture1 div {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1em, silver 1em, silver 50%),
    repeating-linear-gradient(45deg, slategray, slategray 1em, white 1em, white 50%);
  background-size: 3em 3em, 2em 2em;
}

#picture2 div {
  background-color: silver;
  background-image: radial-gradient(
      circle at 100% 150%,
      silver 24%,
      white 24%,
      white 28%,
      silver 28%,
      silver 36%,
      white 36%,
      white 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(
      circle at 0 150%,
      silver 24%,
      white 24%,
      white 28%,
      silver 28%,
      silver 36%,
      white 36%,
      white 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(
      circle at 50% 100%,
      white 10%,
      silver 10%,
      silver 23%,
      white 23%,
      white 30%,
      silver 30%,
      silver 43%,
      white 43%,
      white 50%,
      silver 50%,
      silver 63%,
      white 63%,
      white 71%,
      transparent 71%,
      transparent
    ),
    radial-gradient(
      circle at 100% 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    ),
    radial-gradient(
      circle at 0 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    );
  background-size: 40px 20px;
}

#picture3 div {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, silver 1em, silver 50%),
    repeating-linear-gradient(45deg, #111626, #111626 1em, #888 1em, #888 50%);
  background-size: 3em 3em, 2em 2em;
}