html, body {
  height: 100%;
  width: 100%;
}

.games-folder{
  margin-top: 45px;
}

main > div > h1 {
  text-shadow: lightblue 0 0 15px;
  font-size: 60px;
  font-weight: bolder;
  text-align: center;
  margin-top:20px;
}

.featured{
  color:white;
  text-shadow: gold 0 0 20px;
  font-size: 35px;
  font-weight: bolder;
  text-align: center;
  margin-top:60px;
}

main > div > h3{
  animation: featured 3s linear infinite;
}

.carousel-indicators .active {
  background-color: red !important;
}

@keyframes featured {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.search-code{
  margin-top: 50px;
}

.input-search {
  padding-left: 10px;
  height: 40px;
  width: 100%;
  color: lightblue;
  background-color: #000210;
  border-radius: 5px;
  outline: none;
  border: 0px solid lightblue;
  margin-right: 20px;
}

#dropdown{
  color: lightblue;
  border-radius: 5px;
  border: 0px solid lightblue;
  background-color: #000210;
}

.dropdown-menu{
  color: lightblue;
  background-color: #000210;
}

.bi-list{
  color: lightblue ;
}

.input-search:hover {
  box-shadow: lightblue 0px 0px 13px;
  border: 1px solid lightblue;
}

.badge{
  margin-left: 10px;
  cursor: default;
}

#dropdown:hover {
  box-shadow: lightblue 0px 0px 13px;
  border: 1px solid lightblue;
  background-color: #000210;
}

.games-folder > div > div > h3{
  color: lightblue;
  text-shadow: lightblue 0px 0px 15px;
  cursor: pointer;
  margin-left: 5px;
}

.category{
  display: flex;
  flex-direction: row;
}

.category > p{
  margin-right: 10px;
  border: 1px solid blue;
  border-radius: 3px;
  color: gray;
  padding-right: 3px;
  padding-left: 3px;
  cursor: default;
}

.switches{
  margin-top: 20px;
}
.category-switch{
  cursor: pointer;
}

.switches > h4{
  color: lightblue;
  text-shadow: lightblue 0px 0px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.form-check-label{
  color: lightblue;
  text-shadow: lightblue 0px 0px 10px;
}

.offcanvas{
  background-color: #090b20;
}

.offcanvas .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23add8e6'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  box-shadow: lightblue 0px 0px 10px;
  border: 1px solid lightblue;
}

.favorite-star{
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: gold;
}

.offcanvas-title{
  color: lightblue;
  text-shadow: lightblue 0px 0px 10px;
}

.game-title{
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
}

.dropdown-menu{
  background-color: #000320;
  color: lightblue !important;
}
.dropdown-item, .dropdown-item:focus{
  background-color: #000320;
  color: lightblue !important;
}
.dropdown-item:hover{
  background-color: #000210;
  cursor: pointer;
}
.dropdown:hover .dropdown-menu{
  background-color: #000320;
  display:block;
}

header{
  z-index: 5000; 
  width: 100%;
}

footer{
  background-color: #101a27;
}
footer > div > a{
  color: blue !important;
}
#sun{
  color: orange;
}

nav{
  border-bottom: 0.3px solid #000000;
  font-weight:bold;
}
li{
  text-align: center;
}
a{
  color: white;
  background-color: transparent !important;
}
#btn-log-reg:hover{
  filter: brightness(1.75);
  box-shadow: inset 0 0 0.5em 0 purple, 0 0 0.5em 0 purple;
}
#btn-log-reg{
      background: linear-gradient(109.6deg, rgb(187, 0, 212) 11.2%, rgb(32, 38, 238) 91.1%) !important;
  color: whitesmoke;
}
.modal-header{
  color: white;
}
.modal-content{
  position: relative;
  padding: 20px var(--size-grid-margin);
  font-family: var(--font-stack);
  min-height: 380px;
  background: #101a27;
  color: gray !important;
}
.btn-playprofit{
  font-weight: bold;
  font-size: 14px;
}
#form{
  font-family:'comfortaa', sans-serif;
  color: #20B2AA;
  padding: 15px;
  border:1px solid  #20B2AA;
  background-color: #142234;
}
.form-control{
    color: #20B2AA;
    margin-top: 5px;
    height: 40px;
    width: 300px;
    border-radius: 10px;
    font-size: 15px;
    background-color: #101a27;
    text-shadow: #20B2AA 0px 0px 20px;
    outline: none;
}
#btn-login{
    color:#20B2AA;
    margin-top: 15px;
    background-color: var(--mainlight);
    border: 1px solid #20B2AA;
    border-radius: 10px;
    width: 300px;
    height: 45px;
    text-shadow: #20B2AA 0px 0px 20px;
    box-shadow: rgb(95, 240, 208, 15%)  0px 0px 50px;
}
#btn-login:hover{
    color: #101a27;
    background-color: #20B2AA;
    cursor: pointer;
    box-shadow: #20B2AA 0px 0px 40px;
}
.form-control:focus {
    color: #20B2AA;
    outline: none;
    border: 1px solid #20B2AA;
}
.form-control:hover {
  box-shadow: #20B2AA 0px 0px 20px;
  border: 1px solid #20B2AA;
}
#no-account{
  color: fuchsia !important;
  cursor: pointer;
}
.dropdown-menu{
  background-color: #101a27;
}
.dropdown-item, .dropdown-item:focus{
  background-color: #101a27;
  color: white !important;
}
.dropdown-item:hover{
  background-color: #030508;
}
.dropdown-menu:hover{
  background-color: #101a27;
}
.dropdown:hover .dropdown-menu{
  background-color: #101a27;
  display:block;
}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28555, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler{
  border: 1px solid red;
}
#dropdown-language:hover #dropdown-menu-language{
  position: absolute;
  bottom: 25px;
  right: 0px;
}
#themeToggler{
  margin: 10px;
  padding: 8px;
}
#icons-login{
  height: 30px;
}