body{
  background-color: white;
  margin: 0px;
  overflow: hidden;

  transition: background-color 0.2s;
}

/* Dark theme settings */

  /* panel */

body.dark{
  background-color: #171717;
}

body.dark .header{
  background-color: #171717;
  border-bottom: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.25);
}

  /* player */

body.dark .playerContainer::before{
  background-color: #171717;
}

body.dark .playerTooltip{
  background-color: white;
  color: #171717;
}

body.dark .playerTooltip::before{
  background-color: white;
}

body.dark .playerBox{
  background-color: #171717;
  border: 2px solid white;
  box-shadow: 0px 3px 3px 1px rgba(255, 255, 255, 0.25);
  border-top: none;
}

body.dark .trackName{
  color: #c0faff;
}

body.dark .timer{
  color: rgb(220, 220, 220);
}

/* firefox sliders */

body.dark .playerSlider::-moz-range-track{
  background-color: #5b6068;
}

body.dark .playerSlider::-moz-range-progress{
  background-color: #a8d8ff;
}

/* chromium/safari sliders */

body.dark .playerSlider::-webkit-slider-runnable-track{
  --colorProgress: #a8d8ff;
  --sliderColor: #5b6068;
}

  /* footer */

body.dark .copyright{
  color: #d5d5d5;
}

  /* wave */

body.dark .waveStart{
  stop-color: #346485;
}

body.dark .waveEnd{
  stop-color: #0d2e4c;
}

  /* main window */

body.dark .mainWindow{
  background-color: #132135;
}

body.dark .mainWindowContent{
  border: 2px solid white;
}

body.dark .mainWindowDecoration{
  background-color: #171717;
  border: 2px solid white;
  border-bottom: none;
}

body.dark .welcomingText{
  color: white;
}

body.dark .name{
  color: #c0faff
}

body.dark .selfDescription{
  color: #f5f6f7;
}

body.dark .iconName{
  color: white;
}

  /* windows */

body.dark .contact{
  background-color: #2b4d7d;
}

body.dark .about{
  background-color: #132135;
}

body.dark .projects{
  background-color: #132135;
}

body.dark .windowDecoration{
  background-color: #171717;
  border: 2px solid white;
  border-bottom: none;
}

body.dark .windowContent{
  border: 2px solid white;
}

  /* contact window */

body.dark .windowContent.contact{
  color: white;
}

body.dark .centerLine{
  border-top: 1px solid white;
}

body.dark .emailAdress{
  color: #c0faff;
}

body.dark .emailBtn{
  color: #171717;
  background-color: #c0faff;
}

body.dark .copyTooltip{
  background-color: white;
  color: #171717;
}

body.dark .copyTooltip::after{
  background-color: white;
}

  /* about window */

body.dark .windowContent.about{
  color: white;
}

body.dark .mainInfoPanel{
  border-bottom: 1px solid white;
}

body.dark .nameAbout{
  color: #c0faff;
}

body.dark .aboutContentContainer{
  scrollbar-color: transparent transparent;
}

body.dark .aboutContentContainer:hover{
  scrollbar-color: white transparent;
}

@media (hover: none) {
  body.dark .aboutContentContainer{
    scrollbar-color: white transparent;
  }
}

body.dark .educationText{
  background-color: #2b4d7d;
}

  /* projects window */

body.dark .windowContent.projects{
  color: white;
}

body.dark .windowContent.projects:hover{
  scrollbar-color: white transparent;
}

@media (hover: none) {
  body.dark .windowContent.projects{
    color: white;
    scrollbar-color: white transparent;
  }
}

body.dark .projectHeading{
  color: #c0faff;
}

body.dark .githubLink{
  background-color: #3f80bd;
  color: #c0faff;
}

body.dark .githubLink:active{
  box-shadow: none;
}

body.dark .toolName{
  box-shadow: 0px 2px 1px 1px rgba(255, 255, 255, 0.2);
}

body.dark .textLinks{
  color: #c0faff;
}

  /* image Viewer */

body.dark .imageViewer{
  background-color: rgba(0, 0, 0, 0.764);
}

  /* mobile version */

body.dark .mobileModalBtn{
  color: #171717;
  background-color: #c0faff;
}

@media (max-width: 700px) {
  body.dark .mobileModal{
  background-color: rgb(63, 128, 189);
  color: white;
  opacity: 0.9;
  }
  body.dark .windowContent{
    border-bottom: none;
  }
  body.dark .openWindowBtn{
    background-color: #2b4d7d;
    border: 2px solid white;
  }
}

/* end of dark theme settings */

.noShrink{
  flex-shrink: 0;
}

img {
  pointer-events: none;
}

*{
  box-sizing: border-box;
  font-family:  Zen Kaku Gothic New, Arial;
}

p{
  margin: 0px;
}

a{
  text-decoration: none;
  color: inherit;
}

.pageContainer{
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 52px 1fr 14vh;
  overflow: hidden;
}

.noSelect,
.noSelect *{
  -webkit-user-select: none;
  user-select: none;
}

.waveCrop{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 37dvh;
  overflow: hidden;
  z-index: 0;
}

.waveBackground{
  width: 100%;
  height: 200vh;
  height: 200dvh;

  position: absolute;
  top: 0;
}

.waveStart{
  stop-color: #a0d2ff;

  transition: stop-color 0.2s;
}

.waveEnd{
  stop-color: #c7e4ff;

  transition: stop-color 0.2s;
}

@media (hover:hover) and (pointer: fine) {

/* about.css */

  .avatarContainer:hover{
    transform: scale(1.03);
  }

/* contact.css */

  .emailAdress:hover + .copyTooltip{
    opacity: 0.6;
  }
  .emailBtn:hover{
    opacity: 0.8;
  }

/* general.css */

  body.dark .githubLink:hover{
    box-shadow: 0px 1px 3px 1px rgba(255, 255, 255, 0.3);
  }

/* main.css */

  .windowIconContainer:hover{
    transform: scale(1.05);
  }
  .quickLinks:hover{
    transform: scale(1.1);
  }

/* panel.css */

  .panelRight:hover,
  .panelLeft:hover,
  .musicBtn:hover{
    transform: scale(1.1);
  }

/* player.css */

  .playerContainer:has(.trackNameBox:hover) .playerTooltip{
    opacity: 0.6;
    transition-delay: 0.5s;
  }
  .playerSlider:hover::-moz-range-track,
  .playerSlider:hover::-moz-range-progress{
    height: 6.71px;
  }
  .playerSlider:hover::-webkit-slider-runnable-track {
    height: 6.71px;
  }

/* projects.css */

  .projectImgContainer:hover{
    transform: scale(1.03);
  }
  .githubLink:hover{
    opacity: 0.8;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  }
  .toolName:hover{
    transform: translateY(-5px);
  }
  .viewInstructions:hover{
    color: rgb(255, 255, 255);
  }

/* windows.css */

  .closeBtn:hover{
    transform: scale(1.1);
  }

}