:root {
  /* Prefer Dark mode by default, but support both. */
  color-scheme: dark light;
  --color1: hsl(317.7, 17.423%, 89.568%);
  --color2: hsl(220.74, 50%, 20%);
  --color1-transparent: hsla(317.7, 17.423%, 89.568%, 85%);
  --color2-transparent: hsla(220.74, 50%, 20%, 60%);
  --background: light-dark(var(--color1), var(--color2));
  --background-transparent: light-dark(
    var(--color1-transparent),
    var(--color2-transparent)
  );
  --foreground: light-dark(var(--color2), var(--color1));
  --color1-warning: hsl(0, 75%, 70%);
  --color2-warning: hsl(0, 52%, 35%);
  --foreground-warning: light-dark(var(--color2-warning), var(--color1-warning));
  --spacing: 6px;
  --spacing-large: calc(var(--spacing) * 1.5);
  --spacing-larger: calc(var(--spacing) * 2);
  --spacing-largest: calc(var(--spacing) * 3.5);
  --radius: 4px;
  --radius-small: calc(var(--radius) / 4);
  --radius-large: calc(var(--radius) * 2);
  background-image: url("background.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
  padding-inline: var(--spacing-large);
  box-shadow: inset 0 0 0 100vw var(--background-transparent);
  color: var(--foreground);
  font-family: InterVariable, Inter, system-ui;
  font-feature-settings:
    "liga" 1,
    "calt" 1,
    "tnum" 1,
    "case" 1,
    "zero" 1,
    "ss01" 1,
    "ss02" 1;
  --font-size: 1.15em;
  font-size: var(--font-size);
  font-weight: bold;
}

body {
  /* background-color: var(--background); */
  min-height: 100vh;
  max-height: fit-content;
  margin: 0px;
  padding: 0px;
}

header {
  text-align: center;
  margin-block: calc(var(--spacing-largest) * 2);
}

img {
  max-width: 100%!important;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  padding: 0px;
  margin-inline: 0px;
  margin-block: var(--spacing-larger);
  text-wrap: wrap;
}

p {
  margin-block: var(--spacing-largest);
  text-wrap: wrap;
}

code {
  font-size: calc(var(--font-size) * 0.75);
  /* background: rgba(31, 32, 46, 75%); */
  background: var(--background);
  border: 1px solid rgba(55,55,69, 75%);
  border-radius: 5px;
  padding: 0em 0.5em;
}

div.wrapper {
  max-width: 730px;
  margin-inline: auto;
}

blockquote {
  margin-inline: 0px;
  padding-inline: var(--spacing-larger);
  border-left: 4px solid var(--foreground);
}

blockquote.warning {
  color: var(--foreground-warning) !important;
  border-left: 4px solid var(--foreground-warning) !important;
  a, a:visited {
    color: var(--foreground-warning);
    border-left: none;
  }
  a:hover, a:hover:visited {
    box-shadow: 0 0 0 var(--spacing-large) var(--foreground-warning);
    background-color: var(--foreground-warning);
    color: var(--background);
  }
}

.ph-bold {
  font-size: 1.2rem;
  vertical-align: middle;
}

a,
a:visited {
  color: var(--foreground);
  transition: 0.25s;
  text-decoration: underline dotted;
}

a:hover,
a:visited:hover {
  background-color: var(--foreground);
  color: var(--background);
  box-shadow: 0 0 0 var(--spacing-large) var(--foreground);
}

ul {
  padding-inline: 1.5rem;
}

li {
  padding-start: 1.5rem;
}

ul.buttons {
  display: flex;
  gap: var(--spacing);
  list-style-type: none;
  padding-inline: 0px;
}

ul.buttons li {
  border: 1px solid var(--foreground);
  padding: var(--spacing-large);
}

ul.buttons li div {
  transition: 0.25s;
}

ul.buttons li div:hover {
  box-shadow: 0 0 0 var(--spacing-large) var(--foreground);
  background-color: var(--foreground);
}

ul.buttons li div:hover a,
ul.buttons li div:hover a:visited {
  color: var(--background);
}

ul.buttons li a:hover,
ul.buttons li a:visited:hover {
  box-shadow: unset;
  color: inherit;
  background-color: inherit;
}

details {
  transition: 0.25s;
  margin-top: var(--spacing-large);
}

details[open] {
  background-color: var(--foreground);
  color: var(--background);
  box-shadow: 0 0 0 var(--spacing-large) var(--foreground);
}

@media screen and (max-width: 730px) {
  ul.buttons {
    flex-direction: column;
    gap: var(--spacing-larger);
  }
  ul.buttons li {
    margin-block: 0px;
  }
}

.guideimage {
  min-width: 40%;
  max-width: 100%;
}

ul.buttons li{
display: flex;
}
ul.buttons li div{
flex: auto;
}