html,
body {
  font-family: poppins;
  /* background-color: rgb(22, 25, 56); */
  /* animation: fadeInAnimation ease 2s; */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body p,
body h1,
body h2,
body h5,
body li,
body ul,
body button,
body span,
body img,
body .progress-bar {
  animation: fadeInAnimation ease 2s;
}

.noise::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/img/static.gif) !important;
  opacity: 0.05;
  /* mix-blend-mode: ; */
  pointer-events: none;
}

.bg-static {
  animation: bg-static 12s linear infinite;
  background-image: linear-gradient(
    0deg,
    #ffffff23 2.38%,
    rgba(255, 255, 255, 0.068) 2.38%,
    rgba(255, 255, 255, 0.068) 50%,
    #ffffff23 50%,
    #ffffff23 52.38%,
    rgba(255, 255, 255, 0.068) 52.38%,
    rgba(255, 255, 255, 0.068) 100%
  );
  background-size: 42px 42px;
}

@keyframes bg-static {
  from {
    background-position: 42px;
  }
  to {
    background-position: 0px 0px;
  }
}

body::-webkit-scrollbar {
  display: none;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body .background-plate {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-color: rgb(22, 25, 56);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Navigation bars */

.navbar-custom {
  user-select: none;
  top: 0;
  overflow: hidden;
  padding-right: 10px;
  padding: 30px;
}

.navbar-custom a {
  background-color: rgba(255, 255, 255, 0.068);
  color: #fff;
  float: right;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.2s;
  margin: 3px;
  font-weight: bolder;
  border: 1px solid #ffffff9f;
}

/* .navbar-custom a:hover {
  color: rgb(31, 35, 80);
  background-color: rgb(120, 213, 230);
  transform: translateY(-7px);
  border: 1px solid rgb(104, 199, 216);
} */

.n-active {
  background: rgb(103 232 249) !important;
  color: rgb(31, 35, 80);
  pointer-events: none;
  cursor: default;
  transform: translateY(-8px);
  border-color: rgb(96 165 250) !important;
}

/* Title */

.title-custom {
  top: 0;
  float: left;
  padding: 5px 30px;
  text-align: center;
  overflow: visible;
  pointer-events: none;
  cursor: default;
}

.splitted {
  width: 100%;
  position: relative;
}
.splitted h1 {
  position: absolute;
  mix-blend-mode: screen;
  color: #0f0;
}
.splitted h1:first-child {
  color: #f00;
  transform: translate(-2px, -2px);
  /* translate(-15deg); */
}
.splitted h1:last-child {
  color: #00f;
  transform: translate(2px, 2px);
  /* skew(5deg); */
}

.title-custom h1 {
  padding: 10px;
  font-weight: bold;
}

.shaky {
  position: relative;
}

.shaky span {
  display: inline-flex;
  position: relative;
  animation: wave 1s infinite;
}

@keyframes wave {
  0%,
  100% {
    translate: 0 -2px;
  }
  50% {
    translate: 0 2px;
  }
}

/* Containers */

.custom-box-1 {
  padding: 5px;
  border: 1px solid #ffffff9f;
  background-color: rgba(255, 255, 255, 0.068);
}

.home-container-custom {
  align-items: start;
  display: flex;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 100%;
  max-width: 720px;
}

.home-container-profile-custom {
  background-color: rgba(54, 59, 86, 0.529);
  border: 2px solid #ffffff9f;
  padding-top: 30px;
  margin-right: 10px;
  padding: 25px;
  transition: 0.3s;
  border-style: dashed;
}

.home-container-profile-custom:hover {
  background-color: rgba(54, 59, 86, 0.529);
  border: 2px solid #fff;
  padding-top: 30px;
  margin-right: 10px;
  padding: 25px;
}

.home-container-box-custom {
  background-color: rgba(54, 59, 86, 0.529);
  border: 2px solid #ffffff9f;
  padding-top: 30px;
  /* width: 50%; */
  height: 60%;
  padding: 30px;
  transition: 0.3s;
  border-style: dashed;
}

.home-custom {
  width: 100%;
}

.fold-wrapper {
  width: 100%;
  display: flex;
  gap: 5px;
  /* overflow: hidden; */
}

.home-container-box-custom:hover {
  background-color: rgba(54, 59, 86, 0.529);
  border: 2px solid #fff;
  padding-top: 30px;
  /* padding: 5%; */
  padding: 30px;
}

.profile-custom {
  float: flex;
  text-align: left;
  color: #fff;
}

.profile-custom h2 {
  text-align: left;
  font-weight: bold;
  font-size: large;
}

.profile-custom img {
  float: left;
  width: 130px;
  height: 130px;
  border-radius: 20%;
  box-shadow: 1px 2px 2px #110f2a82;
  margin-bottom: 10px;
}

.home-custom {
  color: #fff;
  text-align: left;
  font-size: small;
  float: left;
}

/* Copyright or Credits */

footer {
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  pointer-events: none;
  user-select: none;
  font-size: small;
  height: auto;
  line-height: 1.6;
  margin: 30px 20px;
}

/* Stats */

.stats-custom {
  color: #fff;
  font-size: small;
}

.stats-lv {
  color: #fff;
  font-size: small;
  margin-bottom: -15px;
}

/* Collapse */

/* .collapsible {
  margin-top: 20px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 15px;
  background-color: rgba(255, 255, 255, 0.068);
  color: #fff;
  text-align: center;
  padding: 3% 5%;
  text-decoration: none;
  font-size: 17px;
  transition: 0.2s;
  font-weight: bolder;
  border: 1px solid #ffffff9f;
  height: 70px;
} */

.collapsible {
  border-bottom: 4px solid #ffffff9f !important;
}

.active-a,
.collapsible:hover {
  color: rgb(31, 35, 80);
  background: rgb(112, 234, 255) !important;
  border: 1px solid rgb(104, 199, 216);
  border-bottom: 4px solid rgb(96 165 250) !important;
}

.content {
  top: 0;
  background-color: rgba(54, 59, 86, 0.529);
  max-height: 0;
  transition: 0.3s ease-in-out;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  opacity: 1;
  border-top: none;
}

/* .content p {
  padding-top: 15px;
} */

/* .content h5 {
  padding: 10px;
  text-align: left;
} */

/* .content i {
  padding: 10px;
  display: inline;
} */

/* .content ul {
  padding-top: 15px;
  margin-right: 15px;
  display: inline;
} */

/* Social Boxes */

.custom-button-nf {
  margin-left: 3px;
}

.custom-button-nf img {
  float: flex;
  width: 150px;
  padding: 2px;
  image-rendering: pixelated;
  transition: 0.2s;
  border: 2px solid #ffffff00;
}

.custom-button-nf img:hover {
  background-color: rgb(104, 199, 216);
  transform: scale(1.07);
}

.social-card {
  transition: 0.3s;
  border: 1px solid #ffffff9f;
  transition: 0.3s;
  padding: 2px 2px;
}

.social-card img {
  padding: 10px;
}

/* Gallery */

/* #gallery img {
  transition: 0.2s ease-in-out;
  border: 4px solid #ffffff00;
} */

/* #gallery img:hover {
  transform: scale(1.04);
} */

.selected {
  /* focus:bg-cyan-300 focus:border-cyan-300 focus:border-b-blue-400 focus:border-opacity-100 focus:text-blue-950" */
  background-color: rgb(112, 234, 255) !important;
  border-color: rgb(104, 199, 216) !important;
  border-bottom-color: rgb(96 165 250) !important;
  color: rgb(31, 35, 80) !important;
  --tw-border-opacity: 1 !important;
}

/* Playsound */

/* Testing */

/* * {
  border: 1px solid #f008;
} */