.hack-centre-y, .hack-centre-x, .hack-centre, #open-fixed img {
  width: fit-content;
  width: -moz-fit-content;
  position: relative; }

.hack-centre, #open-fixed img {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%; }

.hack-centre-x {
  transform: translateX(-50%);
  left: 50%; }

.hack-centre-y {
  transform: translateY(50%);
  bottom: 50%; }

#open {
  margin: auto 0; }

.flex {
  display: flex; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.black-card, .white-card {
  border-radius: 0.5rem; }

.pad-s {
  padding: 0.5rem; }

.pad-m {
  padding: 1rem; }

.bg-red {
  background-color: #ff4b4b !important; }

.bg-none {
  background: none !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

@media (prefers-color-scheme: light) {
  .big-card, .white-card {
    background-color: white; }
  #notify {
    background-color: white; }
  .black-card {
    background-color: black; }
  .content, .header {
    background-color: #eeeff3; }
  .black-card {
    color: white; }
  #notify, .big-card, #sidenav-logo p, .white-card {
    color: black; }
  .white-card {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  .big-card, .white-card {
    background-color: black; }
  #notify {
    background-color: #232323; }
  .black-card {
    background-color: white; }
  .content, .header {
    background-color: black; }
  .black-card {
    color: black !important; }
  #notify, .big-card, #sidenav-logo p, .white-card {
    color: white !important; }
  .white-card {
    border: 1px solid white; } }

@media (prefers-color-scheme: dark) {
  .invert, #notify img, #close, #page-next,
  #page-prev {
    filter: invert(1); } }

:root {
  --action-corner: 1.25rem;
  --action-padding: 1.2rem;
  --indent: 1rem; }

html {
  scroll-behavior: smooth; }

.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none; }

/* big elements */
.article-container {
  position: relative;
  padding: 6rem 2rem 2rem 2rem;
  font-size: 130%;
  line-height: normal;
  max-width: 35rem;
  /* 5rems spacing for the header */
  min-height: 100vh; }

.header {
  font-size: 130%;
  z-index: 3;
  display: flex;
  position: fixed;
  top: 0;
  padding: 1rem 0rem; }
  .header.no-sidebar {
    width: calc(100vw); }
  .header.with-sidebar {
    width: calc(100vw - 250px); }

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(250, 250, 250, 0.9);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 4.5rem;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  border-right: 1px solid gray; }

/* The navigation menu links */
.sidebar-link {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  color: #3c3c3c;
  display: block;
  transition: 0.3s; }

.sidebar-heading {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  color: #141414;
  display: block;
  transition: 0.3s;
  font-size: 25px;
  font-size: 1.7rem; }

/* When you mouse over the navigation links, change their color */
.sidebar-link:hover,
.sidebar-heading:hover {
  color: grey; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 1rem;
  right: 1rem; }

.sidenav.closed {
  margin-left: -250px; }

.sidenav.opened {
  margin-left: 0px; }

#sidenav-logo {
  display: flex; }
  #sidenav-logo p {
    display: block;
    margin: auto 1rem auto 0;
    flex: auto;
    font-size: 1.7rem; }
  #sidenav-logo img {
    display: block;
    max-width: 30%;
    margin: 0.5rem 1rem;
    flex: initial; }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
.content {
  margin-left: 250px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  position: relative; }

#closebtn {
  visibility: hidden;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem; }

#page-next,
#page-prev {
  width: 1rem;
  height: 1rem; }

#open-fixed {
  top: 1.4rem;
  left: 1.4rem;
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 4;
  background-color: black;
  border-radius: 25%;
  border: 1px solid white; }
  #open-fixed img {
    width: 1rem;
    height: 1rem; }

#open {
  width: 1rem;
  height: 1rem;
  visibility: hidden;
  z-index: 4;
  line-height: 1rem; }
  #open.oncard {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    background-color: black;
    border-radius: 25%;
    border: 1px solid white; }
    #open.oncard img {
      height: 1rem;
      margin: 0.75rem; }
  #open img {
    width: 1rem; }

.always-on {
  visibility: visible !important; }

#close {
  width: 1rem;
  height: 1rem; }

.transparent {
  background: none !important; }

.inherit-white * {
  color: white; }

/* prevents the header covering the action on hash links */
.hash {
  position: relative;
  top: -6.5rem; }

#glyph-bg {
  min-width: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background-color: black;
  display: inline-block;
  margin: 0 1rem;
  /* padding:.4rem; */ }

#glyph-icon {
  max-width: 2.2rem;
  max-height: 2.2rem;
  filter: invert(1); }

/* submit page styling */
.centralize {
  margin: 2rem auto;
  display: block;
  width: fit-content;
  width: -moz-fit-content; }

.centralize.top {
  margin-top: 20vh; }

.helptext {
  visibility: hidden; }

#id_iCloudLink::placeholder {
  content: "test";
  color: gainsboro; }

input {
  border-radius: 0.3rem;
  border: 1px solid darkgray; }

input[type="submit"] {
  color: white;
  background-color: rgba(30, 30, 90, 0.9); }

#splash {
  max-width: 20rem;
  margin: 0;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); }

.form-error ul {
  list-style: none;
  padding: 0;
  margin-top: -1.5rem; }

.form-error li {
  color: white; }

/* icon background */
.gridiron {
  position: fixed;
  top: -100rem;
  left: -10rem;
  display: grid;
  grid-template-columns: repeat(40, 5rem);
  grid-template-rows: repeat(40, 5rem);
  transform: rotate(-45deg);
  z-index: -2; }
  .gridiron.huge {
    top: -60rem;
    left: -60rem;
    grid-template-columns: repeat(80, 5rem);
    grid-template-rows: repeat(80, 5rem); }

.bg-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 20%;
  grid-row-end: span 2;
  grid-column-end: span 2;
  margin: auto; }

.grid-padding {
  grid-row-end: span 2;
  grid-column-start: 1; }

#gp1 {
  grid-row-start: 1; }

#gp2 {
  grid-row-start: 5; }

#gp3 {
  grid-row-start: 9; }

#gp4 {
  grid-row-start: 13; }

#gp5 {
  grid-row-start: 17; }

#gp6 {
  grid-row-start: 21; }

#gp7 {
  grid-row-start: 25; }

#gp8 {
  grid-row-start: 29; }

#gp9 {
  grid-row-start: 33; }

#gp10 {
  grid-row-start: 37; }

.bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }
  .bg-darkmode {
    z-index: -3; }
  .bg-blue {
    z-index: -1; }

/* big card container */
.big-card {
  margin: 2rem auto;
  border-radius: 2rem;
  padding: 2rem;
  max-width: calc(100vw - 250px - 4rem);
  flex: auto;
  position: relative; }

/* pagination */
#paginate {
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto; }

#page-prev {
  transform: rotate(180deg); }

#page-current {
  margin: 0 1rem; }

/* list of shortcuts */
.shortcut-list {
  list-style: none;
  padding: 0; }

.shortcut-link {
  font-size: 1.2rem; }

/* reddit post page branding */
#reddit-post {
  font-size: 1.5rem; }

#reddit-post::before {
  content: "r/"; }

#reddit-light,
#reddit-dark {
  max-height: 15rem; }

/* loading image */
#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30vh;
  width: 30vh;
  padding: 5vh;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px white;
  display: none; }

#qrcode img {
  width: 100%;
  height: 100%; }

#path1 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 750;
  animation: dash1 4s linear -2.75s infinite; }

#path2 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 770;
  animation: dash2 4s linear 0s infinite; }

.bg-blue,
.bg-darkmode {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0; }

/* 
# notification
*/
#notify {
  z-index: 10;
  font-weight: 600;
  height: 2rem;
  top: -3rem;
  border-radius: 1rem;
  padding: 0 1rem 0 0.7rem;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25));
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s; }
  #notify img {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    display: none; }
  #notify span {
    position: relative;
    bottom: 0.3rem; }
  #notify.with-sidebar {
    /* 50% of sidebar & right nav */
    left: calc(50% + 125px - 2.5rem); }

@keyframes dash1 {
  0% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 1500; } }

@keyframes dash2 {
  0% {
    stroke-dashoffset: 1500; }
  100% {
    stroke-dashoffset: 0; } }

@media (prefers-color-scheme: dark) {
  .bg-darkmode {
    background: #333; }
  .bg-blue {
    background-color: rgba(10, 10, 45, 0.6); }
  #mySidenav {
    background-color: rgba(40, 40, 40, 0.95);
    border-right: 1px solid white; }
  .sidebar-heading {
    color: aliceblue; }
  .sidebar-link {
    color: #f1f1f1; }
  .content {
    background-color: black; }
  #reddit-light {
    display: none; }
  #reddit-dark {
    display: block; } }

@media (prefers-color-scheme: light) {
  .bg-darkmode {
    background: none; }
  .bg-blue {
    background-color: rgba(30, 30, 90, 0.8); }
  #reddit-light {
    display: block; }
  #reddit-dark {
    display: none; } }

@media only screen and (max-width: 768px) {
  .content {
    margin-left: 0; }
  #open,
  #closebtn {
    visibility: visible; }
  .sidenav {
    margin-left: -250px; }
  #splash {
    max-width: 90vw; }
  .big-card {
    max-width: 90vw; } }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 2rem; }
  .sidebar-heading,
  .sidebar-link {
    font-size: 1.2rem;
    padding-top: 0;
    padding-bottom: 0; } }

@media only screen and (max-width: 1280px) {
  #reddit-post::before {
    content: ""; }
  #reddit-post * {
    display: block;
    margin: 0 auto 0.5rem auto; } }

.flex {
  display: flex;
  flex-wrap: wrap; }

.brand-logo {
  width: 5rem; }

.brand-container {
  flex: 1 1 10rem;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.2rem; }

.brand-container a {
  color: black; }

/* dark mode settings */
@media (prefers-color-scheme: dark) {
  .brand-container a {
    color: white; }
  #github {
    filter: invert(1); } }