styles.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');


*{
  overflow-y: hidden;
    overflow-x: hidden;
    margin: 0;
}

#allPage{
    -webkit-app-region: drag;
    background-image: url("imgs/lofiWallpapers/Chill/LofiGirl\(Chill12\)Exported.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    border-radius: 0px;
}



/* ** MAIN SCREEN ** */


#logo{
  width: 100px;
  height: 100px;
  margin: 40px;
}


/* LIVESTREAM */

#videoYT{
  position: relative;
  bottom: 0px;
  width: 60%;
  height: 60%;
  border-radius: 25px;
}
#videoContainer{
-webkit-app-region: no-drag;
  /*align-self: stretch;
  align-items: center;*/
  justify-content: center;
  position:absolute;
  display: flex;
  width: 100%;
  height: 100%;
}


/* AUDIO CONTROLLER */

#audioContainer{
-webkit-app-region: no-drag;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  position:absolute;
  display: flex;
  width: 100%;
  height: 5%;
  bottom: 20px;
}
#volumeDown{
  font-size: 1.5em;
  -webkit-app-region: no-drag;
  color: #FFD201;
  border: none;
  align-content: center;
  align-self: center;
  justify-content: center;
  position: absolute;
  display: flex;
  margin-right: 250px;
}
#volumeUp{
  font-size: 1.5em;
  -webkit-app-region: no-drag;
  color: #FFD201;
  border: none;
  align-content: center;
  align-self: center;
  justify-content: center;
  position: absolute;
  display: flex;
  margin-left: 250px;
}

/* Volume Slider */
input[type=range].styled-slider {
height: 10px;
width: 200px;
background-color: transparent;
-webkit-appearance: none;
}
/* Slider progress support */
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 10px + var(--ratio) * (100% - 10px));

--sliderColor: var(--progressColor);
--sliderColor: var(--progressColor);
--thumbColor: var(--thumb);
--background: linear-gradient(var(--sliderColor),var(--sliderColor)) 0/var(--sx) 100% no-repeat, #7a7a7a;
}
input[type=range].styled-slider:focus {
outline: none;
}
input[type=range].styled-slider::-webkit-slider-thumb {
width: 10px;
height: 10px;
border-radius: 10px;
background: var(--thumbColor);
border: none;
box-shadow: none;
margin-top: 1.5px;
-webkit-appearance: none;
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 1em;
border-radius: 10px;
background: #818181;
border:none;
box-shadow: none;
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
border-color: #9a9a9a;
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: var(--background);
}


/* FLOAT ACTION BUTTON */

.personalBtn{
  height: 1000px;
  position: fixed;
  z-index: 1;
}

#btn{
  display: none;
}
.floatBtn{
  -webkit-app-region: no-drag;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50px;

  background-color: #FFD201;
  font-size: 40px;
  text-align: center;
  font-family: 'Poppins', sans-serif;

  position: fixed;
  z-index: 1;
  margin: 40px;
  right: 0;
  bottom: 0;

  cursor: pointer;

  transition: 0.3s;
}

.floatBtn:hover{
  transition: 0.3s;
  color: white;
  transform: scale(1.2);
}
#btn:checked ~.floatCard{
  transition: 0.5s;
  opacity: 1;
  visibility: visible;
  transform: translateY(-20px);
}
#btn:checked ~.floatBtn{
  transition: 0.3s;
  transform: rotate(135deg);
}

.floatCard{
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: #263238;
  margin: 80px;
  border-radius: 20px;
  align-self: center;
  align-content: center;

  bottom: 0;
  right: 0;

  transition: transform 0.5s ease;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
}
.floatCard:hover {
  transform: scale(1.05);
}

.mybackground{
  width: 100%;
  height: 100px;
  border-radius: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.mybackgroundImg{
  width: 100%;
  margin-top: 40px;
}

.mylogo{
  width: 90px;
  height: 90px;
  border-radius: 50px;
  margin-left: 110px;
  margin-top: 50px;
  align-self: center;
  align-content: center;
  position: absolute;
  z-index: 10;

  transition: transform 0.5s ease;
  transform: translateY(0);
}
.mylogoImg{
  width: 100%;
  height: 100%;
  background-color: #353b48;
  border-radius: 20px;
}

.floatCard:hover .mylogo{
  transform: translateY(-20%);
}

.floatCardContent{
  width: 90%;
  height: 70px;
  margin-left: 18px;

  bottom: 0;
  position: relative;

  align-self: center;
  align-content: center;
  justify-content: center;
  display: flex;

  transition: transform 0.5s ease;
  transform: translateY(100%);
}
.floatCard:hover .floatCardContent{
  transform: translateY(30%);
}

.myLeft_Btn{
  font-size: 1.5em;
  color: white;

  margin-top: 25px;

  background: none;
  border: none;
}
.myMiddle_Btn{
  font-size: 1.5em;
  color: white;

  padding-left: 8px;
  padding-right: 8px;
  margin-top: 25px;

  background: none;
  border: none;
}
.myRight_Btn{
  font-size: 1.5em;
  color: white;

  margin-top: 25px;

  background: none;
  border: none;
}

/* Social media icons hover effect */
.fa-github:hover {
  color: #757575;
}
.fa-linkedin:hover {
  color: #2A68B5;
}


/* ** SIDE NAV ** */


/* SIDE NAV BAR */

#sideNavBar{
  -webkit-app-region: no-drag;
  color: #FFD201;
  border: none;
  margin: 40px;
  float: right;
}

/* SIDE NAV */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: #181818;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  -webkit-app-region: no-drag;
  padding: 8px 8px 0px 32px;
  text-decoration: none;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  color: white;
  display: inline;
}
.sidenav a:hover {
  color: #f1f1f1;
  transition: 0.3s;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* WINDOW SIZE BUTTONS */

/* buttons to size the window / to close the side nav and the app */
.basicBtns a i {
  height: 25px;
}

/* Close side nav */
.sidenav .closebtn {
  font-size: 1.5em;
  color: "#dee2e6";
  position: absolute;
  top: 15px;
  left: 0;
  margin-right: 50px;
  transition: 0.3s;
}
.basicBtns .closebtn i:hover {
  color: #818181;
  transition: 0.3s;
}

/* Minimize window */
.sidenav .minimizeBtn {
  font-size: 1.5em;
  -webkit-app-region: no-drag;
  color: "#dee2e6";
  position: absolute;
  top: 10px;
  right: 120px;
  transition: 0.3s;
}
.basicBtns .minimizeBtn i:hover {
  color: #F57F17;
  transition: 0.3s;
}

/* Maximize window */
.sidenav .maximizeBtn {
  font-size: 1.5em;
  -webkit-app-region: no-drag;
  color: "#dee2e6";
  position: absolute;
  top: 10px;
  right: 60px;
  margin-left: 25px;
  transition: 0.3s;
}
.basicBtns .maximizeBtn i:hover {
  color: #F57F17;
  transition: 0.3s;
}

/* Close App */
.sidenav .exitBtn {
  font-size: 1.5em;
  -webkit-app-region: no-drag;
  color: "#dee2e6";
  position: absolute;
  top: 10px;
  right: 0;
  margin-left: 50px;
  transition: 0.3s;
}
.basicBtns .exitBtn i:hover {
  color: #DE6658;
  transition: 0.3s;
}


/* TITLE BUTTONS (DISCOVER/REFERENCES/SETTINGS) */

/* buttons to direct the user for what he can do (Discover/References/Settings) */
div .titleBtn{
  -webkit-app-region: no-drag;
  margin-bottom: 5px;
  text-align: center;
}
div .titleBtn button{
    display: inline;
    color: #dee2e6;
    background: transparent;
    border: 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    padding: 14px;
    transition: 0.3s;
}
div .titleBtn button:hover {
  filter: invert(53%) sepia(36%) saturate(5429%) hue-rotate(3deg) brightness(89%) contrast(97%); /*(#da6804)*/
  text-decoration: 5px underline;
  transition: 0.3s;
}
.selected{
  text-decoration: 5px underline;
}


/* DISCOVER */

/* Categories of each type of lo-fi livestream */
div .scrollCategories{
  -webkit-app-region: no-drag;
    margin-left: 30px;
    margin-right: 30px;
    height: 60px;
    overflow-x: auto;
    white-space: nowrap;
}
.scrollCategories button{
    display: inline;
    padding: 8px 8px 0px 32px;
    color: #616161;
    background-color: transparent;
    border: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    text-align: center;
    padding: 14px;
    transition: 0.3s;
}
.filterBtn:hover{
  color: #F57F17;
  text-decoration: 4px underline;
  transition: 0.3s;
}
.active{
  text-decoration: 4px underline;
}

/* Custom scrollbar of categories part */
.scrollCategories::-webkit-scrollbar {
  height: 5px;
}
.scrollCategories::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.scrollCategories::-webkit-scrollbar-thumb {
  background: rgb(136, 136, 136);
  border-radius: 10px;
}
.scrollCategories::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 100, 100);
  border-radius: 10px;
}
.scrollCategories::-webkit-scrollbar-thumb:active {
  background: rgb(68, 68, 68);
  border-radius: 10px;
}

/* Live stream images*/
.lofiMusics{
  overflow-y:auto;
  flex-wrap: wrap;
  width: 100%;
  max-height: 65%;
  padding-top: 20px;
  padding-left: 28px;
}
.lofiMusics img{
  display: inline-table;
  width: 200px;
  height: 110px;
  border-radius: 20px;
  transition: 0.3s ease;
}
.lofiMusics div{
  display: inline-table;
  width: 200px;
  height: 110px;
  margin: 10px;
  border-radius: 20px;
}
.lofiMusics img:hover{
  transform: scale(1.2);
  filter: brightness(0.5);
  transition: 0.3s ease;
}


/* REFERENCES */

#referenceMenu{
  width: 100%;
  height: 100%;
}

.references{
  overflow-y:auto;
  width: 100%;
  max-height: 65%;
  white-space: nowrap;
}

/* Custom scrollbar of categories part */
.references::-webkit-scrollbar {
  width: 5px;
}
.references::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.references::-webkit-scrollbar-thumb {
  background: rgb(136, 136, 136);
  border-radius: 10px;
}
.references::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 100, 100);
  border-radius: 10px;
}
.references::-webkit-scrollbar-thumb:active {
  background: rgb(68, 68, 68);
  border-radius: 10px;
}

/* LOFI CARDS CUSTOMIZATION */
.lofiCard{
  position: relative;
  display: block;
  width: 90%;
  height: 150px;
  background-color: #263238;
  margin: 8px;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 25px;
  border-radius: 20px;
  align-self: center;
  align-content: center;

  transition: transform 0.5s ease;
  overflow: hidden;
}
.lofiCard:hover {
  transform: scale(1.05);
}

.backgroundLofi{
  width: 100%;
  height: 80px;
  border-radius: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.backgroundLofiImg{
  width: 100%;
}

.logoLofi{
  width: 90px;
  height: 90px;
  border-radius: 50px;
  margin-left: 180px;
  margin-top: 30px;
  align-self: center;
  align-content: center;
  position: absolute;
  z-index: 10;

  transition: transform 0.5s ease;
  transform: translateY(0);
}
.logoLofiImg{
  width: 100%;
  height: 100%;
  background-color: #353b48;
  border-radius: 20px;
}

.lofiCard:hover .logoLofi{
  transform: translateY(-20%);
}

.lofiCardContent{
  width: 90%;
  height: 70px;
  margin-left: 10px;

  bottom: 0;
  position: relative;

  align-self: center;
  align-content: center;
  justify-content: center;
  display: flex;

  transition: transform 0.5s ease;
  transform: translateY(100%);
}
.lofiCard:hover .lofiCardContent{
  transform: translateY(0);
}

.lofiLeft_Btn{
  font-size: 1.5em;
  color: "#00D856";
  margin-top: 25px;
}
.lofiMiddle_Btn{
  font-size: 1.5em;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 25px;
}
.lofiRight_Btn{
  font-size: 1.5em;
  margin-top: 25px;
}

/* Social media icons hover effect */
.fa-youtube:hover {
  color: #DE6658;
}
.fa-desktop:hover {
  color: #305FAF;
}
.fa-store:hover {
  color: #305FAF;
}
.fa-music:hover {
  color: #0188C1;
}
.fa-spotify:hover {
  color: #00D856;
}
.fa-instagram:hover {
  color: #DA2B7F;
}
.fa-discord:hover {
  color: #5865F2;
}


/* SETTINGS */


/* LANGUAGE */

.languageSettings{
  align-self: stretch;
  align-items: center;
  justify-content: center;
  position:absolute;
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: 50px;
}
.langTitle{
  color: #dee2e6;
  font-family: 'Poppins', sans-serif;
}

.languageSelect {
  -webkit-app-region: no-drag;
  border: 0;
  outline: 0;
  width: 200px;
  height: 35px;
  margin-left: 20px;
  padding-left: 10px;
  background-color: #2c3e50;
  color: white;
  border-radius: 0.25em;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

/* THEME (DARK/LIGHT) */

.darkLightSettings{
  align-self: stretch;
  align-items: center;
  justify-content: center;
  position:absolute;
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: 100px;
}
.darkLightTitle{
  color: #dee2e6;
  font-family: 'Poppins', sans-serif;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 20px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #818181;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2c3e50;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2c3e50;
}
input:checked + .slider:before {
  background-color: #ecf0f1;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}