body {
  font-family: "Bebas Neue", sans-serif;
  color: #ffffff;
  background: #000000;
  margin: 0;
  font-size: 32px;
}
.wrapper {
  display: flex;
  background: url('./assets/bg.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.logo {
  height: 70%;
  align-items: flex-end;
  display: flex;
}
.logo img {
  width: 840px;
  filter: drop-shadow(5px 5px 3px #222222);
}

.links {
  display: flex;
}
a {
  box-shadow: inset 0 0 0 0 #ffffff;
  color: #ffffff;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  text-decoration: none;
}
a:hover {
  box-shadow: inset 150px 0 0 0 rgba(255, 0, 115, 0.75);
  color: #ffffff;
}

.top {
  margin-top: 32px;
  font-size: 40px;
  gap: 56px 
}
.top a {
  border-radius: 4px;
  padding: 2px 14px;
  box-shadow: inset 0 0 0 0 #ffffff, inset 0 0 20px 0 rgb(253 2 124 / 70%);
  border: 2px solid rgb(253 2 124 / 35%);
}
.top a:hover {
  box-shadow: inset 150px 0 0 0 rgb(4 230 225 / 75%), inset 0 0 20px 0 rgb(253 2 124 / 70%);
  color: #ffffff;
}

.bottom {
  gap: 36px;
}

.copy {
  font-size: 18px;
  color: rgba(255 255 255 / 75%);
  width: 100%;
  background: rgb(0 0 0 / 45%);
  line-height: 30px;
  text-align: center;
  margin-top: 16px;
}

@media only screen and (orientation: portrait) {
.wrapper {
  background-position-x: 51%;
}
.logo {
  order: 0;
  margin-top: 8%;
  height: initial;
}
.logo img {
  width: 85%;
  margin: auto;
}
.links {
  flex-wrap: wrap;
  justify-content: center;
}
.top {
  order: 1;
  font-size: 90px;
  align-items: center;
  margin-top: 70%;
}
.top a {
  box-shadow: inset 0 0 0 0 #ffffff, inset 0 0 45px 0 rgb(0 64 94 / 75%);
  background-color: rgb(253 2 124 / 70%);
  padding: 2px 34px;
  border-color: rgb(0 64 94 / 75%);
}
.bottom {
  order: 2;
  margin: 0 20%;
  font-size: 64px;
}
.copy {
  order: 3;
  font-size: 32px;
  padding-top: 4px;
  line-height: 42px;
}
}