:root {
  /* colour theme: night sky, pastel */
  --bg: #0f1224;
  --mid: #171a34;
  --surface: #1c1f42;
  --glass: #202854;

  --fblue: #b8d8ff;
  --tblue: #7fb3ea;
  --lblue: #5a9bd6;
  --dblue: #2a346b;
  --blue: #303863;

  --lpurple: #B7A2CC;
  --purple: #b9abe8;
  --dpurple: #9fa3e3;
  --glassviolet: #c6c3f7;

  --lyellow: #FFED8D;
  --yellow: #EFBF04;
  --gold: #FFD700;
  --pyellow: #EFBF04;

  /* neutrals */
  --white: #f4f6ff;
  --muted: #9aa0c8;
  --black: #0b0d1a;

  /* section-bg */
  --sectionbg: #1c1f42;
  --cubetext: #EFBF04;
  --edumajor: #202854;
  --edutext: #ffffff;
}

/* this is torture */
.light-mode {
  --bg: #ffee9b;
  --mid: #f8c072;
  --surface: #dd7b8f;
  --glass: #f8b6b0;

  --fblue: #b62962;
  --tblue: #d5c6f7;
  --dblue: #e3d8fb;
  --blue: #9ca8f0;

  --lpurple: #b9abe8;
  --purple: #FFED8D;
  --dpurple: #f8b6b1;
  --glassviolet: #8a72bd;

  --lyellow: #d4c2f9;
  --yellow: white;
  --gold: #f06f83;
  --pyellow: #c08621;

  /* neutrals */
  --white: rgb(22, 3, 55);
  --muted: #5f6391;
  --black: #ffffff;

  /* ... */
  --sectionbg: #ffffff;
  --cubetext: #b62962;
  --edumajor: #f8b6b0;
  --edutext: rgb(85, 80, 80);
}

/* *,
*::before,
*::after {
  box-sizing: border-box;
} */


html, body {
    height: 100%;
    margin: 0;
}

body {
    background: linear-gradient(to bottom, var(--bg), var(--mid), var(--surface));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-x: hidden;
    cursor: url("assets/cursor-Darkstar.svg") 8 8, auto;
}

body.light-mode {
    cursor: url("assets/cursor-Lightstar.svg") 8 8, auto;
}

/* STAR BG */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.stars {
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png") repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

/* CURSOR grr */
.cursor-trail {
    position: fixed;
    width: 7px;
    height: 7px;
    background-color: var(--lyellow);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fadeOut 0.5s forwards;
    z-index: 1000;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* light dark toggle */
#theme-switch {
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--muted);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 1.5vh;
    right: 3vw;
    cursor: pointer;

    z-index: 50;
}

#theme-switch .toggle-icon:first-child {
    display: none;
}

.light-mode #theme-switch .toggle-icon:last-child {
    display: none;
}

.light-mode #theme-switch .toggle-icon:first-child {
    display: block; 
}




/* FONTS AND STYLES */
.crimson-pro {
  font-family: "Crimson Pro", serif;
  font-style: normal;
}

.inter {
    font-family: "Inter", sans-serif;
    font-style: normal;
}

.lexend {
    font-family: "Lexend", sans-serif;
    font-style: normal;
}

.highlight {
    color: var(--fblue);
    font-weight: 650;
}

.section-title {
    color: var(--gold);
    font-size: clamp(2.5rem, 3vw, 3rem);
    font-weight: 500;
    margin: 0;
}

/* divider */
hr.custom-divider {
  border: none;
  border-top: 3px solid var(--lpurple);
  margin:10px 0;
  width: 100%;
  align-items: center;
}

hr.dotted {
  border-top: 3px dotted #bbb;
}