@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
.theme-button-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  right: 0px;
  margin: 2rem 2rem;
  border-radius: 20px;
}

.theme-btn {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}

.theme-btn:hover {
  transform: scale(1.5);
}

.purple {
  background-color: rgb(196, 123, 214);
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.green {
  background-color: rgb(187, 253, 218);
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.pink {
  background-color: rgb(255, 138, 210);
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.skin {
  background-color: rgb(235, 144, 159);
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.blue {
  background-color: #3a799b;
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.yellow {
  background-color: #b88e40;
  border-color: rgb(1, 0, 0);
  transition: 0.5s ease-in-out;
}

.dark-a {
  box-shadow: 0px 0px 2px 1px rgb(236, 236, 236);
}

.green-a {
  box-shadow: 0px 0px 2px 1px rgb(16, 97, 14);
}

.skin-b {
  box-shadow: 0px 0px 2px 1px rgb(122, 44, 44);
}

.pink-c {
  box-shadow: 0px 0px 2px 1px rgb(220, 34, 173);
}
.yellow-g{
  box-shadow: 0px 0px 2px 1px rgb(103, 61, 30);
}
.blue-f{
  box-shadow: 0px 0px 2px 1px rgb(132, 221, 122);
}
.purple-d {
  box-shadow: 0px 0px 2px 1px rgb(110, 40, 110);
}

.theme-container * {
  cursor: pointer;
}
.theme {
  transform: translate(-40px, -2px);
}
.bright {
  background-color: #fff;
  border-color: rgb(1, 0, 0);
}
.dark {
  background-color: rgb(141, 141, 141);
  transition: 0.5s ease-in-out;
}

.button-blob {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.bright-blob {
  background-color: antiquewhite;
  margin-left: 50%;
  transition: 0.6s;
}
.dark-blob {
  background-color: black;
  margin-left: 10%;
  transition: 0.6s;
}


.drop-down-container{
  display: flex;
  gap: 10px;
  position: fixed;
  right: 0px;
  margin: 2rem 2rem;
  border-radius: 20px;
}

.drop-down-btn{
  display: none;
}

/*for active themes*/


@media screen and (max-width:786px){
  .drop-down-container{
   margin:4rem 7px 5px 5px;
   gap:6px;
  }
  .theme-button-container {
    margin: 5px;
  }

  .drop-down-btn{
  height:29px;
  width: 29px;
  font-size:20px;
  border-radius: 50%;
  outline: none;
  background-color: rgb(129, 129, 129);
  color:white;
  border:none;
  margin: 0px;
  align-items: center;
  justify-content: center;
  }
  .theme-btn {
    height: 15px;
    width: 15px;
  }
  .theme-btn{
    margin: 6px;
  }
}

