@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Jersey+25&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: "Funnel Display", sans-serif;
}

html{
  font-size: 62.5%;
}

body
{
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  color: white;
  background-image: url("smily.gif");
}

header{
  margin-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 9%;
  background-color: transparent;
  filter:drop-shadow(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.logo
{
  font-size: 3rem;
  color: rgb(255, 255, 255);
  font-weight: 800;
  cursor: pointer;
  transition: 0.5s ease;
}

.logo:hover {
  transform: scale(1.3);
}

nav a{
  font-size: 1.8rem;
  color: white;
  margin-left: 6rem;
  font-weight: 500;
  transition: 0.3s ease;
  border-bottom: 3px solid transparent;

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}


/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

nav a:hover, nav a:focus, nav a:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

@media(max-width:995px)
{
  nav{
    position: absolute;
    top: 100%;
    right: 0;
    width: 40%;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    border-bottom-left-radius: 2rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
  }
}

nav.active{
  display: block;
}

nav a{
  font-size: 2rem;
  margin: 3rem 0;
  padding: 2rem
}

.active{
  font-size: 2rem;
  margin: 3rem 0;
  color:rgb(180, 181, 190);
  padding: 2rem
}

nav a:hover, nav a:active
{
  padding: 2rem;
  border-radius: 0rem;
  border-bottom: 0.5rem solid white;
}

section{
  min-height: 100vh;
  padding: 5rem 9% 5rem;
}

.home
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}

.port
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  padding-bottom: 440px;
}


.port .home-content h1
{
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.3;
}


.home .home-content h1
{
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.3;
}

.home .home-content h2
{
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
}

.home .home-content input
{
  font-size: 2rem;
  font-weight: bolder 700;
  line-height: 1;
  margin-top: 5px;
}

.home .home-content a
{
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.3;
  color: cyan;
}

.bouncin{
  position: relative;
  display: inline-block;
  color: yellow;
  animation: animate 2s ease-in-out infinite;
}

.yellowish{
  position: relative;
  display: inline-block;
  color: yellow;
}

@keyframes animate {
  0% {
      transform: translateY(0px);
  }

  20% {
      transform: translateY(-20px);
  }

  40%,
  100% {
      transform: translateY(0px);
  }
}

.home-content h4
{
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.home-content img
{
  position: relative;
  padding: 10px;
  width: 16vw;
  border-radius: 10%;
  box-shadow: 0 0 15px white;
  cursor: pointer;
  transition: 0.2s linear;
}


.pfp
{
  border-radius: 50%;
}

.pfp img
{
  position: relative;
  width: 32vw;
  border-radius: 50%;
  box-shadow: 0 0 15px white;
  cursor: pointer;
  transition: 0.2s linear;
}

.pfp img img:hover
{
  font-size: 1.8rem;
  font-weight: 500;
}


/* slideshow */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: -10px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;

  position: fixed;
  top: 70%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.footer { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  z-index: 10;
}