:root {
  --dark-color: #121212;
  --dark-overlay-color: #121212c0;
  --darker-overlay-color: #121212bf;
  --light-color: #dddddd;
  --primary-color: #a7c957;
  --primary-color-dark: #91ae4b;
  --primary-color-light: #b8d47d;
  --alert-color: #ff0000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  color: var(--light-color);
}

main {
}

.gameArticle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75em 1.5em;
}

ol li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  position: relative;
  padding-left: 2.5em;
  font-size: 1.25em;
  font-weight: 400;
  transition: background-color 0.3s ease;
  min-width: 10em;
}

ol li::before {
  content: counter(list-item);
  font-size: 1.25em;
  font-weight: 600;
  counter-increment: list-item;
  color: var(--number-color);
  position: absolute;
  left: 0.25em;
}

h2 {
  text-align: center;
  font-size: 2em;
  font-weight: 500;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 3em;
  font-weight: 500;
  margin: 1em 0;
}

.subHeadingText {
  padding: 0;
  margin: 0;
  display: inline;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--primary-color);
}

.sketchOverlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding-top: 4em;
  background-color: var(--dark-overlay-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.sketchWrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* animated svg bacground from https://www.svgbackgrounds.com/ */
  background-color: #b3d75d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='486' height='486' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke-opacity='0.27'%3E%3Cg stroke='%23C1E864' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23c2e967' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%23c3e96a' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23c4ea6c' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23c5eb6f' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23c6eb72' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23c7ec75' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23c8ec77' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23c9ed7a' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%23cbee7d' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%23ccee7f' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23cdef82' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%23cef085' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%23cff087' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%23d0f18a' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23d1f18c' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23D2F28F' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

.inputSection {
  height: 10em;
  width: 80%;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.inputSectionDiv {
  display: flex;
  flex-direction: column;
}

.inputSectionDiv input {
  padding: 0.75em;
  font-size: 1em;
  border: none;
  border-radius: 0.5em;
  background-color: var(--darker-overlay-color);
  color: var(--light-color);
  text-align: center;
  margin-bottom: 0.5em;
}

.inputSectionDiv p {
  display: none;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 400;
  color: var(--alert-color);
  margin-bottom: 0.5em;
}

.inputSectionDiv input::placeholder {
  color: var(--light-color);
}

.inputSectionDiv button {
  transition: all 0.5s;
  padding: 0.5em;
  font-size: 1em;
  font-weight: 700;
  border: none;
  border-radius: 0.5em;
  background-color: var(--primary-color);
  color: var(--dark-color);
  cursor: pointer;
}

.inputSectionDiv button:hover {
  cursor: pointer;
  background-color: var(--primary-color-dark);
  color: var(--light-color);
  scale: 1.1;
}

.inputSectionDiv button:active {
  background-color: var(--primary-color-light);
  color: var(--dark-color);
  scale: 0.9;
}

.howTosection {
  max-width: 80%;
}

details {
  border-radius: 0.5em;
  transition: all 0.3s ease;
  background-color: var(--primary-color-light);
}

details ul {
  border-radius: 0.5em;
  padding: 1em;
  background-color: var(--primary-color-light);
  padding-left: 2em;
}

details li {
  font-size: 1em;
  font-weight: 400;
  color: var(--dark-color);
}

summary {
  transition: all 0.3s ease;
  border-radius: 0.5em;
  background-color: var(--primary-color);
  color: var(--dark-color);
  padding: 10px;
}

summary:hover {
  cursor: pointer;
  background-color: var(--primary-color-dark);
  color: var(--light-color);
}

details a {
  color: var(--dark-color);
}

.mobileArticle {
  display: none;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mobileSection {
  width: 90%;
}
.mobileSection h1 {
  font-size: 2em;
  font-weight: 500;
  margin: 1em 0;
  color: var(--primary-color);
}

.mobileSection p {
  font-size: 1.25em;
  font-weight: 400;
  color: var(--dark-color);
}

@media (max-width: 800px) {
  .gameArticle {
    display: none;
  }
  .mobileArticle {
    display: flex;
  }
}