*{
    color:white;
    scroll-behavior: smooth;
}

button, a, img {
  user-select: none;
}

::selection {
  background-color: #5e29a3b2;
  color: white;
}

/* Logo part */
.dot{
    background-color:white;
    transition:all 0.5s ease;
    margin:5px;
    width:5px;
    height:5px;
}
.hamDesign{
    transition:all 1s ease;
}
.hamDesign.clicked{    
   transform: rotate(90deg); 
}
.hamDesign.clicked .dot{
    height: 40px;
}
#logo{
  width:5rem;
  height:5rem;
}

/* Menu part */
#menu{
    width:15rem;
    transition: all 0.8s ease;
    padding-right:2rem;
    border-right: 1px solid #202020;
}

.menuItem{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:1rem;
    padding-right:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    width:100%;
    cursor:pointer;
    border-radius:1rem;
    margin-bottom:1rem;
    transition: all 0.3s ease;
}
.menuItem i{
    margin:10px;
}
.menuItem:hover{
    background-color:#2a0d4f;
}
.menuItem.selected{
    background-color:#9546fc;
    transition: all 0.5s ease;
}
.menuItem.selected:hover{
    color: rgba(148, 70, 252, 0.5);
    box-shadow: 0 5px 30px rgba(148, 70, 252, .4);
}


#searchbox{
    width:16rem;
    font-family: "Jura" , serif;
    margin-left: 10rem;
    height:2.5rem;
    border: 1px solid #303030;
    background-color: #121212;
    transition:all 0.5s ease-in;
    outline:none;
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
}

#searchbox:focus{
  border:1px solid #9546FC;
}
#searchbutton{
  padding-left:0.5rem;
  padding-right:0.5rem;
  transition: all 0.5s ease;
  border-top-right-radius:1rem;
  border-bottom-right-radius:1rem;
  position:absolute;
}
#searchbutton:hover{
  background-color:#454545;
}
#searchbutton:active{
  background-color:#9546FC;
}

.activeButton{
    background-color:#9546fc;
    transition: all 0.5s ease;
    padding-left:1rem;
    padding-right:1rem;
    padding-top:0.3rem;
    padding-bottom:0.3rem;
    border-radius:1rem;
}
.activeButton:hover{
    box-shadow: 0 5px 30px rgba(148, 70, 252, .4);
}
/*Main content*/
.mainContent{
  flex-grow:1;
  transition:all 0.5s ease;
}
.card{
  height:18rem;
  width:32rem;
}
.txtContainer{
  background-image: linear-gradient(330deg, rgba(149,70,252,0) 10%, #000000 95%);
  backdrop-filter:blur(10px);
  bottom:0;
}


/*Settings page*/
.switch {
 font-size: 1rem;
 color:white;
 position: relative;
 display: inline-block;
 width: 3rem;
 height: 1.2rem;
 border:none;
 margin:1rem
}

.switch input {
 display: none;
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #303030;
 transition: .2s;
 border-radius: 1rem;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.1rem;
 width: 1.1rem;
 border-radius: 1rem;
 bottom:1px;
 background-color: gray;
 transition: .4s;
}

.switch input:checked + .slider::before {
 background-color: #9546fc;
}

.switch input:checked + .slider {
 background-color: #2a0d4f;
}

.switch input:focus + .slider {
 box-shadow: 0 0 1px #9546fc;
}

.switch input:checked + .slider:before {
 transform: translateX(1.9em);
}

input[type="checkbox"] {
  appearance: none;
  border: 1px white solid;
  padding: 2px;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  margin: 0 1em;
  transition: 200ms ease;
}

input[type="checkbox"]:checked {
  background-color: #993e8b;
}

/*Dots background*/
#background{
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-template-rows: repeat(auto-fill, 40px);
  gap: 5px;
  z-index:-1;
  height:100vh;
  width:100vw;
  position:absolute;
  left:0;
  top:0;
  background-color:#110A10;
}
.circle{
  border-radius:100%;
  background-color:#270E33;
  width:0.5rem;
  height:0.5rem;
  transition:all 0.6s;
  justify-self: center;
}

.glow{
  background-color: #9546fc;
}

/*Loading screen*/
#loader {
  display:flex;
  justify-content:center;
  align-items:center;
	position: absolute;
	z-index: 100000;
	background-color:#110A10;
	width: 100svw;
	height: 100svh;
	color:white;
	transition: 0.5s all linear;
	overflow: hidden;
}

#loader img{
  padding:1rem;
  z-index:100001;
}

#loader.hidden {
  opacity: 0;
  overflow: visible;
}

/*Feedback*/
.inpt{
    font-family: "Jura",serif;
    border: 1px solid #303030;
    background-color: #121212;
    transition:all 0.5s ease-in-out;
    outline:none;
    border-radius:0.5rem;
    padding-left:1rem;
}

.inpt:focus{
  border:1px solid #9546FC;
}

/*Scrollbar*/

.mainContent::-webkit-scrollbar {
    width: 10px; 
}

.mainContent::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1rem;
}

.mainContent::-webkit-scrollbar-thumb {
    background: #9546FC; 
    border-radius: 1rem;
}

.mainContent::-webkit-scrollbar-thumb:hover {
    background: #2a0d4f;
}

.mainContent::-webkit-scrollbar-button {
    display: none;
}

.mainContent {
    scrollbar-width: thin; 
    scrollbar-color: #9546FC rgba(0,0,0,0.4); 
    scrollbar-border-radius: 1rem;
}

.overlay{
  background-color: rgba(0,0,0,0);
  transition:all 0.5s ease;
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  top:0;
}

.overlay:hover{
  background-color:rgba(0,0,0,0.7);
}

.overlay h1{
  text-align:center;
  opacity:0;
  transition:all 0.6s ease;
}
.overlay:hover h1{
  opacity:1;
}

/*Streaming page*/
#comment-input{
  border:none;
  border-bottom:2px solid #2a0d4f;
  background-color:transparent;
  transition: all 0.5s ease-in-out;
  outline:none;
}
#comment-input:focus{
  border-bottom:2px solid #9546FC;
}
#comment-section{
  max-height: 50vh;
  height:20vh;
}
.reactButton svg,.reactButton p{
  fill: #999999;
  transition: all 0.3s ease;
}
.reactButton:hover svg{
  fill: white;
}
.reactButton.clicked svg{
  fill:#9546FC;
}

#createButton{
  background-color:#2a0d4f;
  border-radius:100%;
  padding:1.5rem;
  transition: all 0.3s ease;
  margin-right:2rem;
}

#createButton svg{
  transition: all 0.3s ease;
}
#createButton:hover{
  background-color:#9546FC;
  border-radius:100%;
  padding:1.25rem;
}
#createButton:hover svg{
  height:1.5rem;
  width:1.5rem;
}

/* Form style elements */

form * {
  font-family: "Varela", serif ;
}

fieldset {
  border: #909090 1px solid;
  color: #909090;
  border-radius: 8px;
  padding: 8px;
  background-color: #9546fc05;
}
fieldset legend {
  margin-left: 2rem;
  padding: 6px;
}
label {
  display: flex;
  justify-content: space-between;
}

textarea {
  max-height: 8rem;
  padding: 12px 0;
}
textarea::placeholder {
  font-size: 0.9em;
}
/*Create Stream page*/
input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #2a0d4f;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

input[type=file]::file-selector-button:hover,input[type=file]::file-selector-button:focus{
  background: #5e29a3
}

#feedback-form{
  width:80vw;
}
#feedback-form p{
  padding-right:1rem;
  padding-left:1rem;

}