:root {
  --sans-font: ibm_plex_sans;
  --serif-font: ibm_plex_serif;
  --mono-font: ibm_plex_mono;

  --color-red: #d50400;
  --color-gold: #fb9b00;
  --color-orange: #ff6a00;
  --color-yellow: #f7bd00;
  --color-hiyellow: #ffea00;
  --color-whiter: #fcd69f;
  --color-whitey: #fbe599;
  --color-tan: #d0712f;
  --color-dkred: #a52f13;
}

* {
  box-sizing: border-box;
  margin: 0;
  letter-spacing: 0.01em;
}
html {
  font-size: 10px;
  font-family: var(--sans-font);
  color: #1d2a3b;
  background-color: #e63a16;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.container.card {
  /* margin-top: 12.3rem; */
  background-color: #000000;
  border-radius: 10px;
  box-shadow: -5px -4px 47px 3px rgba(198, 198, 198, 0.3);
  text-align: center;
  padding: 3.6rem;
  /* padding-bottom: 3.6rem; */
}
.title-main {
  font-size: 3.6rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 2.1rem;
}

.main-image img, .img-container img {
  width: 100%;
}

a {
  text-decoration: none;
  color: var(--color-gold);
}

a:hover {
  text-decoration: underline;
}

section {
  font-size: 14pt;
  color: white;
  max-width: 85%;
  margin: auto;
  margin-bottom: 8ex;
}

section p {
  padding-bottom: 1ex;
  line-height: 1.5;
}

.lalign {
  text-align: left;
}

.calign {
  text-align: center;
}

section > h2 {
  margin: 1ex 0;
}

article {
  text-align: left;
}

h1 {
  color: var(--color-yellow);
  text-align: center;
  font-size: xx-large;
  font-size-adjust: 0.6;
  letter-spacing: 0.05ex;
  margin-bottom: 2.5ex;
}

h3 {
  margin: 2.5ex 0.5em;
}

li {
  padding: 0.5ex 0.25em;
}

details {
  border: 2px solid;
  margin: 0.5ex;
}

details p, details ol, details ul {
  margin: auto 2ex;
}

details:open, details[open] {
  padding-bottom: 1.5ex;
}

details:open summary, details[open] summary {
  margin-bottom: 2ex;
}

summary {
  font-size-adjust: 0.6;
  margin: 0.5ex;
  padding: 0.5ex;
  padding-left: 1.5ex;
  line-height: 1.5;
  font-weight: bold;
}

.subheading{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 3rem;
}

.card .text {
  font-size: 1.6rem;
  letter-spacing: 0.26px;
  color: #ffffff;
  margin-top: 4ex;
}
.social-widgets {
  display: flex;
  justify-content: center;
  margin-top: 2ex;
}
.widget {
  padding-left: 1em;
  padding-right: 1em;
}
.widget-img {
  max-height: 60px;
  height: 100%;
}
#widget-discord {
  filter: brightness(0) saturate(100%) invert(49%) sepia(57%) saturate(5520%) hue-rotate(223deg) brightness(97%) contrast(94%);
}
#widget-email {
  margin-top: -0.5ex;
  scale: 90%;
  filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(7472%) hue-rotate(204deg) brightness(119%) contrast(102%);
}

footer {
  color: #b1b1b1;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.7rem;
}
footer .logo svg {
  width: 145px;
  padding-left: 11px;
}
footer .left-side {
  display: flex;
  align-items: center;
}

/* Black Tie Page */

#protest-deets {
  display: grid;
  grid-auto-columns: 50% 50%;
  padding: 4ex;
  border: 1px solid;
  font-family: serif;
  letter-spacing: 0.1ex;
  margin-bottom: 15ex;
}

#protest-deets p {
  margin: 0;
  padding: 0;
}

#protest-deets p.hi {
  font-weight: bolder;
  color: var(--color-gold);
}

.deets-left {
  margin: 0.5ex 0;
  border-right: 1px solid;
  grid-column: 1;
}

.deets-right {
  margin: 0.5ex 0;
  grid-column: 2;
}

.deets-center {
  font-style: italic;
  margin: 5ex auto;
  grid-column: 1 / span 2;
  margin-top: 10ex;
}

#protest-deets h1 {
  font-size: xxx-large;
  font-size-adjust: 0.6;
  font-family: wedding_day;
  color: var(--color-yellow);
  line-height: 1.5;
  grid-column: 1 / span 2;
  margin-top: 1.75ex;
  margin-bottom: 0;
}

#protest-deets h2 {
  font-size: xx-large;
  color: var(--color-gold);
  grid-column: 1 / span 2;
  letter-spacing: initial;
  font-family: sans-serif;
  font-weight: normal;
  font-size-adjust: 0.54;
}

#protest-deets .tux-img {
  grid-column: 1 / span 2;
  width: 100%;
  overflow: hidden;
  height: 20ex;
  box-shadow: inset 0ex -0.75ex 1ex black;
  background-image: url(../images/tux.png);
  background-size: cover;
  background-position-y: -5ex;
  margin: 7.5ex auto;
}

nav.homepage {
  font-variant: all-small-caps;
  font-family: serif;
  font-size: x-large;
  margin-bottom: 2.5ex;
}

nav.homepage ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center;
}

nav.homepage li {
  margin: 0 auto;
  padding: 0;
}

nav.homepage a {
  letter-spacing: 0.05em;
  color: white;
}

nav.homepage a:hover {
  color: var(--color-gold);
}

/* Inline | https://burnresilience.network/ICEcadrille/Documentation/ */

.docstep {
  margin-bottom: 5ex;
}

.docstep p {
  padding: 1ex 1em;
}

.picList {
  display: flex;
}

.picList li {
  max-width: 33%;
  list-style: none;
}

.picList li img {
  width: 100%;
}

    /* Medias */
    @media screen and (max-width: 1024px){
      .container {max-width: 100%;}
    @media screen and (max-width: 768px){
      html {font-size: 7px;}
      .container {
        max-width: 100%;}
      .container.card {margin: 0;}
      .card .text { font-size: 1.6rem;}
    }
    @media screen and (max-width: 480px){
      html {font-size: 5.7px;}
      .container {max-width: 100%;}
      .title-main {font-size: 6.6vw;}
      /* .container.card {margin-top: 2rem;} */
      .subheading{font-size: 13px;}
      .card .text { font-size: 12px;}
      footer {flex-direction: column;}
    }
    }