* {
    margin: 0; border: 0; border: 0; box-sizing: border-box;
}

/* CSS Variable */
html {
    --color-primary: #222;
    --color-secondary: lightgray;
    --color-secondary2: #3A536B;
    --color-accent1: yellowgreen;
    --font-default: verdana, sans-serif;
    --font-heading: orbitron, sans-serif;
    --font-size: 62.25%;
    --scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: var(--color-primary);
    font-family: var(--font-default);
    font-size: 1.6rem;
    background-image: url(/hobby/images/glass-butte-map.jpg
    ), linear-gradient(var(--color-primary) 230px, var(--color-secondary));
    background-size: cover;
    
    /* background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; */
}

/* multiple alternating box shadows creates the stripe effect */
header {
    background-color: var(--color-secondary);
    height: auto;
    box-shadow: 0 3px 0 var(--color-primary), 0 13px 0 var(--color-secondary), 0 18px 0 var(--color-primary), 0 27px 0 var(--color-accent1), 0 34px 0 var(--color-primary), 0 42px 0 var(--color-secondary), 0 50px 0 var(--color-primary), 0 56px 0 var(--color-secondary), 0 64px 0 var(--color-primary), 0 66px 0 var(--color-secondary);
}

h1 {
    color: var(--color-secondary2);
    font-family: var(--font-heading);
    text-align: center;
    padding: 24px 8px;
    height: auto;
    /* text-shadow: 1px 2px 0 var(--color-accent1), 2px 4px 0 black; */
}

h1 span {
    color: var(--color-secondary2);
    /* text-shadow: -1ps -1px 0px black, 1px 2px 0 var(--color-accent1), 2px 4px 4px 0 black; */
    font-size: 6rem;
}
/*cards*/
.class_cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 140px;
    gap: 16px;
    background-color:;
}

.ccard {
    border: 2px solid black;
    min-width: 220px; aspect-ratio: 2/3;
    flex: 0 0 auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    background-size: cover;
    background-color: pink;
}

.ccard:hover {
    border: 2px solid var(--color-accent1);
    transform: scale(1.3);
    z-index: 10;
    box-shadow: 0 0 12px;    
}

.ccard:has(+ .ccard:hover),
.ccard:hover + .ccard {
    transform: scale(1.1);
    filter: opacity(30%);
}

.ccard:has(+ .ccard + .ccard:hover), 
.ccard:has(+ .ccard + .ccard + .ccard:hover),
.ccard:hover + .ccard + .ccard, 
.ccard:hover + .ccard + .ccard + .ccard {
  filter: opacity(10%);
}

.ccard a {
  display: inline-block; width: 100%; height: 100%;
  color: var(--color-primary);
  font-family: var(--font-heading);
  letter-spacing: 2px;
}

.ccard figcaption {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  position: absolute; bottom: 0; 
  width: 100%; aspect-ratio: 1/.25;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  transition: all 300ms ease-in-out;
}

.current figcaption {
  color: var(--color-accent2)
}

.class_cards figure:hover figcaption {
  background-color: var(--color-primary);
  color: var(--color-accent1);
}

/* styling the slash symbol */
.nolink {
  color: #CCC !important;
  position: relative;
  background-image: url(/images/slash.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

/* pseudo-element */
.nolink:hover::after {
  content: ""; display: block;
  width: 70%; aspect-ratio: 1;
  max-width: 110px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);  
}