.small-button {
    height: 30px;
    width: 125px;
    font-size: 11px;
}
.invisible {
    opacity: 0;
}
.invisible:hover {
    opacity: 1;
}
button:hover {
    text-shadow: 3px 3px 6px gray;
}
.navbar-text {
    text-decoration: none;
    font-family: cursive;
    padding: 0px;
    margin: 0px;
}
h1 {
    font-family: impact;
    background-color: antiquewhite;
    border-radius: 10px;
    box-shadow: 5px 10px 5px rgb(187, 175, 126);
    text-align: center;
}
h1:hover {
    text-shadow: 7px 7px 10px teal;
}
.title {
    font-family: impact;
    background-color: antiquewhite;
    border-radius: 10px;
    box-shadow: 5px 10px 5px rgb(187, 175, 126);
    text-align: center;
}
.title:hover {
    text-shadow: 7px 7px 10px teal;
    color: black;
    text-decoration: none;
    /*@keyframes confetti {
  0% {
    transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
  }*/
}
.other-title {
    color: blue;
}
.other-title:hover {
    color: red;
}
h2 a {
    text-decoration: none;
}
h2 a:hover {
    font-size: 300px;
    color: black;
    text-decoration: none;
    text-shadow: 7px 7px 10px teal;
}
h2 {
    font-family: helvetica;
    background-color: antiquewhite;
    border-radius: 10px;
    box-shadow: 5px 10px 5px rgb(187, 175, 126);
}
h2:hover {
    text-shadow: 7px 7px 10px teal;
}
.text {
    margin: 50px;
    font-family: helvetica;
    color: black;
    text-align: center;
}
a {
    margin: 15px;
    font-family: helvetica;
    color: purple;
}
img {
    border-radius: 25px 24px 23px 22px;
    width: 25vw;
    border: 8px outset beige;
}
body {
    background-image: linear-gradient( to bottom right, #f5d0d7, #f7b0be, #f89fb0, #fbc6d0, #f5f5dc, rgb(252, 252, 238));
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.button-box {
    display: flex;
    justify-content: space-evenly;
}
.img-box {
    display: flex;
    justify-content: space-between;
}
img:hover {
    text-decoration: none;
    border-color: lightpink;
}
.centered {
    left: 50%;
    right: 50%;
}
.navbar {
    overflow: hidden;
    background-color: rgb(245, 245, 220);
    position: sticky;
    top: 0;
    font-family: cursive;
    border-radius: 10px 10px;
    box-shadow: 10px 10px 10px #bbaf7e;
}
.navbar a {
    float: left;
    color: black;
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
}
.navbar a:hover {
    background-color: teal;
    color: rgb(245, 245, 220);;
    text-shadow: 0px 0px 10px rgb(245, 245, 220);
    border-radius: 10px 10px;
    text-decoration: none;
}
ul {
    list-style: circle;
    text-shadow: 7px 7px 7px teal;
}
.lower-alpha {
    list-style-type: lower-alpha;
    text-shadow: 7px 7px 7px teal;
}
.navbar-icon {
    padding: 13px 20px;
}
.navbar-icon:hover {
    color: #f5f5dc;
    text-shadow: 0px 0px 10px beige;
    background-color: #008080;
    border-radius: 10px;
    opacity: 1;
}
button {
    background-color: lavenderblush;
    width: 200px;
    height: 60px;
}
.banner-top {
    height: 75px;
    width: 1500px;
    background-color: rgb(28, 167, 167);
    border-left: rgb(2, 82, 82) 10px solid;
}
.banner-bottom {
    height: 75px;
    width: 1500px;
    background-color: rgb(28, 167, 167);
    text-align: center;
    border-left: rgb(2, 82, 82) 10px solid;
}
.banner-top-side {
    width: 0;
    border-bottom: 75px solid rgb(255, 255, 255, 0);
    border-left: 200px solid rgb(28, 167, 167);
}
/* width: 0;
    border-bottom: 120px solid red;
    border-left: 60px solid white;
    border-right: 60px solid white; */
.banner-bottom-side {
    height: 0px;
    width: 0;
    border-top: 75px solid rgb(255, 255, 255, 0);
    border-left: 200px solid rgb(28, 167, 167);
}
.banner-top-section {
    display: flex;
    margin: 0px 20px;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 10px;
    font-size: 30px;
    font-family: cursive;
}
.banner-bottom-section {
    display: flex;
    margin: 0px 20px;
    color: white;
    text-shadow: 0px 0px 10px;
    font-size: 30px;
    font-family: cursive;
}

#confettis {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}
.confetti {
  left: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  transform-origin: left top;
  animation: confetti 5s ease-in-out -2s infinite;
}
@keyframes confetti {
  0% {
    transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
  }
  25% {
    transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
  }
  50% {
    transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
  }
  75% {
    transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
  }
  100% {
    transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
  }
  /*
  0% {
    transform: rotateZ(0deg) rotateY(0deg) translate(0vw, 270vw);
  }
  25% {
    transform: rotateZ(0deg) rotateY(0deg) translate(0vw, -10vh);
  }
  50% {
    transform: rotateZ(0deg) rotateY(0deg) translate(0vw, -10vh);
  }
  75% {
    transform: rotateZ(0deg) rotateY(0deg) translate(0vw, -10vh);
  }
  100% {
    transform: rotateZ(0deg) rotateY(0deg) translate(0vw, -10vh);
  }
  */
}

.confetti:nth-child(1) {
  left: 10%;
  animation-delay: 0;
  background-color: #fc0120;
}
.confetti:nth-child(2) {
  left: 20%;
  animation-delay: -5s;
  background-color: #8257e6;
}
.confetti:nth-child(3) {
  left: 30%;
  animation-delay: -3s;
  background-color: #ffbf4d;
}
.confetti:nth-child(4) {
  left: 40%;
  animation-delay: -2.5s;
  background-color: #fe5d7a;
}
.confetti:nth-child(5) {
  left: 50%;
  animation-delay: -4s;
  background-color: #45ec9c;
}
.confetti:nth-child(6) {
  left: 60%;
  animation-delay: -6s;
  background-color: #f6e327;
}
.confetti:nth-child(7) {
  left: 70%;
  animation-delay: -1.5s;
  background-color: #f769ce;
}
.confetti:nth-child(8) {
  left: 80%;
  animation-delay: -2s;
  background-color: #007de7;
}
.confetti:nth-child(9) {
  left: 90%;
  animation-delay: -3.5s;
  background-color: #63b4fc;
}
.confetti:nth-child(10) {
  left: 100%;
  animation-delay: -2.5s;
  background-color: #f9c4ea;
}

@media (max-width: 800px) {
    body {
        background-color: blueviolet;
    }
    h6 {
        opacity: 0;
    }
}