@import url('../fonts/fonts.css');
*{
    font-family: 'Arimo','Rubik','Nunito Sans', ui-sans-serif, sans-serif;
    color: white; 
    text-decoration: none;
    font-weight: 200;
}
body{
background-color: black;
}
.bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
  background: linear-gradient(270deg, #004bad, #31017c, #cb6be6);
  background-size: 400% 400%;
  -webkit-animation: movebg 42s ease infinite;
  -moz-animation: movebg 42s ease infinite;
  -o-animation: movebg 42s ease infinite;
  animation: movebg 42s ease infinite;
}

@-webkit-keyframes movebg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes movebg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes movebg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes movebg {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
  ::-webkit-scrollbar {
    width: 20px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
  }
  html{
    scroll-behavior: smooth;
}
.home{
  position: absolute;
  cursor: pointer;
  top: 3%;
}
.home.expanded{
  transition: all 150ms;
  left: 5%;
}
.homepage{
    transition: all 150ms;
    display: inline;
}
.homepage.hide{
    display: none;
}
.devicespage{
    display: none;
    transition: all 150ms;
}
.devicespage.show{
    display: inline;
}
.navbar{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -2%;
  top: 4%;
  background-color: #1f1d1d;
  border-radius: 15px;
  width: 5%;
  height: 77%;
  transition: 150ms all;
}
.navbar.opened{
  width: 25%;
  z-index: 88;
}
.brand-logo{
  border-radius: 100px;
}
.downloads{
  position: absolute; 
  margin-top: 10px;
  top: 15%;
  font-size: xx-large;
  cursor: pointer;
}
.downloads.expanded{
  transition: all 150ms;
  left: 5.5%;
}
  .devices{
  position: absolute;
  margin-top: 10px;
  top: 25%;
  font-size: xx-large;
  cursor: pointer;
}
.devices.expanded{
  transition: all 150ms;
  left: 5.5%;
}
.music{
  position: absolute;
  top: 35%;
  margin-top: 10px;
  font-size: xx-large;
  cursor: pointer; 
}
.music.expanded{
  transition: all 150ms;
  left: 5.5%;
}
.toggler{
  position: absolute;
  top: 89%;
  color: white;
  font-size: xx-large;
  transition: all 500ms;
}
.toggler.expanded{
  transition: all 150ms;
  left: 5.5%;
  transform: rotate(90deg);
}
.download{
  display: none;
}
.download.show{
  display: inline;
}
.musicpg{
  display: none;
}
.musicpg.show{
  display: inline;
}
.mobbar{
  display: none;
}
.home-desc{
  position: absolute;
  top: 5%;
  left: 23%;
  font-size: larger;
  display: none;
}
.downloads-desc{
  position: absolute;
  top: 17%;
  left: 23%;
  font-size: larger;
  display: none;
}
.devices-desc{
  position: absolute;
  top: 27%;
  left: 23%;
  font-size: larger;
  display: none;
}
.music-desc{
  position: absolute;
  top: 37%;
  left: 23%;
  font-size: larger;
  display: none;
}
.home-desc.show{
  display: inline
}
.downloads-desc.show{
  display: inline;
}
.devices-desc.show{
  display: inline;
}
.music-desc.show{
  display: inline;
}
.cpalertmsgbox{
  position: fixed;
  height: 100px;
  width: 400px;
  background-color: #2b2929;
  border-radius: 3px;
  border: azure 3px solid;
  top: 80%;
  left: 38%;
  z-index: 10;
  display: none;
}
.cpalert-icn{
  position: absolute;
  font-size: xx-large;
  top: 30%;
  left: 5%;
  color: rgb(2, 196, 2);
}
.cpalert-text{
  position: absolute;
  top: 10%;
  left: 20%;
}
.cpalert-hide{
  position: absolute;
  background-color: azure;
  font-size: larger;
  border-radius: 3px;
  color: #2b2929;
  top: 65%;
  left: 80%;
  width: 15%;
  text-align: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}
.cpalertmsgbox.show{
  display: inline;
}