:root {
  --c1: rgb(90 90 90 / .6);
  --c2: rgb(140 140 140 / .65);
  --c3: rgb(240 240 240 / 0.15);
  --c4: rgb(220 220 220 / .15);
  --c5: rgb(180 180 180 / .55);
  --c6: rgb(90 90 90 / .35);
  --c7: rgb(80 80 80 / .38);
  
  /* body text */
  --ctext: rgb(46, 46, 46);
  /* header text */
  --cheader: rgb(32, 31, 35);
  --cblue: rgb(46, 39, 122);
  /* 90+% */
  --cgreen: rgb(39, 103, 43);
  /* 80-89% */
  --cyellow: rgb(246 255 21);
  /* 70-79% */
  --cred: rgb(153, 0, 0);
  /* <70% */
  --ctoolbar: rgb(0 0 0 / .15);
  
  --font-body: "Oxygen";
  --font-header: "Montserrat";
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ctext);
  overflow: hidden;
  width: 100vw;
  height: 100svh;
  display: grid;
  grid-template:
    "a a" 4rem
    "b c" calc(100% - 4rem) / 10rem 1fr;
  background-size: cover;
  background-position: center;
  background: var(--c4);
}

header img {
    opacity: .7;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-header);
  font-weight: normal;
  color: var(--cheader);
}
h1 {
  font-size: 2.75rem;
}
a {
  color: var(--ctext);
}

header {
  grid-area: a;
  background: var(--c1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  backdrop-filter: blur(6px);
}

::placeholder {
    opacity: 1;
    color: var(--ctext);
}

#logo {
  height: 80%;
}

#profile-picture {
  height: 60%;
  aspect-ratio: 1;
  border-radius: 99rem;
}

#sidebar {
  grid-area: b;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c2);
  padding: 2rem 1rem;
  gap: .75rem;
  overflow: scroll;
  backdrop-filter: blur(1px);
}

.sidebar-link {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--ctext);
  text-decoration: none;
}

.sidebar-link:not(:last-child)::after {
  content: "";
  width: 30%;
  min-height: 1px;
  background: var(--ctext);
  display: block;
  margin: 0.8rem;
  margin-top: 1.5rem;
  border-radius: 2rem;
  cursor: default;
}

main {
  grid-area: c;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: scroll;
}

.toolbar-button {
  all: unset;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.toolbar-button-focused {
  background: var(--c1);
  border-radius: 3px;
}

.toolbar-icon {
  max-width: 1rem;
  max-height: 1rem;
  position: relative;
}

#toolbar {
  padding: 0 1rem;
  height: 2.2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--ctoolbar);
  position: relative;
  border-radius: .4rem;
  border: 2px solid var(--c1);
  opacity: .8;
}

.toolbar-section {
  height: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.toolbar-section:not(:last-child)::after {
  all: unset;
  content: "";
  width: .15rem;
  height: 60%;
  background: var(--c1);
  border-radius: 1rem;
  margin: 0 .5rem;
}
#settings-bttn-color-picker {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 49332;
}
#toolbar-view-modes {}

#toolbar-filter {}

#filter-input {
  all: unset;
  width: 8rem;
  height: 1.4rem;
  padding: 0 .5rem;
  color: var(--ctext);
  cursor: pointer;
}

#workplace {
  overflow: scroll;
  width: 100%;
  height: 100%;
}

#workspace-prelude {
  width: 100%;
  height: 15rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: var(--c4);
  overflow: scroll;
}

.view-display {
  background: var(--c5);
  margin: 0;
  backdrop-filter: blur(1px);
}
#class-display-stack {
  width: 100%;
  overflow-x: scroll;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
}
#class-stack-row-labels, .class-stack-row {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100rem;
  text-align: center;
}
:is(#class-stack-row-labels, .class-stack-row) > * {
  text-overflow: ellipsis;
  height: 2rem;
  width: 10rem;
  padding: .3rem;
}
.class-stack-row:nth-child(2n + 1) {
    background: var(--c3);
}
#class-stack-row-labels {
  padding-bottom: 0.5rem;
}

/* CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR CALENDAR */

#class-display-calendar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  flex-direction: column;
  padding: 1rem 0;
  box-sizing: content-box;
}
#class-calendar-header {
  width: 80%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}
#class-calendar-header-controls {
  display: flex;
  align-items: center;
  height: 6rem;
  justify-content: center;
}
#class-calendar-control-left {
  width: 0; 
  height: 0; 
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent; 
  border-right: .9rem solid var(--c1); 
}
#class-calendar-control-right {
  width: 0; 
  height: 0; 
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent; 
  border-left: .9rem solid var(--c1); 
}
#class-calendar-month {
  padding: 0 1rem;
}
#class-calendar-dotw {
  width: 100%;
  height: 2.5rem;
  display: flex;
}
#class-calendar-dotw > * {
  width: calc(100% / 7);
  text-align: center;
}
#class-calendar-days {
  width: 80%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--c1);
  box-sizing: content-box;
}
.class-calendar-entry {
  width: calc(calc(100% / 7) - 2px);
  height: calc(20% - 2px);
  display: flex;
  background: var(--c3);
  border: 1px solid var(--c1);
}

.class-calendar-entry-contents {
  width: -webkit-fill-available;
  list-style-type: "- ";
  margin: 0;
  padding: 1.5rem 0 0 1rem;
}
.class-calendar-entry-day {
  text-align: center;
  width: 2rem;
  position: relative;
  top: 0.5rem;
  
}




/* MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX MTRX */
#class-display-matrix {
  margin: 0;
  padding: 3rem;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: calc(100% - 9rem);
  overflow-y: scroll;
  flex-wrap: wrap;
  gap: 3rem;
}

.class-card-assignment-list {
  list-style-type: none;
  padding: 0 1rem 1rem 1rem;
  flex: 1 0 auto;
}

.class-card-assignment-list-elem {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.class-card-assignment-list-subsection {
  padding: 0 1rem;
  list-style-type: "-  ";
}
.class-card-assignment-list-subsection-title {
  padding: 0.5rem 0;
}

.class-card {
  min-width: 16rem;
  min-height: 14rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  overflow: hidden;
  border: .6rem solid var(--c7);
  border-bottom: none;
  box-shadow: -.3rem .3rem 1rem var(--c6);
  transition: translate .3s ease-out, box-shadow .3s ease-out;
}
.class-card:hover {
  translate: 0.3rem -0.3rem;
  box-shadow: -0.6rem 0.6rem 1rem var(--c6);
}

.class-card-name {
  margin: 0;
  padding: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* stole these from Stack overflow */
.class-card-top::-webkit-scrollbar { 
    display: none; 
}
.class-card-top {
  -ms-overflow-style: none; 
  scrollbar-width: none;
  background: var(--c3);
  height: 12rem;
  width: 16rem;
  overflow: scroll;
  padding-top: 1rem;
}

.class-card-bottom {
  width: 100%;
  height: 4rem;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  background: var(--c7);
}

.class-card-teacher {
  margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  left: .3em;
  bottom: 0;
}

.class-card-score {
  margin: 0;
  position: relative;
  padding: 1em;
  right: 0;
  bottom: 0;
  font-weight: bold;
  color: var(--cblue);
}