:root {
    --background-color: rgb(25, 17, 30);
    --light: rgb(194, 194, 204);
    --medium: rgb(92, 92, 105);
    --dark: rgb(25, 27, 29);

    --background-color2: rgb(21, 19, 23);
    --light2: rgb(194, 194, 194);
    --medium2: rgb(92, 92, 92);
    --dark2: rgb(25, 25, 25);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: var(--primary-text);
    border: none;
    cursor: none;
    user-select: none;
    box-sizing: border-box;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid white;
    background-color: transparent;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s;
    z-index: 9999;
}

[data-hover="true"]:hover {
  transform: scale(1.03);
  transition: background-color 0.2s, transform 0.2s ease-out;
}

[data-hover="true"]:not(:hover) {
  transform: scale(1.0);
  transition: background-color 0.3s, transform 0.3s ease-out;
}

@keyframes swing {
   0% { transform: rotate(6deg); }
   25% { transform: rotate(-3deg); }
   50% { transform: rotate(1.5deg); }
   75% { transform: rotate(-0.7deg); }
   100% { transform: rotate(0deg); }
}

[data-swing="true"]:hover {
  transform: rotate(6deg);
  animation: none; /* Stop the animation */
  transition: transform 0.3s; /* Smoothly transition to hover state */
}

[data-swing="true"]:not(:hover) {
  animation: swing 0.8s ease-out; /* Restart the animation when hover ends */
}

@font-face {
    font-family: DiamondSmith;
    src: url("fonts/Diamond Smith.otf") format("opentype");
}

@font-face {
    font-family: Skyscaper;
    src: url("fonts/Skyscapers.ttf") format("truetype");
}

hr {
    border: none;
    border-top: 0.1rem solid var(--medium2);
    overflow: visible;
    text-align: center;
    width: 20vw;
    margin-left: 40vw;
    margin-top: 2vw;
}

hr::after {
    background-color: var(--background-color);
    color: var(--medium2);
    content: '╳';
    padding: 0 4px;
    position: relative;
    top: -13px;
}

hr.background-color-border {
    margin-bottom: 20vh;
}

header {
    background-color: var(--background-color2);
    padding: 1vh 2vh;
    text-align: center;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0px;
    z-index: 100;
    transition: opacity 0.3s ease;
    opacity: 0; /* hidden */
    transform: translateY(0);
    width: 100%;
    pointer-events: none; /* so it doesn't block clicks while hidden */
}

/* Class to reveal the header */
#header.visible {
  opacity: 1.0;
  pointer-events: auto;
}

a, h1 {
    font-size: 2.5rem;
    font-family: Skyscaper;
    color: var(--light2);
    margin: 0px 0px;
    text-decoration: none;
}

.Skyscaper-font {
    font-size: 2.5rem;
    font-family: Skyscaper;
}

.contact-me:hover span {
  display: none;
}

.contact-me:hover:before {
  top: 0px;
  left: 0px;
  font-size: 2.5rem;
  font-family: Skyscaper;
  content: "click to copy email"
}

.email-right-margin {
    margin-right: 1vw;
}

footer {
  background-color: var(--background-color2);
  color: var(--light2);
  padding: 1vh;
  text-align: center;
}