body {
  margin:0 ;
  overflow:hidden ;
  user-select:none ;
  background-image:url("images/wallpaper.jpg") ;
  background-size: 100vw 100vh ;
  font-family:system-ui ;
  cursor:url("images/cursor.png"), auto ;
  transition:1s ;
  background-color:black ;
}

.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) ;
}

#lockscreenPhaseOne {
  display:flex ;
  align-items:flex-end ;
  justify-content:flex-end ;
  transition:0.1s ;
}

#lockClockContainer {
  width:500px ;
  height:300px ;
  background-color:rgba(0, 0, 0, .5) ;
  margin-right:10px ;
  margin-bottom:10px ;
  color:white ;
  text-align:center ;
  font-size:2rem ;
  opacity:0 ;
  transition:0.5s ;
  transform:rotateY(90deg) ;
  margin-right:-250px ;
}

#lockscreenPhaseTwo {
  display:none ;
  align-items:center ;
  justify-content:center ;
  transition:0.5s ;
  opacity:0 ;
  color:white ;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
}

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

#thumb {
  width:75px ;
  height:100% ;
  background-color:green ;
  border-radius:5px ;
  font-size:2rem ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
}

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

#topBar {
  width:100% ;
  height:30px ;
  background-color:green ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  transform:rotateX(90deg) ;
  transition:1s ;
  margin-top:-15px ;
}

#topBar p {
  padding: 0 10px ;
}

#taskbar {
  width:100% ;
  height:50px ;
  background-color:green ;
  transform:rotateX(90deg) ;
  margin-top:100vh ;
  transition:1s ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  position:absolute ;
  z-index:99999 ;
}

#startBtn {
  width:100px ;
  height:50px ;
  cursor:url("images/pointer.png"), auto ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  background-size: 100% 100% ;
}

#startMenu {
  width:500px ;
  height:500px ;
  background-color:rgba(0, 0, 0, .5) ;
  position:absolute ;
  margin-top:calc(100vh - 30px) ;
  transition:1s ;
  transform:rotateX(90deg) ;
  opacity:none ;
  z-index:99999 ;
}

#speechBubble {
  max-width:250px ;
  background-color:white ;
  position:absolute ;
  border-radius: 0 5px 5px 5px ;
  border: 1px solid black ;
  margin-left:590px ;
  margin-top:110px ;
  color:black ;
  padding:10px ;
  display:none ;
  z-index:99999 ;
}

#accountImg {
  height:90% ;
  margin-right:10px ;
}

#actionBar {
  width:100% ;
  height:100px ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  overflow-x:auto ;
  overflow-y:none ;
}

#actionBar img {
  margin-left:10px ;
  height:50% ;
  cursor:url("images/pointer.png"), auto ;
}

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

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

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

.yesBtn {
  background-color:green ;
}

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

.noBtn {
  background-color:red ;
}

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

#tletkuHand {
  width:25px ;
  position:absolute ;
  margin-left:200px ;
  margin-top:150px ;
  display:none ;
  z-index:99999 ;
}

.application {
  width:calc(100% - 10px) ;
  height:50px ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  padding-left:10px ;
}

.application:hover {
  background-color:rgba(255, 255, 255, .5) ;
}

.application img {
  height:90% ;
  border-radius:5px ;
  margin-right:10px ;
}

.window {
  width:50% ;
  height:50vh ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  resize:both ;
  overflow:auto ;
  margin-left:100px ;
  margin-top:100px ;
  position:absolute ;
  z-index:1 ;
  display:none ;
  transform:rotateX(90deg) ;
  transition:0.2s ;
  opacity:0% ;
}

.windowBar {
  width:100% ;
  height:50px ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

.draggableArea {
  width:calc(100% - 160px) ;
  height:100% ;
  background-image:linear-gradient(90deg, rgba(128, 255, 200, .5), rgba(128, 255, 128, .5)) ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  padding-left:10px ;
}

.draggableArea h1 {
  -webkit-text-stroke: 1px black ;
}

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

.windowActionButtons button {
  width:50px ;
  height:50px ;
  border:none ;
  font-size:2rem ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
  color:white ;
}

.minimizeBtn {
  background-color:yellow ;
}

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

.windowActionButtons button:hover {
  color:black ;
}

.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:hidden ;
  color:black ;
  transition:0.5s ;
}

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

.task {
  height:90% ;
  background-color:rgba(0, 0, 0, .5) ;
  padding-left:10px ;
  padding-right:25px ;
  margin:10px ;
  align-items:center ;
  justify-content:space-evenly ;
  overflow:hidden ;
  transition:0.2s ;
  cursor:url("images/pointer.png"), auto ;
  border-radius:5px ;
  display:none ;
  opacity:0% ;
}

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

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

#notification {
  padding:25px ;
  background-color:white ;
  border: 1px solid black ;
  border-radius: 5px 5px 0 5px ;
  display:none ;
  position:absolute ;
  color:black ;
  z-index:100000 ;
}

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

.link:hover {
  color:lime ;
}

#calculator {
  width:25% ;
  height:60vh ;
}

#calculatorBar {
  width:calc(100% - 100px) ;
}

#calculator .windowActionButtons {
  width:100px ;
}

.coolInput {
  background-image:linear-gradient(white, lightgrey) ;
  color:black ;
  border:none ;
  outline:none ;
  padding:10px ;
  margin:10px ;
  font-size:1.1rem ;
  border-radius:5px ;
  cursor:url("images/text.png"), auto ;
}

.coolDropdown {
  background-color:white ;
  color:black ;
  border: 1px solid black ;
  margin:10px ;
  padding:10px ;
  border-radius:5px ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

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

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

#clockSidebar p:hover {
  color:cyan ;
}

.clockInnerContent {
  width:calc(100% - 150px) ;
  height:100% ;
  text-align:center ;
  padding:10px ;
  overflow:auto ;
}

#fancyClock {
  width:250px ;
  height:250px ;
  background-image:radial-gradient(white, lightgrey) ;
  border: 10px solid black ;
  margin:auto ;
  border-radius:50% ;
  position: relative;
}

#hourHand, #minuteHand, #secondHand {
  position: absolute;
  width: 50%;
  height: 2px;
  background-color: black;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: transform 0.05s ease-in-out;
}

#minuteHand {
  height: 1.5px;
  background-color: grey;
}

#secondHand {
  height: 1px;
  background: red;
}

#clockTimer {
  display:none ;
}

#newTimerContainer, #newAlarmContainer, #windowBarGradientColorOnePrompt, #windowBarGradientColorTwoPrompt, #paintColorPrompt {
  position:absolute ;
  margin-left:25% ;
  margin-top:10vh ;
  width:50% ;
  height:50vh ;
  background-color:rgba(0, 0, 0, .5) ;
  display:none ;
  z-index:99999 ;
  transition:1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
}

.setTimerTimeSetter {
  width:150px ;
  height:150px ;
  background-color:rgba(255, 255, 255, .5) ;
  color:black ;
}

#newTimerSeconds, #newTimerMinutes, #newTimerHours {
  margin:0 ;
}

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

.addToNewTimer:hover {
  color:lightgreen ;
}

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

.subtractFromNewTimer:hover {
  color:pink ;
}

.timer {
  width:90% ;
  height:90% ;
  margin:5% ;
  background-color:rgba(0, 0, 0, .5) ;
  border-radius:5px ;
  color:white ;
}

.timerProgressBar {
  width:90% ;
  height:30px ;
  background-color:rgba(255, 255, 255, .5) ;
  overflow:hidden ;
  margin:auto ;
}

.progress {
  height:100% ;
  width:50% ;
  background-color:lime ;
  transition:1s ;
}

#clockStopwatch {
  display:none ;
}

#stopwatch {
  font-size:5rem ;
  margin:0 ;
  padding:0 ;
}

#stopwatchOptions, #clockAlarm {
  display:none ;
}

#newAlarmHour, #newAlarmMinute {
  margin:0 ;
}

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

#settingsBar p:hover {
  color:cyan ;
}

.innerSettingsContent {
  width:calc(100% - 250px) ;
  height:100% ;
  display:none ;
  text-align:center ;
  color:black ;
  overflow:auto ;
}

#settingsHome {
  display:block ;
}

#networkContainer {
  width:75% ;
  margin:auto ;
}

.network {
  width:calc(100% - 40px) ;
  margin:10px ;
  padding:10px ;
  background-color:rgba(0, 0, 0, .7) ;
  color:white ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  cursor:url("images/pointer.png"), auto ;
  transition:0.1s ;
}

.network img {
  height:50px ;
}

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

#wifiPasswordPrompt {
  width:300px ;
  height:250px ;
  background-color:white ;
  position:absolute ;
  border: 1px solid black ;
  border-radius: 5px 0 5px 5px ;
  margin-left:calc(40% - 130px) ;
  margin-top:calc(60vh - 125px) ;
  display:none ;
  z-index:99999 ;
  text-align:center ;
  color:black ;
}

#shield {
  position:absolute ;
  margin-left:875px ;
  margin-top:225px ;
  transform:scale(1.5) ;
  display:none ;
  z-index:100001 ;
}

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

.noInternetScreen {
  text-align:center ;
  padding:10px ;
}

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

#usedStorage {
  width:50% ;
  height:100% ;
  background-color:lime ;
}

.storageUser {
  height:100% ;
}

#osUsage {
  background-color:green ;
}

#appUsage {
  background-color:lightblue ;
}

#fileUsage {
  background-color:lightyellow ;
}

#junkUsage {
  background-color:lightgrey ;
}

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

#profileInput {
  width:150px ;
}

.profileOptions {
  width:100% ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
}

.profileOptions img, .profileOptions div {
  cursor:url("images/pointer.png"), auto ;
  width:100px ;
}

#exampleProfile {
  width:150px ;
}

.windowIcon {
  width:calc(100% - 10px) ;
  margin:5px ;
  display:none ;
  margin-left:-5px ;
}

#exampleStartBtn {
  width:250px ;
  height:125px ;
  display:flex ;
  align-items:center ;
  justify-content:space-evenly ;
  background-size: 100% 100% ;
  margin:auto ;
  color:white ;
}

#newFolderPrompt, #deleteFolderPrompt, #renameFolderPrompt, #newDocumentPrompt, #deleteDocumentPrompt, #paintPropertiesPrompt, #paintSizePrompt, #newArtworkPrompt, #deleteArtworkPrompt {
  position:absolute ;
  margin-left:30% ;
  margin-top:30vh ;
  width:40% ;
  height:40vh ;
  background-color:rgba(0, 0, 0, .5) ;
  display:none ;
  z-index:99999 ;
  transition:1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
  text-align:center ;
}

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

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

.desktopIcon img {
  width:75px ;
  user-select:false ;
}

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

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

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

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

#notepadNav p:hover {
  color:cyan ;
}

#innerNotepadContent {
  width:100% ;
  height:calc(100% - 30px) ;
  background-color:transparent ;
  color:green ;
  font-family:consolas ;
  resize:none ;
}

#fileReader, #fileReaderTwo, #fileReaderThree, #fileReaderFour, #fileReaderFive {
  width:75% ;
  height:75vh ;
  background-color:rgba(0, 0, 0, .5) ;
  margin-left:12.5% ;
  margin-top:12.5vh ;
  position:absolute ;
  display:none ;
  z-index:99999 ;
  transition:1s ;
  transform:rotateX(90deg) ;
  opacity:0% ;
  text-align:center ;
  padding:10px ;
}

#saveLocations, #saveLocationsTwo, #saveLocationsThree, #saveLocationsFour, #saveLocationsFive {
  width:90% ;
  height:60% ;
  background-color:rgba(255, 255, 255, .5) ;
  overflow:auto ;
  margin:auto ;
}

.saveLocation {
  width:100% ;
  height:100px ;
  background-color:rgba(0, 0, 0, .5) ;
  border-bottom: 1px solid white ;
  display:flex ;
  align-items:center ;
  justify-content:left ;
  transition:0.1s ;
  cursor:url("images/pointer.png"), auto ;
}

.saveLocation:hover {
  background-color:rgba(255, 255, 255, .5) ;
}

.saveLocation img {
  height:90% ;
  margin:5% ;
}

#selectedSaveLocation {
  background-color:green ;
}

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

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

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

.folderContentIcon img {
  width:75% ;
}

#renderer {
  display:none ;
}

#canvas {
  background-image:url("images/transparent.png") ;
  border: 1px solid black ;
  margin-left:calc(50% - 250px) ;
  margin-top:10px ;
  transition:0.1s ;
  overflow:hidden ;
}

#paintNav {
  color:white ;
}

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

#paintNav p:hover {
  color:cyan ;
}

#paintColorBtn {
  border: 1px solid white ;
  padding:10px ;
}

#paintSizeExample {
  background-color:black ;
  border-radius:50% ;
  margin:auto ;
}

#newPaintTextPrompt {
  width:fit-content ;
  height:75px ;
  background-color:rgba(0, 0, 0, .5) ;
  position:absolute ;
  display:none ;
  align-items:center ;
  justify-content:left ;
  padding-right:10px ;
}

#newPaintTextPromptMover {
  width:50px ;
  height:100% ;
  background-color:rgba(255, 255, 255, .5) ;
  margin-top:2.5px ;
  margin-right:10px ;
}

#newPaintText {
  width:250px ;
}

#paintColorExample {
  width:100px ;
  height:100px ;
  border-radius:50% ;
  border: 1px solid black ;
  margin:auto ;
  z-index:1000000 ;
}