:root {
  /*animation values*/
  --t-fast: 0.5s;
  --t-med: 0.8s;
  --t-slow: 1s;
  --easing: cubic-bezier(.2,.3,.5,1); 


  --accent-color: #FF5e33;
  --header-h: 10px;

}

body {
    background-color: black;
    color: white;
    font-family: "agave";
    text-align: right;
    margin: 20px;
    padding: 0;
    min-height: 100vh;
}

.page{
  padding-top: var(--header-h);
  display: flex;
  justify-content: left;

}

.head {
  position: fixed;
  display: flex;
  background: black;
  padding: 10px;
  inset: 0px  20px 2px;
  height: var(--header-h);
  justify-content: left;
  align-items: center;
  z-index: 1000;
  font-weight: bold;
}

.logo {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 0;
  justify-items: center;
  color: black;
  background-color: var(--accent-color);
  text-decoration: none;
  padding: 3px 4px;
  margin-right: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all var(--t-med) var(--easing);
  
}
.logo::before,
.logo::after{
  display: inline-blocks;
  content:"";
  transition: all var(--t-med) var(--easing);
}
.logo::before{
  content:"[";
  grid-column: 1;
}
.logo::after{
  content:"]";
  grid-column: 3;
}
.logo:hover{
  column-gap: 2rem;
  color: black;
  background-color: var(--accent-color);
  /*transition: all var(--t-med) var(--easing);*/
}
.logo:hover::before{
  transform: translateX(-3px);
  transition: all var(--t-med) var(--easing);
}
.logo:hover::after{
  transform: translateX(3px);
  transition: all var(--t-med) var(--easing);
}

t {
  position: relative;
  color: black;
  text-decoration: none;
  display: inline-block;
  transition: all var(--t-fast) var(--easing);
  padding: 1px;
  cursor: pointer;
  margin-inline: 1px;

}

t::before,
t::after{
  content:"";
  position: relative;
  transition: all var(--t-fast) var(--easing);
}

t::before{
  content:"[";
  margin-right:1px;
}

t::after {
  content:"]";
  margin-left:1px;
}
t:hover::before{
  content:"[";
  margin-right:1rem;
  transition: all var(--t-fast) var(--easing);
}
t:hover::after{
  content:"]";
  margin-left:1rem;
  transition: all var(--t-fast) var(--easing);
}

/*logologo*/
l {
  position: relative;
  color: white;
  text-decoration: none;
  display: inline-block;
  transition: all var(--t-fast) var(--easing);
  padding: 1px;
  cursor: pointer;
  margin-inline: 1px;

}
l:hover{
  letter-spacing: .1rem;

}

l::before,
l::after{
  content:"";
  position: relative;
  transition: all var(--t-fast) var(--easing);
}

l::before{
  content:" <";
  margin-right:1px;
}

l::after {
  content:"> ";
  margin-left:1px;
}
l:hover::before{
  content:"<";
  margin-right:1rem;
  transition: all var(--t-fast) var(--easing);
}
l:hover::after{
  content:">";
  margin-left:1rem;
  transition: all var(--t-fast) var(--easing);
}

a {
  text-decoration: none;
  color: white;
}

.tray-container {
  position: relative;
  display: inline-block;
}
.tray-button{
  padding: 1px 2px;
  background: #ffffff;
  color: #000000;
  font-weight: bold;
  cursor: pointer;
}

/* The tray panel */
.tray {
  justify-content: center;
  position: absolute;
  min-width: 220px;

  padding: 8px;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);

  /* smooth open/close */
  transition:
    opacity 300ms ease,
    transform 300ms ease,
    visibility 0s linear 300ms; /* delay hides to after fade-out completes */
  pointer-events: none; /* avoid hover flicker when hidden */
}

/* Show tray on hover/focus within container */
.tray-container:hover .tray,
.tray-container:focus-within .tray {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 300ms ease,
    transform 300ms ease,
    visibility 0s; /* become visible immediately */
  pointer-events: auto;
}


/* Links inside tray */
.tray a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;

  /* start eased-in state */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    background-color 200ms ease;
}

/* Staggered entrance on open */
.tray-container:hover .tray a,
.tray-container:focus-within .tray a {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger timings */
.tray a:nth-child(1) { transition-delay: 60ms; }
.tray a:nth-child(2) { transition-delay: 120ms; }
.tray a:nth-child(3) { transition-delay: 180ms; }
/* add more nth-child rules if you have more links */

/* Remove delay when closing so they ease out together */
.tray-container:not(:hover):not(:focus-within) .tray a {
  transition-delay: 0ms;
}

/* Hover feedback per link */
.tray a:hover,
.tray a:focus {
  background-color: rgba(64,64,64,0.5);
  outline: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tray,
  .tray a {
    transition: none !important;
    transform: none !important;
  }
}