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

:root {
    --bar-width: 60px;
    --bar-height: 8px;
    --hamburger-gap: 6px;
    --foreground: #333;
    --background: white;
    --hamburger-margin: 5px;
    /* hamburger-height used to calculate length of X bars */
    --hamburger-height: calc(var(--bar-height)* 3 + var(--hamburger-gap) * 2);
    --animation-timing: 200ms ease-in-out;
    --sidebar-width: 10vw;
}



body {
    background-color: #DA70D6;
    color: #000000;
      font-family: "Outfit", sans-serif;
      padding: 2em;
       margin: 0;

}

h1 {
      font-family: "Luckiest Guy", cursive;
    font-size: 3em;
    text-align: center;
    
}

a {
    color: #000000;
}

a:hover{
    background-color: #000000;
    color: #DA70D6;
    cursor: alias;  
}

img {
    border: 1em solid blue;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 25%;
  margin: 1.5em;
  /*border: 1px solid black;*/
  border-radius: 10px;
  padding: 1em;
  text-align: center;
}

.box img {
  max-width: 30%;
  display: block;
  margin: auto;
}

.rainbow {
  list-style-image: linear-gradient(to left bottom, red, blue);
}





.hamburgerMenu {
    /* x-width used to calculate width of final X effect */
    --x-width: calc(var(--hamburger-height) * 1.41421356237);

    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    right: var(--hamburger-margin);
    z-index: 2;
    cursor: pointer;
}

/* when hamburger menu has input that is checked, swap the colors on the bars */
.hamburgerMenu:has(input:checked) {
    --foreground: black ;
    --background: white;
}

/* for keyboard navigators, add an outline to all three bars when the menu icon is selected */
/* see the results by using Tab to navigate to the menu */
.hamburgerMenu:has(input:focus-visible)::before,
.hamburgerMenu:has(input:focus-visible)::after,
.hamburgerMenu input:focus-visible {
    border: 1px solid var(--background);
    box-shadow: 0 0 0 1px var(--foreground);
}

/* selects the label before the input, the input, and the end label after the input - makes them the three bars of the menu */
.hamburgerMenu::before,
.hamburgerMenu input,
.hamburgerMenu::after {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: 20px;
    /* to draw the X */
    transform-origin: left center;
  
    transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
}

/* hides the checkbox created by input */
.hamburgerMenu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

/* does the hamburger menu have an input that's checked inside of it?  if so, select the element before it and make the first slash of the X */
.hamburgerMenu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    /* translate Y position by half the height of the bar - helps move the X bars into a symmetrical X shape */
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburgerMenu:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

/* when checked, make the input bar (the middle bar) invisible */
.hamburgerMenu input:checked {
    opacity: 0;
    width: 0;
}


/* SIDEBAR */
.sidebar {
    transition: translate var(--animation-timing);
    translate: 100vw;
    padding: .5rem 1rem;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background-color: blue;
    max-width: var(--sidebar-width);
    min-height: 25vh;
}

.sidebar a {
    color: white;
    font-size: 1.5em;
}

/* selects the .sidebar element directly after checked hamburgerMenu */
.hamburgerMenu:has(input:checked) + .sidebar {
    translate: calc(100vw - var(--sidebar-width));
}


@keyframes slide-in {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_left {
   animation-name: slide-in;
   animation-duration: 1500ms;
}

.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 1.5rem 3rem;
  font-size: 1.5rem;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.mouse-cursor-gradient-tracking span {
  position: relative;
  pointer-events: none;
}

.mouse-cursor-gradient-tracking::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}