cs-2022-class-profile/pages/_app.css

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(92rem / 16);
}

body {
  /* Theme colours */
  --pink: #EF839D;
  --light-pink: #FFCAD0;
  --lighter-pink: #FFE7E7;
  --orange: #F5917B;
  --light-orange: #FFC4A9;
  --lighter-orange: #ffddcd;
  --navy: #252D41;
  --light-navy: #354265;
  --dark-navy: #141D34;

  /* Default is dark theme */
  --light--primary-background: #FFFFEF;
  --light--secondary-background: #FDF5ED;
  --light--primary-accent: #CA634D;
  --light--primary-accent-light: var(--orange);
  --light--primary-accent-lighter: #FFBC9F;
  --light--secondary-accent: #E55F98;
  --light--translucent-accent: rgba(255, 231, 231, 0.75);
  --light--secondary-accent-light: #FEA0C8;
  --light--primary-heading: #D02B53;
  --light--primary-text: #483B35;
  --light--link: var(--orange);
  --light--link-hover: #FFBC9F;
  --light--card-background: #FFFFFF;
  --light--label: #A98778;

  --dark--primary-background: var(--navy);
  --dark--secondary-background: var(--dark-navy);
  --dark--tertiary-background: var(--light-navy);
  --dark--primary-accent: var(--pink);
  --dark--primary-accent-light: var(--light-pink);
  --dark--primary-accent-lighter: var(--lighter-pink);
  --dark--primary-accent-dark: #dc538e;
  --dark--primary-accent-darker: #c8417c;
  --dark--secondary-accent: var(--orange);
  --dark--secondary-accent-light: var(--light-orange);
  --dark--secondary-accent-lighter: var(--lighter-orange);
  --dark--translucent-accent: rgba(239, 131, 157, 0.75);
  --dark--primary-heading: #FFC48D;
  --dark--secondary-heading: var(--pink);
  --dark--link: var(--pink);
  --dark--link-hover: var(--light-pink);
  --dark--primary-text: #FDF5ED;
  --dark--secondary-text: var(--light-pink);
  --dark--card-background: #2C3651;
  --dark--label: #FFFFFF;

  --primary-background: var(--dark--primary-background);
  --secondary-background: var(--dark--secondary-background);
  --tertiary-background: var(--dark--tertiary-background);
  --primary-accent: var(--dark--primary-accent);
  --primary-accent-light: var(--dark--primary-accent-light);
  --primary-accent-lighter: var(--dark--primary-accent-lighter);
  --primary-accent-dark: var(--dark--primary-accent-dark);
  --primary-accent-darker: var(--dark--primary-accent-darker);
  --secondary-accent: var(--dark--secondary-accent);
  --secondary-accent-light: var(--dark--secondary-accent-light);
  --secondary-accent-lighter: var(--dark--secondary-accent-lighter);
  --translucent-accent: var(--dark--translucent-accent);
  --primary-heading: var(--dark--primary-heading);
  --secondary-heading: var(--dark--secondary-heading);
  --link: var(--dark--link);
  --link-hover: var(--dark--link-hover);
  --primary-text: var(--dark--primary-text);
  --card-background: var(--dark--card-background);
  --label: var(--dark--label);

  background-color: var(--primary-background);
  color: var(--primary-text);
  font-family: "Inconsolata", monospace;
  margin: 0;
  position: relative;

  /* Font styling for body */
  font-size: calc(18rem / 16);
  font-weight: 500;
}

/* Page titles (e.g. Demographics) */
h1 {
  font-size: calc(48rem / 16);
  font-weight: 700;
  color: var(--primary-accent-light);
  margin-top: calc(32rem / 16);
  margin-bottom: calc(16rem / 16);
}

/* Major section headings (e.g. About the Programs) */
h2 {
  font-size: calc(36rem / 16);
  font-weight: 700;
  color: var(--primary-heading);
  margin-top: calc(32rem / 16);
  margin-bottom: calc(16rem / 16);
}

/* Minor section headings & questions (e.g. What Program Are You In?) */
h3 {
  font-size: calc(32rem / 16);
  font-weight: 700;
  color: var(--secondary-heading);
  margin-top: calc(24rem / 16);
  margin-bottom: calc(16rem / 16);
}

/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
h4 {
  font-size: calc(24rem / 16);
  font-weight: 700;
  color: var(--secondary-heading);
  margin-top: calc(24rem / 16);
  margin-bottom: calc(8rem / 16);
}

p {
  color: var(--primary-text);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.5s ease-out;
}

a:hover {
  color: var(--link-hover);
}

@media only screen and (prefers-color-scheme: dark) {
  body {
    --primary-background: var(--dark--primary-background);
    --secondary-background: var(--dark--secondary-background);
    --tertiary-background: var(--dark--tertiary-background);
    --primary-accent: var(--dark--primary-accent);
    --primary-accent-light: var(--dark--primary-accent-light);
    --primary-accent-lighter: var(--dark--primary-accent-lighter);
    --primary-accent-dark: var(--dark--primary-accent-dark);
    --secondary-accent: var(--dark--secondary-accent);
    --secondary-accent-light: var(--dark--secondary-accent-light);
    --secondary-accent-dark: var(--primary-accent-dark);
    --primary-heading: var(--dark--primary-heading);
    --secondary-heading: var(--dark--secondary-heading);
    --link: var(--dark--link);
    --link-hover: var(--dark--link-hover);
    --primary-text: var(--dark--primary-text);
    --card-background: var(--dark--card-background);
    --label: var(--dark--label);
  }
}

/* Custom styles for scroll bars on chromium */
::-webkit-scrollbar {
  width: 1em;
  height: 1em;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track:horizontal {
  background: var(--card-background);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal {
  background-color: var(--tertiary-background);
}