/* Accessibility 
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}*/

:root {
  box-sizing: content-box;
  font-size: 16pt;
  /* >===<< Colour Palette >>===< */
  --kipBlack1: #131316;
  --kipBlack2: #1e1e24;
  --kipBlack3: #2e2e38;
  --kipBlack4: #41414e;
  --kipBlack5: #4a4a59;
  --kipRed1: #a81021;
  --kipRed2: #cd1329;
  --kipRed3: #ea1f37;
  --kipRed4: #ec3247;
  --kipRed5: #ee4458;
  --kipPink1: #ef5668;
  --kipPink2: #f16a79;
  --kipPink3: #f37c8a;
  --kipPink4: #f58f9b;
  --kipPink5: #f6a2ac;
  --kipBeige1: #cd8665;
  --kipBeige2: #d79e84;
  --kipBeige3: #e1b6a3;
  --kipBeige4: #ebcfc1;
  --kipBeige5: #f5e7e0;
  --kipBrown1: #7b4228;
  --kipBrown2: #9a5332;
  --kipBrown3: #ae5e39;
  --kipBrown4: #c36e46;
  --kipBrown5: #c87a56;
  --hyaBlack1: #090b0b;
  --hyaBlack2: #131616;
  --hyaBlack3: #1c2121;
  --hyaBlack4: #272d2d;
  --hyaBlack5: #2f3737;
  --hyaGrey1: #26282b;
  --hyaGrey2: #3a3c41;
  --hyaGrey3: #4d5057;
  --hyaGrey4: #60646C;
  --hyaGrey5: #696e77;
  --hyaTan1: #c88956;
  --hyaTan2: #cc9262;
  --hyaTan3: #d29f74;
  --hyaTan4: #d7a984;
  --hyaTan5: #e1bfa3;
  --hyaBeige1: #ffcc99;
  --hyaBeige2: #ffd6ad;
  --hyaBeige3: #ffe1c2;
  --hyaBeige4: #ffebd6;
  --hyaBeige5: #fff5eb;
  --hyaBlue1: #5c72ff;
  --hyaBlue2: #7083ff;
  --hyaBlue3: #788bff;
  --hyaBlue4: #99a7ff;
  --hyaBlue5: #adb8ff;
  --night: linear-gradient(180deg, #000000 0.000%, #09091f 15.000%, #1e183b 50.000%, #302244 75.000%, #5f3d4d 90.000%, #805c4b 100.000%);
  --day: linear-gradient(180deg, #c28cff 0.000%, #84b9ff 15.000%, #ffd2df 100.000%);
  /* >===<< Default Colours on Load >>===< */
  --sky: var(--day);
  --text: var(--kipBlack2);
  --box: var(--kipBeige2);
  --border: var(--kipBeige1);
  --emph: var(--kipBrown1);
}
/* https://codepen.io/gcyrillus/pen/DOmjxV */

/* >===<<Theme Options (to implement later)>>===<
[data-theme="day"] :root {
  --sky: var(--day);
  --text: var(--kipBlack2);
  --box: var(--kipBeige2);
  --border: var(--kipBeige1);
  --emph: var(--kipBrown1);
}

[data-theme="night"] :root {
  --sky: var(--night);
  --text: var(--kipBeige4);
  --box: var(--hyaBlack2);
  --border: var(--hyaGrey3);
  --emph: var(--hyaBlue5);
}*/

/* Site basics */
body {
  font-family: "Fredoka", sans-serif;
  font-weight: 450;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  margin: 0;
  color: var(--text);
  background: var(--sky) no-repeat;
  background-attachment: fixed;
  height: 100vh;
}


.text-link {
  text-decoration: underline dotted 3px;
  font-weight: 550; 
  color: var(--text);
}

.text-link:hover {
  text-decoration: underline solid 3px var(--emph);
}

.box-link:hover {
  box-shadow: 0 0 10px 5px var(--emph);
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Jua", sans-serif;
  margin: 0;
}

:focus {
  color: var(--emph);
  outline: 2px solid var(--emph);
  outline-offset: 2px;
}

::selection {
  color: var(--emph);
  
}

/* page layout */
#page-container {
     display: flex;
     display: -webkit-flex;
     flex-direction: column;
     min-height: 100vh;
}

#content-wrap {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     align-items: center;
}

.simpleBox {
     background-color: var(--box);
     border: solid 5px var(--border);
     padding: 5px;
}

.donut-text {
     color: var(--kipBeige2);
     text-shadow: 0 3px var(--kipBrown5), 0 6px var(--kipBrown3), 0 9px 10px #000;
     text-align: center;
}

.donut-box {
     padding: 10px;
     margin: 15px 10px;
     background-color: var(--kipBeige2);
     box-shadow: 0 3px var(--kipBrown5), 0 6px var(--kipBrown3), 0 9px 10px #000;
     border-radius: 25px;
}

footer {
     width: 100%;
     background-color: var(--box); 
     border-top: 5px solid var(--border);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}

footer small {
     margin: 5px;
}

.hosted {
     display: flex;
     flex-direction: row;
     align-items: center;
}

/* On medium screens */
@media (max-width: 1080px) {
}

/* On small screens */
@media (max-width: 640px) {
  footer {
    flex-direction: column;
  }
}