cyber alliance css draft 22

:root {
  --blood: #ef5956;
  --crimson: #d33131;
  --light: #ffffff;
}

html {
  font: 16px/1 system-ui;
  height: 100%;
}

body {
  margin: 0;
  padding: 5rem;
}

header {}

h1 {
  color: var(--crimson);
  font-size: 5rem;
  font-weight: 1000;
  margin: 0 0 2rem;
}

abbr {
  display: inline-block;
  text-decoration: none;
}

p {
  line-height: 1.5;
  margin: 0 0 1rem;
}

span {
  display: inline-block;
}

time {
  display: inline-block;
}

hr {
  background: var(--crimson);
  border: 0;
  height: .2rem;
  margin: 0 0 1rem;
}

main {}

section {}

h2 {
  color: var(--crimson);
  font-size: 2rem;
  font-weight: 1000;
  margin: 0 0 1rem;
}

details {
  border: .2rem solid var(--crimson);
}

summary {
  background: var(--blood);
  color: var(--light);
  cursor: pointer;
  list-style: none;
  padding: 1rem;
}

details[open] summary {
  background: var(--crimson);
}

.detailsBox {
  padding: 1rem;
}

nav {}

ol {
  margin: 0;
  padding-left: 1rem;
}

li {}

li::marker {
  line-height: 1.5;
}

a {
  color: var(--crimson);
  display: inline-block;
  line-height: 1.5;
  text-decoration-thickness: .2rem;
}

a:hover {
  text-decoration: none;
}

footer {}

@media (min-width: 1000px) {
  html {
    background: var(--blood);
    display: grid;
    justify-content: center;
  }

  body {
    background: var(--light);
    border-left: .2rem solid var(--crimson);
    border-right: .2rem solid var(--crimson);
    box-sizing: border-box;
    width: 1000px;
  }

  header {}

  h1 {}

  abbr {}

  p {}

  span {}

  time {}

  hr {}

  main {}

  section {}

  h2 {}

  details {}

  summary {}

  details[open] summary {}

  .detailsBox {}

  nav {}

  ol {}

  li {}

  a {}

  a:hover {}

  footer {}
}