@import url('https://fonts.googleapis.com/css2?family=TASA+Explorer:wght@400..800&display=swap');

:root{
  --bg: #0b0e0b;
  --text: #ffffff;
  --primary: #e3d2b9;
  --secondary: #18a19f;
  --tertiary: #578AD6;
  --muted: rgba(255,255,255,0.65);
  --muted-2: rgba(255,255,255,0.45);
  --overlay: rgba(11,14,11,0.6);
  --card-elev: rgba(0,0,0,0.45);
  --radius: 10px;
}

html,body{
  margin-top:2%; margin-bottom:2%; margin-inline:5%;
  background:var(--bg); color:var(--text);
  font-family: "Tasa Explorer", sans-serif;
  line-height: 1rem;
  -webkit-font-smoothing:antialiased;
}

@media (min-width: 1240px) {
  body {
    margin-inline: 25%;
  }
}


h1 {
    font-size: 5rem;
    margin-bottom: 0.1rem;
    line-height: 0.8em;
}
h2 {
    font-size: 2.5rem;
    margin-bottom: -1em;
}

/* hover text effect */
.hover-text {
    color: inherit;
    transition: color 2s ease, transform 180ms ease;
}
.hover-text:hover, .hover-text:focus {
    color: var(--tertiary);
    transition: color 350ms ease, transform 180ms ease;
}

/* icon-only button */
.icon-btn {
  --size: 50px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: invert(1)
}

/* stack both images on top of each other and cross-fade */
.icon-btn .icon {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.icon-btn:hover .icon {
  transition: opacity 350ms ease;
}

.icon-default { opacity: 1; }
.icon-hover { opacity: 0; }

/* swap icons on hover */
.icon-btn:hover .icon-default { opacity: 0; }
.icon-btn:hover .icon-hover { opacity: 1; }

/* GRID LAYOUT */
.layout {
  display: grid;
  grid:
    "Header Header Buttons"
    "Main Main Main"
    "Stack Stack Stack"
    "Education Education Education"
    / 1fr 1fr 1fr;
  gap: 1%;
}

.grid-divider.horizontal {
    --thickness: 1px;
    width: 100%;
    height: var(--thickness);
    background: var(--muted);
    justify-self: stretch;
    align-self: start;
    grid-column: var(--col-start) / var(--col-end, -1);
    grid-row: var(--row, 2) / span 1;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

.header { grid-area: Header; }

.buttons { 
    grid-area: Buttons; 
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
    
}
.main { grid-area: Main; }

.stack { 
    grid-area: Stack; 
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 2rem;
}
.education { 
    grid-area: Education; 
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 2rem;
}