/* global */

:root {
  --blue: #0032A0;
  --green: #97D700;
  --dark-green: #325900;
  --gray: #4F5A6B;
  --dark-gray: #28334A;
  --light-silver: #EBF3FC;
  --silver: #C6D6E3;

  scroll-behavior: smooth;
}

body { background-color: var(--light-silver); }

header {
  background-color: var(--blue);
  background-position: center;
  background-repeat: no-repeat;
}
header a { background-color: var(--green); }

[aria-labelledby="history"] {
  background-image: url(phrase_detail.svg);
  background-position: bottom;
  background-repeat: no-repeat;
}

.phrase { background-color: var(--dark-gray); }

.card {
  background-color: #FFF;
  box-shadow: 3px 3px 0 0 #9EB5CB;
}

.card dl.listlike dd {
  display: list-item;
  list-style-position: inside;
}

[aria-labelledby="certificates"] dt { position: relative; }
[aria-labelledby="certificates"] dt::before {
  content: url(check_circle.svg);
  position: absolute;
}

footer { background-color: var(--dark-gray); }

/* desktop only */
@media screen and (min-width: 900px) {
  header {
    background-image: url(bg-header.avif);
    background-size: 160%;
  }

  [aria-labelledby="history"] { background-size: 100% 53px; }

  [aria-labelledby="certificates"] dt::before { left: -40px; }
}

@media screen and (min-width: 900px) and (orientation: portrait) {
  header { background-size: cover; }
}

/* mobile only */
@media screen and (max-width: 899px) {
  header {
    background-image: url(bg-header-mobile.avif);
    background-position-y: top;
    background-size: cover;
  }

  [aria-labelledby="history"] { background-size: 100% 35px; }

  [aria-labelledby="certificates"] dt::before { left: -38px; }
}