*{
  padding:0;
  margin:0;
}
body {
  background: linear-gradient(to left, #65DFC9 0%, #6596F6 40%, #65DFC9 80%);
  background-size: 100% 100%;
  font-family: poppins;
}
.container{
  display:flex;
}

}
.containerz{
  backdrop-filter: blur(20px);
  display:flex;
}

.blur-filter{
  min-width:900px;
  width: 50%;
  margin: 13vh auto;
  height: 74vh;
  backdrop-filter: blur(20px);
}

main{
  width: 100%;
  height: 100%;
  display: flex;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.2), rgba(255,255,255,0.2));
  border-radius: 30px;
  overflow:hidden; /* setting to auto creates scroll column */
}

#dashboard{
  height:100%;
  width: 30%;
  background: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
}

#dashboard .user-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.8rem;
}

#dashboard .user-info img{
  width: 80px;
  border-radius: 40px;
}

#dashboard .user-info h4{
  font-size: 1.2rem;
  font-weight: 900;
  color: #3A517D;
  margin-top: 0.5rem;
}
#dashboard .user-info h6{
  font-size: 0.8rem;
  color: #3A517D;
  margin-top: 0.25rem;
}
#dashboard nav{
  display:flex;
  flex-direction: column;
  margin-top:1rem;
}

#dashboard nav .link-container{
  width: 50%;
  margin: auto;
}

#dashboard nav .link-container a{
  text-decoration: none;
  color: #6381BC;
  font-weight: 700;
  font-size: 1rem;
  display:flex;
  align-items: center;
  padding: 0.5rem;
}

#dashboard nav .link-container a img{
  width: 44px;
  height: 44px;
  margin-right: 1rem;
}

#dashboard nav .link-container a span{
  line-height: 2.5em;
}

#join-pro{
  display:flex;
  width: 80%;
  background: linear-gradient(to left, #6596F6 60%, #65DFC9 100%);
  margin:auto;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-radius: 30px;
}

#join-pro h3{
  color: white;
  font-size: 1.2rem;
  margin-left: 1.5rem;
}

#join-pro h4{
  color: white;
  font-size: 1.2rem;
  margin-left: 16rem;
}

#join-pro img{
  height: 70%;
  margin-right: 1rem;
}

#active-games{
  width: 56%;
  height: 86%;
  margin: auto;
}

#active-games h1{
  color: #3A517D;
  font-weight:900;
  font-size: 1.8rem;
}

#search-container{
  display:flex;
  flex-direction: row;
  margin-top: 1rem;
}

.glass-input{
  background: linear-gradient(to bottom right, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 40px;
  padding: 10px 20px;
  opacity: 0.8;
}

.glass-input:focus{
  outline: none;
}

.search-icon{
  width: 25px;
  margin-left:10px;
  padding-top:5px;
}

#cards-container{
  margin-top:3.5rem;
}

.game-card{
  margin-bottom: 2rem;
  display:flex;
  width: 80%;
  background: linear-gradient(to bottom right, rgb(252, 253, 255), rgba(252, 253, 255,0.8));
  padding: 1rem 2rem;
  border-radius: 20px;
  box-shadow: 0 1px 30px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.15);
  opacity: 0.9;
  -moz-box-shadow: none;
  -goog-ms-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.game-cardz{
  margin-bottom: 2rem;
  display:flex;
  width: 100%;
  background: linear-gradient(to bottom right, rgb(252, 253, 255), rgba(252, 253, 255,0.8));
  padding: 1rem 2rem;
  border-radius: 20px;
  box-shadow: 0 1px 30px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.15);
  opacity: 0.9;
  -moz-box-shadow: none;
  -goog-ms-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}


.game-cardz .game-image{
  border-radius: 25px;
  height: 80px;
}

.game-cardz .game-progress{
  margin: 0 2rem;
}
.game-cardz .game-progress h5{
  font-size: 1rem;
  opacity: 0.7;
}

.game-cardz .game-progress p{
  margin-top:0.3rem;
  font-size: 0.7rem;
  opacity: 0.4;
}

.game-cardz .game-progress progress{
  height: 30px;
  margin-top: 0.5rem;
  width: 100%;
}

.game-cardz .percentage-progress{
  display: flex;
  align-items: center;
  margin: auto;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0E81F8;
  opacity: 0.8;
}

.game-card .game-image{
  border-radius: 25px;
  height: 80px;
}

.game-card .game-progress{
  margin: 0 2rem;
}
.game-card .game-progress h5{
  font-size: 1rem;
  opacity: 0.7;
}

.game-card .game-progress p{
  margin-top:0.3rem;
  font-size: 0.7rem;
  opacity: 0.4;
}

.game-card .game-progress progress{
  height: 30px;
  margin-top: 0.5rem;
  width: 100%;
}

.game-card .percentage-progress{
  display: flex;
  align-items: center;
  margin: auto;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0E81F8;
  opacity: 0.8;
}

.glass-circle{
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  opacity:0.6;
  position: absolute;
  z-index: -100;
}

#left-circle{
  left: 15vw;
  bottom: 5vh;
}

#right-circle{
  right: 15vw;
  top: 5vh;
}

.parent{
  width: flex;
  height: 330px;
  border: 0px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}

.sidescroll {
   	position: relative;
   	height: 215px;
   	overflow: hidden;
   	width: 450px;
   	margin: 0px auto;
}

#sideinner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 35px;
}

.parents{
  width: flex;
  height: 100%;
  border: 0px solid #aaa;
  overflow: hidden;
}
.childs{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}

e{
  font-size: 1rem;
  height:100%;
  width: 182%;
  background: rgba(255,255,255,0);
  display: flex;
  flex-direction: column;
  left: -145px;
  position: relative;
}

mainz{
  left: -145px;
  margin-right: -50px;
  width: 100%;
  height: 100%;
  display: flex;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.2), rgba(255,255,255,0.2));
  border-radius: 30px;
  overflow:hidden; /* setting to auto creates scroll column */
}

#active-gamez{
  width: 56%;
  height: 86%;
  margin-right: 1rem;
}