* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  color: #426696;
  font-weight: 600;
  font-size: 3rem;
  opacity: 0.8;
}
h2,
p {
  color: #658ec6;
  font-weight: 500;
  opacity: 0.8;
}

h3 {
  color: #426696;
  font-weight: 600;
  opacity: 0.8;
}

main {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 721px;
  background: linear-gradient(to right top, #5f6262, #7e8283);
  min-height: 100vh;
  position:relative;
  display: flex;
  justify-content: center;

}

.glass {
  background: white;
  justify-content: center;
  bottom: 0.1%;
  min-height: 100vh;
  position:fixed;
  width: 80%;
  height: 720px;
  background: rgb(182, 175, 175);
  border-radius: 2rem;
  z-index: 2;
  backdrop-filter: blur(2rem);
  display: flex;
}

.dashboard {
  width: 70%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.3)
  );
  border-radius: 2rem;
}
.link {

  display: flex;
  margin: 2rem 0rem;
  padding: 1rem 5rem;
  align-items: center;
}
.link h2 {
  padding: 0rem 2rem;
}

.link img {

  padding-right: 10px;
  position: absolute;

}

.games {
  flex: 2;
}

.pro {
  background-color: rgb(236, 234, 234);
  border-radius: 1rem;
  color: white;
  padding: 1rem;
  position: relative;
}

.pro img {
  position: absolute;
  top: -10%;
  right: 10%;
}
.pro h2 {
  width: 40%;
  color: white;
  font-weight: 600;
}




/* GAMES */
.status {
  margin-top: 0.10rem;
}

.status input {
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.3)

  );
  border: none;
  width: 70%;
  padding: 0.5rem;
  border-radius: 2rem;


}

.games {

  margin: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.card {
  display: flex;
  background: linear-gradient(
    to left top,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.5)
  );
  border-radius: 1rem;
  margin: 2rem 0rem;
  padding: 2rem;
  box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
  justify-content: space-between;
  height: 9.8rem;
  width:95%; 
  bottom: 0.5rem; 
  position: relative;

}




.image-container {
  text-align: left;
  left: 1.3cm;
  position: absolute;
  margin-bottom: 11.0mm;
}



/* BUTTONs */

button {
  width: 140px;
  height: 45px;
  font-size: 23px;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  color: rgb(88, 118, 152);
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  position: relative;
  transition: all 0.5s;
  z-index: 1;
  top: 3.0rem;
  left: 9.5rem;
 }
 
 button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #426696;
  z-index: -1;
  transition: all 0.5s;
 }
 
 button:hover::before {
  width: 100%;
 }
 
 button:hover {
  color: black;
 }
 
 button:active:before {
  background: #b9b9b9;
 }

 .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10;
  background-color: white;
  width: 500px;
  max-width: 80%;
}

.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.modal-header .title {
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-body {
  padding: 10px 15px;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

a{
  position: relative;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
  color: #a0a0a0;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 0 10px;
}
a:after{
  content: "";
  position: absolute;
  background-color: rgb(123, 162, 198);
  height: 3px;
  width: 0;
  left: 0;
  bottom: -10px;
  transition: 0.3s;
}
a:hover{
  color: #ffffff;
}
a:hover:after{
  width: 100%;
}