:root {
  /* Values? (If needed)*/
  --boxShadowSize: 3px;
  --boxShadowSizeN: -3px;
  --boxShadowFade: 10px;
  
  --textShadowFade: 1px;
  
  /* Color Palette Fast Config */
  --value: 62%;
  --saturation: 100%;
  --darkValue: 44%;
  --darkSaturation: 62%;
  /* Colors */
  --mainBgColor: rgba(21, 21, 21, 0.8);
  --secondaryBgColor: rgba(21, 21, 21, 0.2);
  --transparentColor: rgba(0, 0, 0, 0);
  --textColor: rgba(245, 245, 245, 1);
  --secondaryColor: rgba(31, 31, 31, 1);
  /* Colors (Palette Basic [RGB]) */
  --red: hsl(0, var(--saturation), var(--value));
  --darkRed: hsl(0, var(--darkSaturation), var(--darkValue));
  --green: hsl(117, var(--saturation), var(--value));
  --darkGreen: hsl(117, var(--darkSaturation), var(--darkValue));
  --blue: hsl(224, var(--saturation), var(--value));
  --darkBlue: hsl(224, var(--darkSaturation), var(--darkValue));
  /* More Colors (Palette Extra) */
  --white: hsl(0, 0%, var(--value));
  --darkWhite: hsl(0, 0%, var(--darkValue));
  --orange: hsl(30, var(--saturation), var(--value));
  --darkOrange: hsl(30, var(--darkSaturation), var(--darkValue));
  --yellow: hsl(52, var(--saturation), var(--value));
  --darkYellow: hsl(52, var(--darkSaturation), var(--darkValue));
  --cyan: hsl(170, var(--saturation), var(--value));
  --darkCyan: hsl(170, var(--darkSaturation), var(--darkValue));
  --purple: hsl(270, var(--saturation), var(--value));
  --darkPurple: hsl(270, var(--darkSaturation), var(--darkValue));
  --pink: hsl(300, var(--saturation), var(--value));
  --darkPink: hsl(300, var(--darkSaturation), var(--darkValue));
  
  --eggshell: #F5F5F5;
  --navyBlue: #0F1626;
  --leather: #AB987A;
  --coral: #FF533D;
  
  --tdPadding: 12px;
  --borderWidth: 4px;
  --percentageWrapWidth: 100px;
}

* {
  padding: 0;
  margin: 0;
  color: var(--textColor);
  text-shadow:
    -1px -1px var(--textShadowFade) var(--secondaryColor),
    1px -1px var(--textShadowFade) var(--secondaryColor),
    -1px 1px var(--textShadowFade) var(--secondaryColor),
    1px 1px var(--textShadowFade) var(--secondaryColor);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease-in-out;
  transition: border 0.5s ease-in;
  transition: height 0.25s ease-out;
}

html, body {
  min-height: 100vh;
  
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
  background: var(--eggshell);
  
  position: relative;
}

#sidePanel {
  height: 100vh;
  width: calc(40vw - 4px);
  
  background-color: var(--navyBlue);
  position: absolute;
  left: 0;
  top: 0;
  
  border-right: solid 4px var(--coral);
  
  transition: left 0.5s ease;
  
  z-index: 999;
}
#sidePanel.open {
  left: 0;
}
#sidePanel:not(open) {
  left: -40vw;
}
.header {
  width: 100%;
  height: 10vh;

  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
#subjects {
  height: 90vh;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  padding: 2vh 0;
  scroll-snap-type: y mandatory;
}
#subjects p {
  height: 10vh;
  width: 100%;
  box-sizing: border-box;
  padding: 0 5% 0 25%;
  justify-content: center;
  align-content: center;
  scroll-snap-align: start;
  cursor: pointer;
}
#subjects p.active {
  color: var(--coral);
  cursor: default;
}




header {
  height: 10vh;
  width: 100vw;
  
  background-color: var(--navyBlue);
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}



#burger, #burger0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2%;
  align-items: center;
  max-width: 20vw;
  height: 10vh;
  max-height: 10vh;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
#burger > *, #burger0 > * {
  max-width: 80%;
  height: 5%;
  max-height: 5%;
  aspect-ratio: 8 / 1;
  border-radius: 100px;
  background-color: var(--eggshell);
}

#date {
  display: flex;
  overflow-x: scroll;
  width: 80%;
  height: 10vh;
  scroll-snap-type: x mandatory;
}
header p {
  height: 10vh;
  justify-content: center;
  align-content: center;
  padding: 0 10px;
  scroll-snap-align: start;
  cursor: pointer;
}
header p.active {
  height: calc(10vh - 4px);
  border-bottom: solid var(--coral) 4px;
  cursor: default;
}

main {
  height: 90vh;
  width: 100vw;
}

#config {
  height: calc(10vh - 4px);
  width: 100%;
  
  box-sizing: border-box;
  padding: 0 5vw;
  
  background-color: var(--leather);
  
  display: flex;
  align-items: center;
  gap: 4vw;
  
  overflow-x: scroll;
  
  border-bottom: solid var(--navyBlue) 4px;
}
#config p {
  color: var(--eggshell);
  text-shadow: none;
}

#table {
  overflow: scroll;
  max-height: 80vh;
  max-width: 100vw;
}

table {
  border-spacing: 0;
}

table, th, td, tr {
  color: var(--coral);
  text-shadow: none;
}
table p{
  color: var(--coral);
  text-shadow: none;
}

tr td {
  outline: none;
  border-right: var(--borderWidth) solid var(--navyBlue);
  border-bottom: var(--borderWidth) solid var(--navyBlue);
  padding: var(--tdPadding);

  text-align: center;
}

table tr:first-child td {
  outline: none;
  border-right: var(--borderWidth) solid var(--navyBlue);
  border-bottom: var(--borderWidth) solid var(--navyBlue);
  padding: 12px;

  text-align: center;
}

tr td:first-child {
  border-left: 4px solid var(--navyBlue);
  padding: 12px;
}

.percentageWrap {
  position: relative;
  height: 50px;
  width: var(--percentageWrapWidth);
  display: flex;
  justify-content: center;
  align-items: center;
}
.percentage {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - (var(--borderWidthPercentage) * 2));
  background-color: var(--navyBlue);
  border-left: var(--borderWidthPercentage) solid var(--coral);
  z-index: -1;
  
  border-radius: 0 8px 8px 0;
}