/* RESET BODY */
body {
    margin: 0;
    background-color: rgb(10, 10, 10);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 60px; /* push content below 60px top bar */
    padding-bottom: 60px; /* adjust amount as needed */
}

/* ------------------------------ */
/*           TOP BAR              */
/* ------------------------------ */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgb(10, 10, 10);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #C150CE;
}

.left-buttons {
    position: absolute;
    left: 0;
    display: flex;
    gap: 10px;
    padding-left: 60px;
    align-items: center;
}

/* Top bar icon buttons */
.icon-btn img {
    width: 1em;
    height: 1em;
filter: invert(41%) sepia(72%) saturate(747%) hue-rotate(265deg) brightness(92%) contrast(102%);    cursor: pointer;
    transition: 0.3s ease;
}

.icon-btn:hover img {
    filter: invert(53%) sepia(72%) saturate(747%) hue-rotate(330deg) brightness(95%) contrast(105%);
}

/* ------------------------------ */
/*          PAGE SPACING          */
/* ------------------------------ */

.content {
    padding-top: 80px; /* space under fixed top bar */
}

/* ------------------------------ */
/*            HEADERS             */
/* ------------------------------ */

h1, h2, h3 {
    font-family: 'Josefin Sans', sans-serif;
    color: #C150CE;
}

h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 500; color: #000; }

/* ------------------------------ */
/*         PARAGRAPHS             */
/* ------------------------------ */

p {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    max-width: 60%;
    text-align: justify;
    line-height: 1.6;
    color: #C150CE;
}

/* ------------------------------ */
/*       FIXED MAIN BUTTONS       */
/* ------------------------------ */

/* Container holding the homework buttons */
.button-list {
    width: 60%;
    display: grid;

    /* 🔹 CHANGE THIS LINE */
    grid-template-columns: repeat(3, 1fr); /* 3 buttons per row */
    /* grid-template-columns: repeat(2, 1fr); */ /* ← use this for 2 per row */

    gap: 15px;
    margin-top: 20px;

}

/* Main buttons */
.button-list a {
    display: flex;
    justify-content: center;
    align-items: center;

    
    width: 100%;
    padding: 1em 0;

    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;

    background-color: rgb(10, 10, 10);
    color: #C150CE;
    border-radius: 8px;
    border: 2px solid #C150CE;
    text-decoration: none;

    transition: background-color 0.3s ease, transform 0.2s ease, letter-spacing 0.2s;

}

/* Hover */
.button-list a:hover {
    /* background-color: rgb(10, 10, 10); */
    animation: hueShift 4s linear infinite;
    transform: scale(1.02);
    letter-spacing: 2px;
}

@keyframes hueShift {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

/* Active */
.button-list a:active {
    transform: scale(0.98);
}

/* 📱 Responsive: stack on small screens */
@media (max-width: 768px) {
    .button-list {
        grid-template-columns: 1fr;
    }
}


/*Classes to control the placement of buttons */

.center-btn {
    grid-column: 2; /* middle column */
}

.full-btn {
    grid-column: 1 / -1;
}

.right-btn {
    grid-column: 3;
}

.left-btn {
    grid-column: 1;
}




/* --------------------- */
/*  CUSTOM CURSOR STYLE  */
/* --------------------- */

/* Hide default cursor */
html, body {
  cursor: none;
}

a,
a *,
button,
button *,
.icon-btn,
.icon-btn *,
a,
input,
textarea,
select,
label {
  cursor: none !important;
}

/* Elastic cursor */
.cursor {
  --size: 40px;
--cursor-color: #C150CE; /* change freely */

  position: fixed;
  left: calc(var(--size) / -2);
  top: calc(var(--size) / -2);

  width: var(--size);
  height: var(--size);

  border: 2.5px solid var(--cursor-color); /* ✅ FIXED */
  border-radius: 50%;
  background: transparent;

  pointer-events: none;
  transform-origin: center center;
  will-change: transform;

  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    width 1s ease,
    height 1s ease;


  z-index: 9999;
}

/* ✅ Hover fill state */
.cursor.is-hover {
  background-color: var(--cursor-color);
  width: 25px;   /* smaller than normal size */
  height: 25px;

    /* mix-blend-mode: differnce; */
}