stylesheet.css

html {
  scroll-behavior: smooth;
}
body {
  /* padding-top: 50px; */
  background-color: black !important;
  background-size: contain;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
}
figure {
  display: block;
  width: 50vw;
}
.nav-link {
  animation: bgColor 10s infinite linear;
}
@keyframes bgColor {
  0% {
    color: lightpink;
  }
  25% {
    color: #ffa6c9;
  }
  50% {
    color: pink;
  }
  75% {
    color: #ffa6c9;
  }
  100% {
    color: lightpink;
  }
}
.highlight {
  background: rgba(255, 230, 0, 0.5);
  padding: 3px 5px;
  margin: -3px -5px;
  line-height: 1.7;
  border-radius: 5px;
  display: inline;
}
@keyframes spinright {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.35);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.colourmod.fab:hover,
.colourmod.fas:hover {
  animation: spinright 5s infinite;
}
.navbar-brand:hover {
  animation: spinright 5s infinite;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 1000px, 0);
  }
}
.vertical-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one */
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  align-items: center;
}
.display-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.sneaky {
  display: None;
}
.homeboy {
  /* window size */
  width: 100%;
  height: 100vh;
  /* background image */
  background-image: url(./assests/windows-giphy.gif);
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.biosphere {
  /* Graduate of IE&M  */
  background-image: url(./assests/space-giphy.gif);
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.four-naught-four {
  /* background image */
  background-image: url(https://media.giphy.com/media/IblcVM0Sl2hr3hD0Sd/giphy.gif) !important;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.construction {
  vertical-align: middle;
}

.awwww {
  /* awwww */
  padding-top: 50px;
  background-image: url(./assests/float-giphy.gif);
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* style=position: absolute; */
}
.blur {
  background-image: -webkit-linear-gradient(#fd04d7, #40e0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-shadow: 0.1vw 0.1vw 0.1vw white !important;

  font-weight: normal;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  /* font-family: "Fira Sans Condensed", sans-serif; */
  margin: 10;
}
.blur:after {
  background: none;
  content: attr(data-text);
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
  color: white !important;
}
.colourmod {
  text-shadow: 0.5vw 0.5vw 0.5vw #fd04d7;
  font-weight: normal;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  /* font-family: "Fira Sans Condensed", sans-serif; */
  margin: 10;
}
.bigbig {
  color: #ddd;
  font-size: 6vw;
  line-height: 8vw;
}
.big {
  color: #eee;
  font-size: 2vw;
  line-height: 4vw;
}
.small {
  color: #fff;
  font-size: 4vw;
  line-height: 3vw;
}

@keyframes blink {
  69% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #333;
  }
  80% {
    text-shadow: none;
  }
  81.5% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  82.5% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  94% {
    color: inherit;
    text-shadow: inherit;
  }
}
.neon-signboard {
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444,
    0 0 0.1em #ff4444, 0 10px 3px #000;

  /* display: none; */
}
.neon-signboard span {
  animation: blink linear infinite 2s;
}
.awwww .image {
  border-radius: 30px;
  width: 30vw;
  transition: all 0.23s ease-in-out;
}
.awwww .image:hover {
  transform: scale(1.1);
}
.rotato {
  -ms-transform: rotate(-7deg); /* IE 9 */
  -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  transform: rotate(-7deg);
}
.responsive-container {
  position: relative;
  width: 100%;
  border: 1px solid black;
}
.iconspacing {
  margin-left: 5vw;
  margin-right: 5vw;
}
.footer {
  background-image: url(./assests/noise-gifphy.gif);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* font and stuff */
  color: lightgray;
  /* Fallback */
  background-color: #2a3746 !important;
}
.biosphere a {
  color: white;
}
.biosphere a:hover {
  color: lightpink;
}
.footer a {
  color: lightpink;
}
.footer a:hover {
  color: hotpink;
  font-size: 110%;
}
.footer a:visited {
  text-decoration: underline;
}
.form-fields {
  padding-left: 20vw;
  width: 80vw;
}
.ig-handler {
  padding-right: 1em;
}
.input-fields {
  padding-bottom: 1vw;
  padding-left: 3vw;
  border-radius: 30px;
  border: 2px solid rgb(0, 0, 0);
}
.button-handler {
  margin: 0 21vw;
}
.bg-mik {
  background-color: rgba(52, 58, 64, 0.897) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}
.bg-primary-mik {
  background-color: rgba(0, 123, 255, 0.897) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}
.bg-blur {
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}
.current-mood-hover {
  color: hotpink;
  width: 100%;
  background-color: black;
}
@media only screen and (max-width: 600px) {
  .bigbig {
    color: #ddd;
    font-size: 10vw;
    line-height: 8vw;
  }
  .big {
    color: #eee;
    font-size: 4vw;
    line-height: 6vw;
  }
  figure {
    width: 100vw;
  }
  .bluehaze-image {
    width: 100vw;
  }
  .four-naught-four {
    overflow: hidden;
    background-image: url(https://media.giphy.com/media/IblcVM0Sl2hr3hD0Sd/giphy.gif)
      repeat-x !important;
    height: 100px;
    width: 1000px;
    animation: slide 10s linear infinite;
  }
  .awwww .image {
    width: 100vw;
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
  }
  .bottom-pad {
    /* display: none !important; */
  }
  #sunlight {
    order: 2;
  }
  #vangogh {
    order: 1;
  }
  #pickup {
    order: 3;
  }

  @keyframes slide {
    0% {
      transform: translate3d(-1, 0, 0);
    }
    100% {
      transform: translate3d(-650px, 0, 0);
    }
  }
  .ig-handler {
    padding-right: 1em;
    max-width: 66vw;
  }
  .button-handler {
    margin: 0 auto;
  }
}