/*Background*/
html {
  /*animation: hueShift 1s linear infinite;*/
}
body {
  background-image: url(../images/background.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
}
.title-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 80px;
  cursor: help;
  user-select: none;
}
.title-image:active {
  animation: shakeIcon 0.1s linear 0s;
}

/*Desktop Icon Grid*/
.desktop-row {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px 80px;
  column-gap: 3px;
  padding: 2px;
  user-select: none;
}

/*Desktop Icon*/
.desktop-icon {
  position: absolute;
  width: 80px;
  text-decoration: none;
  border: 1px dotted transparent;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 12px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 3px black;
  
  padding: 5px 0px;
  cursor: pointer;
  user-select: none;
}
.desktop-icon img {
  pointer-events: none;
}
.desktop-icon:hover {
  animation: jiggleIcon 0.2s linear 0s;
}
.desktop-icon:active {
  text-decoration: none;
  border: 1px dotted black;
  animation: squishIcon 0.1s linear 0s;
}



/*Shared Window Attributes*/
.close-button {
  position: absolute;
  top: 0px;
  right: 0px;
  color: white;
  background-color: red;
  border: 1px solid white;
  border-radius: 4px;
  padding: 1px 6px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.close-button:active {
  background-color: lightcoral;
}

/*Notepad*/
.window-notepad {
  position: absolute;
  top: 10%;
  right: 2%;
  width: 400px;
  height: 75%;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background-color: #245DDA;
  border: 4px solid #245DDA;
  border-radius: 8px;
  user-select: none;
  box-shadow: 2px 2px 5px;
}
.window-notepad-title {
  color: white;
  text-shadow: 1px 1px 3px black;
}
.window-body {
  overflow: scroll;
  position: absolute;
  top: 26px;
  width: 100%;
  height: calc(100% - 26px);
  background-color: #f2f2f2;
  border-radius: 2px;
}
.window-body p {
  user-select: text;
}

/*File Explorer*/
.window-explorer {
    position: absolute;
    top: 15%;
    right: 25%;
    width: 50%;
    height: 75%;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #245DDA;
    border: 4px solid #245DDA;
    border-radius: 8px;
    user-select: none;
    box-shadow: 2px 2px 5px;
}
.window-explorer-title {
  color: white;
  text-shadow: 1px 1px 3px black;
}
.window-grid {
    overflow: scroll;
    position: absolute;
    top: 26px;
    width: 100%;
    height: calc(100% - 26px);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #f2f2f2;
    border-radius: 2px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: max-content
}
.grid-item {
    border: 1px dotted black;
    aspect-ratio: 1;
    margin: 8px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: black;
    user-select: none;
    cursor: pointer;
}
.grid-item:hover {
    animation: jiggleIcon 0.2s linear 0s;
}
.grid-item:active {
    background-color: #245DDA;
    color: white;
    animation: squishIcon 0.1s linear 0s;
}

.grid-item img {
    position: relative;
    top: 10px;
    width: 75%;
    height: 75%;
}

/*Animations*/
@keyframes jiggleIcon {
  from {
    rotate: 0deg;
  }
  20% {
    rotate: 5deg;
  }
  40% {
    rotate: -3deg;
  }
  90% {
    rotate: 1deg;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes shakeIcon {
  from {
    translate: 15px;
  }
  20% {
    translate: 10px;
  }
  40% {
    translate: -5px;
  }
  90% {
    translate: 2px;
  }
  100% {
    translate: 0px;
  }
}

@keyframes squishIcon {
  from {
    scale: 95%;
  }
}

@keyframes rainbowText {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}

@keyframes hueShift {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  10% {
    -webkit-filter: hue-rotate(80deg);
  }
  50% {
    -webkit-filter: hue-rotate(160deg);
  }
  75% {
    -webkit-filter: hue-rotate(240deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}