style-experimental.css

#content {
  position: absolute;
  z-index: 1;
}

/* #region Fonts */
@font-face {
  font-family: Inter-Light;
  src: url("Fonts/Inter/static/Inter-Light.ttf");
}

@font-face {
  font-family: Madimi-One;
  src: url("Fonts/Madimi-One/MadimiOne-Regular.ttf");
}

@font-face {
  font-family: Inconsolata;
  src: url("Fonts/Inconsolata/Inconsolata-Regular.otf")
}

.inter-light {
  font-family: Inter-Light;
}

.inconsolata {
  font-family: Inconsolata;
}

.nasalization{
  font-family: nasalization, sans-serif;
  font-style: normal;
}
/* #endregion */

/* #region Precontent */
#fg {
  justify-content: space-between;
  overflow: hidden;
  height: 98vh;
}

header {
  background-color: rgba(0, 81, 255, 0.25);
  box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 50%);

  backdrop-filter: blur(2px);

  width: 100%;
}
/* #endregion */

/* #region Loader */
/* #endregion */

/* #region Search Bar */
#search-bar-wrapper{
  display: flex;
  justify-content: center;
  margin-bottom: 5vh;
  margin-top: 2vh;
  width: 100vw;
}

#search-bar {
  display: block;
  position: relative;
  font-size: min(1em, 4vw);
  width: 38vw;
}

#search-text{
  padding: 6px 5px 0px 5px;
  
  font-size: 1em;
  font-family: Inter-Light;
  
  width: 100%;
  height: 100%;
  padding: 5px;

  border:0;
  outline: 0;

  border-bottom: solid white;

  caret-color: white;
  background-color: rgba(0,0,0,0);
  color:white;
}

#search-text::selection{
  /* This is *very* hard to see! */
  /* background-color: #1851ce33; */
  background-color: #1851ce88;
  border-radius: 0.1em;
}

#autocomplete{
  position: absolute;
  width: 100%;
  height: 100%;

  margin: 5px;

  border:0;
  font-size: 1em;

  z-index: -1;
  
  color:rgb(255, 255, 255);
  
  font-family: Inter-Light;

  display: flex;
  align-items: center;
}
/* #endregion */

/* #region Search Results */
#results-wheel {
  border: none;
  background: none;
}

#results-wheel img {
  height: 10vh;
  width: 10vh;
  animation: results-wheel-spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes results-wheel-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Yeah, not doing much to the scrollbar might look a *little* bit ugly.
 * The upside? We aren't screwing over accessiblity (not to mention browser
 * support is a nightmare). */
#search-results::-webkit-scrollbar-track
{
	background-color: #f5f5f526;
}

#search-results::-webkit-scrollbar-thumb
{
	background: var(--scroll-amount);
}

#search-results {
  --scrollbar-color: #4287f5;
  border: none;
  background: none;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0vw 5vw 0vw 5vw;
  scrollbar-color: var(--scroll-amount) #000;
}
/* .card */
.search-results-card {
  width: 100%;
}

.search-results-card>* {
  width: 20%;
}

.standard-info {
  min-width: 50%;
  padding: 0.5em 0 0.5em 1em;
  text-align: left;
}

.standard-info p {
  margin-right: auto;
}

.standard-details {
  padding: 0.5em 0;
  min-width:30%;
}

.standard-details>h2:before {
  content: "Lvl ";
}

.search-results-card h2 {
  font-family: Inter-Light;
}

.search-results-card>a {
  border-radius: 0.5em 2em 2em 0.5em;
  height: 100%;
  background-color: rgba(1, 48, 149, 0.586);
}

#subject-not-found {
  height: 60vh;
  width: 50vw;

  background-color: #ff000020;
  box-shadow: 0px 0px 1vw 1vw rgba(255, 0, 0, 0.13);

  border: 2px rgb(255, 81, 33) solid;
}

#subject-not-found * {
  color: rgb(202, 133, 133);
  font-family: Madimi-One;
}

#madimi {
  font-size: min(1.5vh, 1.5vw);
  white-space: pre;
}
/* #endregion */

/* #region Navigation */
a {
  color: #66f;
}

a:visited {
  color: #44f;
}

.navbutton {
  background: #00000000;
  border: none;
  border-bottom: 1px white solid;
  cursor: pointer;
  padding: 1vh;
  gap: 1vh;
}
/* #endregion */

/* #region Filter Controls */
#filter-button{
  position: absolute;
  top:30%;
  right:0;
  translate: -100%;
  height: 75%;

  aspect-ratio: 1/1;

  background-color: rgba(0,0,0,0);
  border: none;

  transition: all 0.3s;
}

#filter-button img{
  width: 100%;
  height: 100%;
}
#filter-button:hover img{
  filter: invert(36%) sepia(51%) saturate(1092%) hue-rotate(189deg) brightness(99%) contrast(91%);
}

#filter-button:hover ~ #filter-tooltip {
  transform: none !important;
}

#filter-tooltip {
  position: absolute;
  transform: translateY(-100vh);
  background-color: rgba(126, 126, 126, 0.1);
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(2px);
  border: 2px rgb(78, 78, 78) solid;
  color: white;
  border-radius: 8px;
  right: 0;
  top: 100%;
  width: fit-content;
  z-index: 8;
  font-size: min(1em, 4vw);
  padding: 5px;
}

#filter-tooltip:hover, #filter-tooltip:focus-within {
  transform: translateY(0);
}

#filter-tooltip button {
  background-color: #0000002c;
  border: 2px rgb(78, 78, 78) solid;
  width: 100%;
  border-radius: 4px;
  color: white;
}

#filters-button {
  display: none;
}
/* #endregion */

/* #region Subjects Page */
#subject-button{
  position: absolute;
  top:30%;
  right:0;
  height: 75%;

  aspect-ratio: 1/1;

  filter: invert(99%) sepia(0%) saturate(7498%) hue-rotate(169deg) brightness(109%) contrast(100%);
  background-color: rgba(0,0,0,0);
  border: none;

  transition: all 0.3s;
}
#subject-button img{
  width: 100%;
  height: 100%;
}
#subject-button:hover{
  filter: invert(36%) sepia(51%) saturate(1092%) hue-rotate(189deg) brightness(99%) contrast(91%);
}

#subject-select {
  border: none;
  background: transparent;
  gap: 0.5rem;
}

#subject-select>* {
  cursor: pointer;
  min-height: 4em;
}

.card {
  border: 2px solid #5D5D5D;
  border-radius: 0.5em 2em 2em 0.5em;
  /* Kept for later */
  background-color: rgb(217,217,217);
  /* wtaf */
  box-shadow: inset 0 200px 5000px rgba(255, 255, 255, 0.14);
  background: linear-gradient(#ffffff14, transparent);
  backdrop-filter: blur(2px);
  /* width: 75vw; */
  width: 100%;
}

.card:hover {
  background-color: #AAA;
}

.card:hover * {
  color: #000;
}

.subject-card p {
  font-family: Inter-Light;
  font-size: 2em;
}
/* #endregion */

/* #region Responsive Code */
@media (max-aspect-ratio: 13/16) {
  #search-bar {
    width: 80vw;
  }
}
/* #endregion */