@font-face {
  font-family: 'bullvone';
  src:
    url("fonts/bullvone-webfont.woff2") format("woff2"),
    url("fonts/bullvone-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.alt-chara {
  font-feature-settings: "aalt";
}

@font-face {
    font-family: 'Frank Ruhl Libre';
    src: url('FrankRuhlLibre-Regular.woff2') format('woff2'),
        url('FrankRuhlLibre-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.adamina-regular {
  font-family: "Adamina", serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

:root {
  --bulma-primary-h: 322deg;
  --bulma-primary-s: 76%;
  --bulma-primary-l: 66%;
  --bulma-link-h: 28deg;
  --bulma-link-s: 99%;
  --bulma-link-l: 52%;
  --bulma-info-h: 220deg;
  --bulma-info-s: 60%;
  --bulma-info-l: 63%;
  --bulma-success-h: 80deg;
  --bulma-success-s: 51%;
  --bulma-success-l: 48%;
  --bulma-warning-h: 43deg;
  --bulma-danger-h: 280deg;
  --bulma-danger-s: 36%;
  --bulma-danger-l: 50%;
  --bulma-body-background-color: hsl(322,76%,95%);
  --bulma-body-color: hsla(280deg,36%,20%,1);
  --bulma-body-line-height: 1.6;
  --bulma-hr-margin: 2rem 0;
  --bulma-column-gap: .25rem;

/* Typography */
    --bulma-size-small: 0.75rem;
    --bulma-size-normal: 1rem;
    --bulma-size-medium: 1.25rem;
    --bulma-size-large: 1.5rem;
    --bulma-text: rgb(22, 0, 33);
    
    /* Muted Palette Tailwind*/
    --muted-50: #faf1ff;
    --muted-100: #ede4f2;
    --muted-200: #e5c7f5;
    --muted-300: #c8abd7;
    --muted-400: #a286b0;
    --muted-500: #80668e;
    --muted-600: #694f76;
    --muted-700: #553c62;
    --muted-800: #422a4e;
    --muted-900: #2e2035;
    --muted-950: #1d1023

    /* Muted Palette Tailwind*/
    --shifted-50: #ffe1f5;
    --shifted-100: #ffd4e9;
    --shifted-200: #ff9ada;
    --shifted-300: #ff7dc3;
    --shifted-400: #e157a5;
    --shifted-500: #b83489;
    --shifted-600: #9b1476;
    --shifted-700: #820065;
    --shifted-800: #6a0054;
    --shifted-900: #4a003d;
    --shifted-950: #34002c;
}


.panel {
  --bulma-panel-item-border: 1px solid hsl(0, 0%, 100%);
  --bulma-panel-tab-border-bottom-color: hsl(0, 0%, 100%);
  --bulma-panel-tab-border-bottom-width: 5px;
}

p {
  font-family: 'Adamina';
  font-weight: 600;
}

#hero-home {
  --bulma-hero-body-padding: 10rem 0rem 0rem;
  --bulma-hero-body-padding-large: 17rem 0rem 0rem;
    background-image: url("imgs/bhoward.jpg");
    background-origin: padding-box;
    background-position: 30% 70%;
    background-size: cover;
}

#hero-poetry {
  --bulma-hero-body-padding: 10rem 0rem 0rem;
  --bulma-hero-body-padding-large: 17rem 0rem 0rem;
    background-image: url("imgs/janelleedit.jpg");
    background-origin: padding-box;
    background-position: 30% 60%;
    background-size: cover;
}

#hero-memory {
  --bulma-hero-body-padding: 10rem 0rem 0rem;
  --bulma-hero-body-padding-large: 17rem 0rem 0rem;
    background-image: url("imgs/sowhat2.jpg");
    background-origin: padding-box;
    background-position: 30% 60%;
    background-size: cover;
}


.footer {
  --bulma-footer-padding: 1.5rem;
  background-color: var(--shifted-100);
}

.footer span {
font-variant: all-small-caps;
}

.navbar-item p {
  color: var(--muted-100);
  font-style: italic;
  padding: 1rem;
}

.hero-body .title {
  font-family: 'Bullvone';
  color: var(--shifted-100);
  font-size: 4em;
  letter-spacing: .12rem;
  padding: 15px 5px 0px 5px;
}


h1, h2, li {
  font-family: 'Silkscreen';
}

header {
    min-height: 100%;
    background-color: var(--muted-200);
}
article {
    min-height: 100%;
    background-color: var(--muted-200);
}

aside {
    min-height: 75%;
    background-color: var(--muted-200);
}


figcaption {
    font-size: small;
}

.cell {
  background-color: var(--muted-300);
  padding: 1em;
  text-align: center;
}

.card__container {
  width: 100%;
  height: 100%;
  perspective: 900px;
}

.card__content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 2s;
}

.card__content.is-flipped {
  transform: rotateY(180deg)
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card__back {
  transform: rotateY(180deg);
  position: relative;
  overflow: scroll;
}

.membadge img {
  object-fit: cover;
  padding: 1rem 1rem 0rem 1rem;
  position: absolute;
}

.card {
    --bulma-card-radius: 5px;
}