@import "tailwindcss";

* {
    box-sizing: border-box;
    color: var(--color-gray-100)
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Make body NOT scrollable - .content will scroll */
    overflow: hidden;
    background: linear-gradient(180deg, #3A5266 21%, #908585 88%);
    background-attachment: fixed;
    font-family: "Inter", monospace;
}

/*Navigation bar*/
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 15vw;
    height: 100vh;
    pointer-events: none;
    /* transform: rotate(-90deg);
    left: 40%;
    top: -40%; */
}

.sidebar svg {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    overflow: visible;
}


.waypoint {
    cursor: pointer;
}

text {
    font-family: "Inter", 'Courier New', Courier, monospace
}



  .about-box{
    --mx: 0px; 
    --my: 0px;
  }

  .about-box:hover {
    cursor: pointer;
  box-shadow:
    inset var(--mx) var(--my) 5px rgba(255, 255, 255, 0.35),
    inset calc(var(--mx) * 0.8) calc(var(--my) * 0.8) 9px rgba(255, 255, 255, 0.25),
    inset calc(var(--mx) * 1.1) calc(var(--my) * 1.1) 20px rgba(255, 255, 255, 0.15);
}