@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");

/* Define the fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Define the fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Apply the animation to .fade-enter */
.fade-enter {
  opacity: 0;
  animation: fadeIn 0.7s forwards;
}

/* Apply the animation to .fade-exit */
.fade-exit {
  opacity: 1;
  animation: fadeOut 0.3s forwards;
}

* {
  font-family: "Orbitron", system-ui;
}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
button,
label,
input,
select,
span,
textarea,
img {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

img {
  z-index: 999;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background-color: #000000;
  color: #569347;
}

canvas {
  margin-top: auto;
  height: auto;
  width: 90%;
  display: block;
  align-content: center;
  background-color: black;
  pointer-events: auto;
}

#fullscreenButton {
  text-align: left;
  cursor: pointer;
  font-size: 32px;
}

.helptext {
  font-size: 10;
  font-family: "Lucida Sans";
}

.separator {
  margin-top: 55px;
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
}

#app {
  position: relative;
  top: 5%;
  margin-bottom: 2%;
  margin-top: 5%;
  width: 100%;
  height: auto;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

#game-container {
  position: relative;
  display: block;
  flex-direction: column;
  height: 100%;
  width: 100%;
  z-index: 99;
}

#game-ui {
  position: relative;
  top: 10%;
  right: 5%;
  z-index: 100;
}

#footer {
  position: fixed;
  text-align: center;
  font-size: x-small;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}


#notifications {
  position: fixed;
  top: 5%;
  left: 5%;
  margin: 10px;
  z-index: 1000;
}

#background {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 90%;
  z-index: -1;
}

#profile-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}


textarea {
  resize: none;
}

/* 4player */
.Buttons {
  border-style: solid;
  border-color: rgb(10, 10, 92);
}

.modal {
  animation: all fadeIn 0.3s ease;
}

.userlist {
  flex-direction: column;
  border: 1px solid rgba(222, 222, 222, 100);
  border-radius: 2px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.user-label {
  border: 1px solid rgba(222, 222, 222, 0.8);
  border-radius: 2px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.user-label:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  gradient: linear-gradient(90deg, #000000 0%, #000000 100%);
}

.card {
    width: 100%;
}

/* Header styling */
h1 {
  color: #007bff; /* Primary color */
  margin-bottom: 10px;
}

h2 {
  color: #0056b3; /* Slightly darker primary color */
  margin-bottom: 15px;
}

h3 {
  color: #333; /* Dark text color */
  margin-bottom: 20px;
}

/* Form button styling */
button {
  background-color: #007bff; /* Primary color */
  color: #fff; /* White text */
  border: none;
  border-radius: 8px; /* Rounded corners */
  /* padding: 10px 20px; /* Padding */
  font-size: 1em; /* Larger text */
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Button hover effect */
button:hover {
  background-color: #0056b3; /* Darker shade of primary color */
  transform: translateY(-2px); /* Slightly lift the button */
}

/* Button focus effect */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 143, 255, 0.5); /* Focus outline */
}

/* Responsive Design */

@media (max-width: 768px) {
  
  button {
    padding-left: 42px;
    font-size: 0.6em;
  }
    chat-container {
      width: 100%;
      display: flex;
      flex-direction: row;
    }
    chat-log {
      width: 100%;
    }

  
  /* img { */
  /*   width: 50%; */
  /* } */
}

@media (max-width: 480px) {
  
  html, body {
      font-size: 0.8em;
  }

  button {
    padding-left: 42px;
    font-size: 0.6em;
  }

  #chat {
      position: fixed;
      bottom: 2px;
      right: 2px; 
      z-index: 100;
      display: none;
      flex-direction: column;
      max-height: 50vh;
      /* overflow-y: auto; */
      margin-bottom: 1%;
    }
  #app {
    margin-top: 18%;
  }
}

.mp3-hover:hover {
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.1);
  transition: all 200ms ease-in;
  transform: scale(1.1);
}

img.mp3-hover:hover {
  box-shadow: 0px 0px 100px #94a7ba;
  z-index: 2;
}

.popover-body {
  font-family: "Lucida Sans";
}

.chat-userlist {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important; /* Ensure no extra unused space */
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#chat {
  position: fixed;
  bottom: 5%;
  right: 5%; 
  z-index: 100;
  display: none;
  flex-direction: column;
  max-height: 70vh;
  /* overflow-y: auto; */
  margin-bottom: 5%;
}

#chat-log {
  height: 50vh; /* Adjust as needed */
  max-height: 50vh; /* Ensures the maximum height is 50vh */
  overflow-y: auto; /* Enables vertical scrolling */
  overflow-x: hidden; /* Hides horizontal scrolling */
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 15px;
  user-select: none; /* Disables text selection */
  -webkit-user-select: none; /* For WebKit browsers */
  -moz-user-select: none; /* For Mozilla browsers */
  -ms-user-select: none; /* For Internet Explorer/Edge browsers */
  
  /* WebKit browsers (Chrome, Safari) */
  ::-webkit-scrollbar {
    width: 0; /* Hides the scrollbar */
    background: transparent; /* Optional: background for better visibility */
  }

  /* Firefox */
  scrollbar-width: none; /* Hides the scrollbar */

  /* Edge */
  -ms-overflow-style: none; /* Hides the scrollbar */
}


#chat-message-input {
  width: 100%;
}

#chat-input {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
}

.chat-message {
  margin: 0; /* Removes default margin */
  margin-left: 10px; /* Adds space between messages */
  padding: 0; /* Removes default padding */
  line-height: 1.4; /* Adjust line height to reduce extra space */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Vertically center text */
  justify-content: left; /* Horizontally center text, if needed */
  min-height: 30px; /* Set a minimum height if needed */
  word-break: break-word; /* Ensures long words are broken */
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-height: inherit;
  overflow: auto;
  /* max-width: 50vw; */
  font-size: smaller;
}

#room-name {
  margin-top: 15px;
}

.navbar.navbar-default {
  background-color: #ffffff;
  border-color: #ffffff;
}

.navbar-nav .dropdown-menu.show {
  display: block;
  opacity: 1;
  visibility: visible;
  color: red;
}

.navbar-nav .dropdown-menu {
  display: none;
  opacity: 0;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    scale 1.5s ease;
}

.navbar-nav .dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease,
    scale 0.5s ease;
}

.form-control {
  max-width: 100%;
}

.form {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.form-control-file {
  border-radius: 0.375rem; /* Rounded corners */
  box-shadow: none; /* Remove default box-shadow */
}

.form-check-input {
  margin-right: 0.5rem; /* Space between checkbox and label */
}

.form-check-label {
  margin-bottom: 0; /* Remove margin from label */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.75);
}

.glitch {
  position: relative;
  animation: glitch 9s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(1px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-1px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 rgba(152, 6, 160, 0.69);
  background: rgba(0, 0, 0, 0);
  animation: glitch-anim-1 2s linear infinite alternate-reverse;
  animation: glitchTop 1.5s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 31%, 0 31%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 31%, 0 31%);
}

@keyframes glitchTop{
  2%, 64% {
    transform: translate(2px, -2px);
  }
  4%, 60% {
    transform: translate(-2px, 2px);
  }
  62% {
    transform: translate(13px, -1px) skew(-13deg); 
  }
}

.glitch::after {
  left: 2px;
  text-shadow: 1px 0 rgba(28, 147, 111, 0.69);
  background: rgba(0, 0, 0, 0);
  animation: glitch-anim-2 2s linear infinite alternate-reverse;
  animation: glitchBottom 2s linear infinite;
  clip-path: polygon(0 69%, 100% 69%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 69%, 100% 69%, 100% 100%, 0 100%);
}

@keyframes glitchBottom{
  2%, 64% {
    transform: translate(-2px, 0);
  }
  4%, 60% {
    transform: translate(-2px, 0);
  }
  62% {
    transform: translate(-21px, 5px) skew(42deg); 
  }
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(42% 0 38% 0);
    }
    20% {
        clip-path: inset(91% 0 2% 0);
    }
    40% {
        clip-path: inset(42% 0 1% 0);
    }
    60% {
        clip-path: inset(33% 0 61% 0);
    }
    80% {
        clip-path: inset(17% 0 9% 0);
    }
    100% {
        clip-path: inset(69% 0 42% 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(4% 0 93% 0);
    }
    20% {
        clip-path: inset(48% 0 12% 0);
    }
    40% {
        clip-path: inset(24% 0 68% 0);
    }
    60% {
        clip-path: inset(62% 0 49% 0);
    }
    80% {
        clip-path: inset(79% 0 19% 0);
    }
    100% {
        clip-path: inset(6% 0 84% 0);
    }
}