:root {
  --theme: var(--theme);
  --hoverTheme: var(--hoverTheme);
  --darkTheme: var(--darkTheme);
}

* {
  margin:0 ;
}

body {
  overflow:hidden ;
  font-family:sans-serif ;
  background-image:url("images/wallpaper.png") ;
  background-size: 100vw 100vh ;
  cursor:url("images/cursor.png"), auto ;
  color:white ;
  user-select:none ;
  transition:0.5s ;
}

.screen {
  width:100vw ;
  height:100vh ;
  overflow:hidden ;
}

#startupScreen {
  background-color:black ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  cursor:none ;
  transition:5s ;
}

#lockscreen {
  backdrop-filter:blur(10px) ;
}

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

#lockClockContainer {
  width:500px ;
  height:300px ;
  background-color:rgba(0, 0, 0, .5) ;
  margin-left:100vw ;
  margin-top:calc(100vh - 310px) ;
  transition: 0.5s ease-in-out ;
  transform:rotateY(90deg) ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  opacity:0% ;
  position:absolute ;
}

#lockClock {
  font-size:5rem ;
}

#lockscreenStageTwo {
  width:100% ;
  height:100% ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  opacity:0% ;
  transition:1s ;
  transform:scale(1.5) ;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  display:none ;
}

#lockPowerOff {
  position:absolute ;
  margin-left:10px ;
  margin-top:calc(100vh - 60px) ;
  width:50px ;
  cursor:url("images/pointer.png"), auto ;
}

#lockPowerOffOptions {
  position:absolute ;
  width:100px ;
  height:50px ;
  background-color:rgba(0, 0, 0, .5) ;
  margin-left:0 ;
  margin-top:calc(100vh - 60px) ;
  display:none ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  opacity:0% ;
  align-items:center ;
  justify-content:space-evenly ;
  font-size:2rem ;
}

.coolLink {
  color:white ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

.coolLink:hover {
  color:var(--theme) ;
}

#sliderBar {
  width:250px ;
  height:50px ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:10px ;
  overflow:hidden ;
}

#thumb {
  width:33% ;
  height:100% ;
  background-color:var(--theme) ;
  border-radius:10px ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

#desktop {
  filter:blur(10px) ;
  backdrop-filter:blur(10px) ;
  transition:5s ;
}

nav {
  width:100% ;
  height:60px ;
  background-color:var(--darkTheme) ;
  margin-top:100vh ;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, .5) ;
  transition:1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  z-index:100006 ;
  position:absolute ;
}

#startBtn {
  width:55px ;
  margin:5px ;
  cursor:url("images/pointer.png"), auto ;
}

#tasks {
  width:75% ;
  height:100% ;
  overflow:auto ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  overflow-x:auto ;
  overflow-y:hidden ;
}

#info {
  width:calc(25% - 50px) ;
  height:100% ;
  background-color:var(--theme) ;
}

.task {
  min-width:fit-content ;
  max-width:250px ;
  overflow:hidden ;
  padding: 3px 25px ;
  margin:3px ;
  display:none ;
  align-items:center ;
  justify-content:space-evenly ;
  background-color:var(--theme) ;
  border-radius:100px ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
  transform:rotateY(90deg) ;
  opacity:0% ;
}

.task img {
  height:35px ;
  margin-right:10px ;
  border-radius:5px ;
}

.task:hover {
  background-color:var(--hoverTheme) ;
  color:black ;
}

#volumeContainer {
  position:absolute ;
  width:200px ;
  height:50px ;
  margin-left:calc(50vw - 75px) ;
  margin-top:100vh ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:10px ;
  transition:0.5s ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  color:white ;
  font-size:1.5rem ;
  z-index:100005 ;
}

#volumeBar {
  width:125px ;
  height:10px ;
  background-color:rgba(255, 255, 255, .5) ;
  border-radius:100px ;
  overflow:hidden ;
}

#volume {
  width:50% ;
  height:100% ;
  background-color:var(--theme) ;
  transition:0.1s ;
}

#selection {
  position:absolute ;
  z-index:1 ;
  margin: 100px;
  width:100px ;
  height:100px ;
  background-color:rgba(0, 128, 0, .5) ;
  border: 1px solid var(--darkTheme) ;
  display:none ;
  opacity:50% ;
}

#startMenu {
  position:absolute ;
  display:none ;
  margin-top:100vh ;
  width:100vw ;
  height:calc(100vh - 60px) ;
  background-image:radial-gradient(#004400, #002200) ;
  transition:1s ;
  background-size: 100% 100% ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  z-index:99999 ;
}

#startSideBar {
  width:250px ;
  height:100% ;
  background-color:rgba(0, 0, 0, .5) ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  flex-direction:column ;
}

#userData {
  width:100% ;
  height:50% ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
}

#profile {
  width:80% ;
}

#charms {
  width:100% ;
  height:70px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

#charms img {
  width:50px ;
  cursor:url("images/pointer.png"), auto ;
}

#powerOffOptions {
  position:absolute ;
  width:150px ;
  height:50px ;
  background-color:rgba(0, 0, 0, .5) ;
  margin-left:0 ;
  margin-top:calc(100vh - 60px) ;
  display:none ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  opacity:0% ;
  align-items:center ;
  justify-content:space-evenly ;
  font-size:2rem ;
  z-index:100000 ;
}

#searchBar {
  width:250px ;
  height:50px ;
  padding:5px ;
  margin:0 ;
  margin-top:calc(100vh - 60px) ;
  margin-left:50px ;
  border:none ;
  border-radius:none ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  font-size:1.5rem ;
  position:absolute ;
  z-index:100000 ;
  display:none ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  opacity:0% ;
}

input {
  cursor:url("images/text.png"), auto ;
}

#applications {
  width:calc(100% - 500px) ;
  height:100% ;
  display:grid ;
  grid-template-columns: auto auto auto ;
  overflow:auto ;
}

.application {
  width:90% ;
  height:90% ;
  margin:5% ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  border-radius:5px ;
  -webkit-text-stroke: 1px black ;
}

.application img {
  width:60% ;
  border-radius:10px ;
}

.window {
  width:50vw ;
  height:50vh ;
  margin-left:10vw ;
  margin-top:10vh ;
  transition:0.2s ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  position:absolute ;
  resize:both ;
  overflow:auto ;
  min-width:300px ;
  min-height:250px ;
  display:none ;
  transform:rotateX(90deg) ;
  opacity:0% ;
  z-index:5 ;
  border-radius:5px ;
  align-items:center ;
  justify-content:center ;
  flex-direction:column ;
}

.window:hover {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .5) ;
}

.windowBar {
  width:100% ;
  height:50px ;
  background-image:linear-gradient(90deg, rgba(0, 128, 0, .8), rgba(0, 75, 0, .8)) ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

.windowActionButtons {
  width:180px ;
  height:100% ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

.windowActionButtons button {
  width:40px ;
  height:40px ;
  margin:0 ;
  padding:5px ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  font-size:2rem ;
  border-radius:5px ;
  border:none ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  color:white ;
}

.windowActionButtons button.infoBtn {
  background-color:cornflowerblue ;
  width:30px ;
  height:30px ;
  font-size:1rem ;
}

.windowActionButtons button.infoBtn:hover {
  background-color:lightblue ;
}

.minimizeBtn {
  background-color:gold ;
}

.minimizeBtn:hover {
  background-color:yellow ;
}

.maximizeBtn {
  background-color:green ;
}

.maximizeBtn:hover {
  background-color:lightgreen ;
}

.closeBtn {
  background-color:red ;
}

.closeBtn:hover {
  background-color:pink ;
}

.windowContent {
  width:100% ;
  height:calc(100% - 50px) ;
  background-color:white ;
  overflow:auto ;
  color:black ;
  transition:0.5s ;
}

.draggableArea {
  width:calc(100% - 180px) ;
  height:100% ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
}

.draggableArea h2 {
  color:white ;
  -webkit-text-stroke: 1px black ;
  margin-left:25px ;
}

#whatsNew {
  width:250px ;
  height:100% ;
  background-color:rgba(0, 0, 0, .5) ;
  overflow:auto ;
  padding:10px ;
  text-align:center ;
}

#todaysGraphic, #weather {
  width:90% ;
}

#todaysGraphic {
  transform:rotateY(180deg) ;
}

.coolBtn {
  background-color:white ;
  color:black ;
  border: 1px solid black ;
  border-radius:0 ;
  padding: 10px 50px ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  margin:10px ;
  font-size:1.1rem ;
}

.coolBtn:hover {
  background-color:black ;
  color:white ;
  border: 1px solid white ;
}

.popup {
  width:400px ;
  padding:10px ;
  margin-left:calc(50vw - 200px) ;
  margin-top:100px ;
  background-color:rgba(0, 0, 0, .8) ;
  border: 1px solid white ;
  position:absolute ;
  text-align:center ;
  z-index:100001 ;
  display:none ;
  transition:0.1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
}

.negBtn {
  background-color:black ;
  color:white ;
  border: 1px solid white ;
}

.negBtn:hover {
  background-color:white ;
  color:black ;
  border: 1px solid black ;
}

.coolInput {
  border: 1px solid black ;
  padding:10px ;
  margin:10px ;
  font-size:1.1rem ;
  background-image:linear-gradient(white, lightgrey) ;
}

#weather {
  text-align:center ;
  display:none ;
}

#locationOk, #weatherDesc {
  text-transform:capitalize ;
}

#weatherGraphic {
  width:90% ;
}

fieldset {
  margin:10px ;
  padding:10px ;
  font-size:0.8rem ;
  border-radius:5px ;
}

fieldset legend {
  font-size:1.3rem ;
}

#helpBar {
  width:750px ;
  height:100% ;
  position:absolute ;
  z-index:99999 ;
  background-color:var(--darkTheme) ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  margin-left:-750px ;
  transition:0.5s ;
  text-align:center ;
  overflow:auto ;
}

#closeHelp {
  margin:10px ;
  margin-left:calc(100% - 60px) ;
  width:50px ;
  height:50px ;
  padding:0 ;
  border:none ;
  background-color:red ;
  color:white ;
  font-size:2rem ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
}

#closeHelp:hover {
  background-color:white ;
  color:red ;
}

#helpDesc {
  text-align:center ;
}

#helpDesc img {
  width:90% ;
}

#speechBubble {
  background-color:white ;
  border: 1px solid black ;
  padding:25px ;
  margin-left:70px ;
  width:250px ;
  height:150px ;
  text-align:center ;
  overflow:auto ;
  color:black ;
  position:absolute ;
  border-radius: 100px 100px 100px 0 ;
  margin-top:calc(100vh - 220px) ;
  z-index:100007 ;
  display:none ;
  transition:1s ;
}

.desktopIcon {
  margin:10px ;
  width:120px ;
  height:150px ;
  position:absolute ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  border-radius:10px ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  flex-direction:column ;
}

.desktopIcon:hover {
  background-color:rgba(0, 0, 0, .5) ;
}

.desktopIcon img {
  width:75% ;
}

.desktopIcon p {
  text-align:center ;
}

#newFolderNameContainer {
  width:300px ;
  height:50px ;
  position:absolute ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  margin-left:90px ;
  margin-top:calc(100vh - 60px) ;
  z-index:100000 ;
  display:none ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  opacity:0% ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  background-color:white ;
  overflow:hidden ;
}

#newFolderNameContainer input {
  height:100% ;
  width:235px ;
  padding:0 ;
  margin:0 ;
  border:none ;
  font-size:1.5rem ;
  cursor:url("images/text.png"), auto ;
  padding-left:10px ;
}

#newFolderNameContainer button {
  background-color:var(--theme) ;
  color:white ;
  width:50px ;
  height:100% ;
  font-size:1.5rem ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  border:none ;
  margin:0 ;
  margin-left:-25px ;
}

#newFolderNameContainer button:hover {
  background-color:white ;
  color:var(--theme) ;
}

#folderBarVek {
  width:100% ;
  height:50px ;
  background-color:rgba(0, 0, 0, .5) ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

#folderBarVek img {
  height:90% ;
  cursor:url("images/pointer.png"), auto ;
}

#folderContentVek {
  width:100% ;
  height:calc(100% - 50px) ;
  overflow:auto ;
  display:grid ;
  grid-template-columns: auto auto auto auto auto ;
}

.subDir {
  width:100% ;
  height:100% ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  cursor:url("images/pointer.png"), auto ;
  text-align:center ;
}

.subDir:hover {
  background-color:rgba(0, 0, 0, .5) ;
  color:white ;
}

.subDir img {
  width:75% ;
}

.visible {
  display:block ;
  transform:none ;
  opacity:100% ;
}

.visible2 {
  display:flex ;
  transform:none ;
  opacity:100% ;
}

#setup {
  transform:scale(1.5) ;
  margin-left:calc(25vw - 25px) ;
  margin-top:25vh ;
  transition:5s ;
}

.setupStage {
  width:calc(100% - 100px) ;
  height:calc(100% - 20px) ;
  padding: 10px 50px ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  display:none ;
}

#setupHotspots {
  width:100% ;
  height:100px ;
  background-color:lightgrey ;
  overflow:auto ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
}

.setupHotspot {
  width:100px ;
  height:100px ;
  min-width:100px ;
  max-width:100px ;
  background-color:rgba(0, 0, 0, .5) ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
  color:white ;
}

.setupHotspot:hover {
  background-color:black ;
}

.setupHotspot img {
  width:50% ;
}

.setupHotspot p {
  text-align:center ;
}

#clipboard {
  width:120px ;
  height:150px ;
  position:absolute ;
  margin-left:calc(100vw - 157px) ;
  margin-top:100vh ;
  transition:0.5s ;
  background-color:rgba(0, 0, 0, .5) ;
  border: 1px solid white ;
  border-radius:5px ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  z-index:100005 ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
}

#clipboard img {
  width:75% ;
}

#clipboard p {
  text-align:center ;
}

#wifiIncorrectPassword {
  display:none ;
  color:red ;
}

.noInternetScreen {
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
}

.noInternetScreen img {
  width:100px ;
  background-color:#222222 ;
  padding:10px ;
  margin:10px ;
  border-radius:25px ;
}

#passwordBar {
  width:350px ;
  height:50px ;
  border-radius:5px ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  align-items:center ;
  justify-content:center ;
  display:none ;
  font-size:1.5rem ;
}

#password {
  width:calc(100% - 60px) ;
  height:100% ;
  padding:0 ;
  padding-left:10px ;
  margin:0 ;
  border:none ;
}

#submitBtn {
  width:50px ;
  height:100% ;
  background-color:var(--theme) ;
  padding:0 ;
  margin:0 ;
  font-size:1.5rem ;
  color:white ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  border:none ;
}

#submitBtn:hover {
  background-color:white ;
  color:var(--theme) ;
}

#lockBlock {
  color:red ;
}

#ssOne {
  display:block ;
  transform:none ;
}

#ssSeven, #ssEight {
  text-align:center ;
}

#calculator {
  width:25vw ;
  height:80vh ;
}

#math {
  width:calc(100% - 10px) ;
  height:100px ;
  background-color:lightgrey ;
  font-size:2rem ;
  overflow:auto ;
  font-family:monospace ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  padding-left:10px ;
}

#keypad {
  width:100% ;
  height:calc(100% - 150px) ;
  display:grid ;
  grid-template-columns: auto auto auto ;
}

#keypad button {
  background-color:white ;
  border-radius:0 ;
  border: 5px outset lightgrey ;
  cursor:url("images/pointer.png"), auto ;
  color:#222222 ;
  font-size:1.5rem ;
  padding:0 ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

#keypad button:active {
  background-color:lightgrey ;
  border: 5px inset darkgrey ;
  color:black ;
}

#keypad button#ccbtn {
  background-color:red ;
  color:white ;
  border: 5px outset maroon ;
}

#keypad button#ccbtn:active {
  background-color:maroon ;
  color:lightgrey ;
  border: 5px inset #220000 ;
}

#keypad button#cebtn {
  background-color:green ;
  color:white ;
  border: 5px outset darkgreen ;
}

#keypad button#cebtn:active {
  background-color:darkgreen ;
  color:lightgrey ;
  border: 5px inset #002200 ;
}

#history {
  position:absolute ;
  width:0 ;
  height:90% ;
  background-color:var(--theme) ;
  transition:0.5s ;
  z-index:99999 ;
  text-align:center ;
  color:white ;
  overflow:auto ;
}

#historyVek {
  width:100% ;
  text-align:center ;
}

#historyVek p, #history h3 {
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  margin:10px ;
}

#historyVek p:hover, #history h3:hover {
  color:yellow ;
}

.metroSidebar {
  width:250px ;
  height:100% ;
  background-color:var(--theme) ;
  overflow:auto ;
  text-align:center ;
  color:white ;
}

.metroSidebar p {
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  margin:10px ;
}

.metroSidebar p:hover {
  color:yellow ;
}

.metroContent {
  width:calc(100% - 250px) ;
  height:100% ;
  overflow:auto ;
  text-align:center ;
}

.metroUI {
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

.clock {
  width: 250px;
  height: 250px;
  border: 10px solid var(--theme);
  border-radius: 50%;
  position: relative;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  background-color: lightvar(--theme);
  margin:auto ;
  color:var(--darkTheme) ;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}

.hand {
  width: 50%;
  background-color: var(--theme);
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  border-radius:25px ;
}

.hour-hand {
  height: 6px;
  background-color:maroon ;
}

.minute-hand {
  height: 4px;
  background-color:gold ;
}

.second-hand {
  height: 2px;
  background-color: navy;
}   

.clockNum {
  position:absolute ;
}

#clockWidget {
  position:absolute ;
  margin-left:calc(50vw - 160px) ;
  margin-top:calc(50vh - 135px) ;
  transform:scale(0.7) ;
  display:none ;
  cursor:url("images/pointer.png"), auto ;
  background-color:white ;
}

.clockPopup {
  position:absolute ;
  width:50% ;
  height:270px ;
  margin-left:25% ;
  margin-top:25vh ;
  background-color:rgba(0, 0, 0, .8) ;
  border: 1px solid white ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  text-align:center ;
  display:none ;
  transition:0.1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
  z-index:99999 ;
}

.clockCustomizationContainer {
  width:100% ;
  height:120px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

.clockCustomizationBox {
  width:100px ;
  height:100px ;
  background-color:rgba(255, 255, 255, .5) ;
  border-radius:5px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
}

.addBtn {
  color:var(--theme) ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

.addBtn:hover {
  color:lightvar(--theme) ;
}

.subBtn {
  color:red ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

.subBtn:hover {
  color:pink ;
}

#timerContainer, #alarmContainer {
  width:100% ;
  height:fit-content ;
  display:grid ;
  grid-template-columns: auto auto auto ;
}

.timer, .alarm {
  width:calc(100% - 40px) ;
  height:calc(100% - 40px) ;
  padding:10px ;
  margin:10px ;
  text-align:center ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:5px ;
  color:white ;
}

.timerProgressContainer {
  width:90% ;
  height:30px ;
  border-radius:100px ;
  margin:10px ;
  background-color:rgba(255, 255, 255, .5) ;
  overflow:hidden ;
}

.timerProgress {
  width:50% ;
  height:100% ;
  background-color:var(--theme) ;
  transition:0.1s ;
}

#stopwatch {
  font-size:5rem ;
}

#lapContainer {
  width:100% ;
  padding:10px ;
  text-align:center ;
}

.lap {
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

.lap:hover {
  color:var(--theme) ;
}

#startStopwatchBtn {
  font-size:1.3rem ;
}

#settingsSectionContainer {
  width:100% ;
  display:grid ;
  grid-template-columns: auto auto auto ;
}

.settingsSection {
  width:calc(100% - 20px) ;
  height:calc(100% - 20px) ;
  margin:10px ;
  background-color:var(--theme) ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
  color:white ;
  border-radius:5px ;
}

.settingsSection:hover {
  background-color:var(--hoverTheme) ;
  color:black ;
}

.settingsSection img {
  width:50% ;
  padding:10px ;
}

#wifiList {
  width:100% ;
}

.hotspot {
  width:calc(100% - 40px) ;
  height:100px ;
  background-color:rgba(0, 0, 0, .5) ;
  margin:10px ;
  padding:10px ;
  border-radius:5px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  transition:0.1s ;
  color:white ;
}

.hotspot img {
  height:90% ;
}

#weatherNoInternetScreen {
  width:100% ;
  height:350px ;
  display:none ;
  align-items:center ;
  justify-content:space-evenly ;
  flex-direction:column ;
}

#weatherNoInternetScreen img {
  width:75% ;
}

#storageBar, #detailedStorageBar {
  width:90% ;
  height:50px ;
  margin:auto ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:100px ;
  overflow:hidden ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
}

#storage {
  height:100% ;
  background-color:var(--theme) ;
  transition:0.1s ;
}

.storageUser {
  height:100% ;
}

#baseOSUsage {
  background-color:green ;
}

#appUsage {
  background-color:teal ;
}

#fileUsage {
  background-color:lightyellow ;
}

#junkUsage {
  background-color:lightgrey ;
}

#bsod {
  background-color:black ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  cursor:none ;
}

#wallpaperPreview {
  width:33% ;
  border-radius:5px ;
  transition:0.5s ;
}

#wallpaperContainer {
  width:50% ;
  height:250px ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:5px ;
  margin:auto ;
  overflow:auto ;
  display:grid ;
  grid-template-columns: auto auto auto ;
}

#wallpaperContainer img {
  width:150px ;
  margin:10px ;
  border-radius:5px ;
  cursor:url("images/pointer.png"), auto ;
}

.colorOption {
  width:75px ;
  height:75px ;
  margin:10px ;
  cursor:url("images/pointer.png"), auto ;
  border-radius:50% ;
  border: 1px solid black ;
}

.windowIcon {
  width:90% ;
  margin:5% ;
}

#folderGraphicPreview {
  width:250px ;
}