body
{
  background: rgb(0,0,0);
  background: linear-gradient(60deg, rgba(0,0,0,1) 35%, rgba(1,99,119,1) 90%);
  font-family: "Montserrat", sans-serif;
  color:#fff
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

.info-box {
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
  padding: 10px;
  width: 175px;
  height: auto;
  position: relative;
  top: -450px;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.icon {
  /*shows what im doing, sort of...*/
  background-size: 16px 16px; /* adjust the size as needed */
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 5px; /* add some margin between icons */
}

.pfp {
  display: flex;
  width: 125px;
  height: 125px;
  padding: 5px;
  border-radius: 250px;
  justify-content: center;
}

.info-box2 {
  /*one of the worst things i had to work with, AND THATS JUST THE FUCKING START...*/
  display: flex;
  flex-direction: column;
  position: relative;
  top: 13px;
  left: 215px;
  gap:0px;
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
  padding: 10px;
  width: 82%;
  margin: 5px;
  border-radius: 25px;
  margin-top: 5vh;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.warning-button {
  background-color: rgba(255, 50, 50, .15);
  backdrop-filter: blur(5px);
  font-family: "Montserrat", sans-serif;
  border: none;
  border-radius: 25px;
  padding: 15px 32px;
  font: bolder;
}
.warning-button button:hover {
  animation: hover-effect 0.3s ease-in-out;
}

.icon2 {
  /*Discord icons, these are rounded*/
  border-radius: 64px; !important
  width: 64px;
  height: 64px;
}

.info-box3 img:hover {
  /* Add a hover effect with animation */
  animation: hover-effect 0.3s ease-in-out; /* Add an animation effect */
}

.info-box3 {
  /*What i do and stuff*/
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
  padding: 2px;
  width: 99%;
  margin: 5px;
  border-radius: 25px;
  margin-top: 3vh;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.icon3 {
  /*Control c'ed and control v'ed, without radius.*/
  width: 64px;
  height: 64px;
}

nav {
  /* Set the navigation bar to be a horizontal bar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
  padding: 10px;
  font-family: "Montserrat", sans-serif;
  border-radius:30px;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

nav ul {
  /* Remove the default bullet points and margin */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between; /* Add this to space out the list items */
}

nav li {
  /* Make each list item a flex item */
  display: flex;
  align-items: flex;
}

nav p {
  /* Use flexbox to align the text to the right */
  display: flex;
  justify-content: flex-end;
  color: #fff;
}
.branding {
  margin-left: auto;
  color: #fff;
  padding-right: 5px
}


nav a:hover {
  /* Add a hover effect */
  background-color: #444;
  color: #fff;
}

nav a {
  /* Style the links */
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 20px;
  transition: background-color 0.3s ease-in-out; /* Add a transition effect */
}

nav a:hover {
  /* Add a hover effect with animation */
  background-color: #444;
  color: #fff;
  border-radius: 20px;
  animation: hover-effect 0.3s ease-in-out; /* Add an animation effect */
}


@keyframes hover-effect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }