body {
    margin: 0;
    font-family: roboto, sans-serif;
    
}

#main {
    height: 100vh;
    position: relative;
    background-image:
    url('https://gordosmc.bringfeel.com.ar/assets/img/background.webp');
    background-size: cover;
    margin: 0;
}

.center {
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: rgba(34, 36, 55, 0.75);
    padding: 10px 40px 40px;
    border-radius: 5px;
    backdrop-filter: blur(3px);
    animation: opacityIn 2s linear forwards;
}

@keyframes opacityIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#blur {
  width: 100%;
  height: 100%;
  animation: load 0.5s linear forwards;
}

@keyframes load {
  from {
    background-color: black;
    backdrop-filter: blur(0px);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(3px);
  }
}

#status {
  border-collapse: collapse;
  width: 100%;
  color: white;
  width: 100%;
}

#status th {
  border-bottom: 1px solid #dddddd85;
  padding: 8px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #00000021;
  color: white;
}

#status td {
  border: 1px solid #dddddd1a;
  padding: 18px;
  color: #b9c0d3;
  font-weight: 600;
}

#status tr:hover {background-color: #dddddd05;}

#copy-ip {
  padding: 15px 30px 15px 30px;
  border-radius: 10px;
  margin: 10px;
  background-color: #8C3061;
  display: inline-block;
}

#copy-ip:hover {
  animation: buttonIn 0.2s ease forwards;
  color: #ffffff;
}

#copy-ip:not(:hover) {
  animation: buttonOut 0.2s ease forwards;
}

#copy-ip:active {
  animation: buttonOut 0.2s ease forwards;
}

@keyframes buttonIn {
  to {
    background-color: #522258;
    color: #ffffff;
  }
}

@keyframes buttonOut {
  from {
    background-color: #522258;
    color: #ffffff;
  }

  to {
    background-color: #8C3061;
    color: rgb(24, 24, 24);
  }
}

#discord {
  padding: 15px 30px 15px 30px;
  border-radius: 10px;
  margin: 10px;
  background-color: #5865F2;
  display: inline-block;
}

#discord:hover {
  animation: discordIn 0.2s ease forwards;
  color: #ffffff;
}

#discord:not(:hover) {
  animation: discordOut 0.2s ease forwards;
}

#discord:active {
  animation: discordOut 0.2s ease forwards;
}

@keyframes discordIn {
  to {
    background-color: #7289da;
    color: #ffffff;
  }
}

@keyframes discordOut {
  from {
    background-color: #7289da;
    color: #929292;
  }

  to {
    background-color: #5865F2;
    color: rgb(24, 24, 24);
  }
}

a {
  font-weight: 600;
}

@media (max-width: 750px) {
  .center {
    padding: 3%;
  }

  #status td {
  padding: 10px;
  }

  #copy-ip, #discord {
    padding: 5px 20px 5px 20px;
  }

  #discord {
    margin: 0;
  }
}

@media (max-width: 375px) {
  #status td {
  padding: 1px;
  }
}