html, body, #magazine, #controller {
   width: 100%;
   height: 100%;
   margin: 0;
}

html, body {
   background: #0a0a0a;
   color: white;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

header span.page-title {
   font-weight: bold
}

#flipbook, #controller {
   overflow: hidden;
}

#controller {
   position: absolute;
   top: 0
}

.page-wrapper {
   width: 100%;
   height: 100%;
}

header span.page-title::after {
   content: "";
   border-right: 1px solid var(--header-text);
   margin: 0 0.6rem 0 1rem
}

.header-container {
   margin: auto
}

.flip-button {
   outline: none;
   border: none;
   background: transparent;
   height: inherit;
   color: white;
   border-radius: 100%;
   cursor: pointer
}

#flip-previous, #flip-next {
   z-index: 0;
   top: 0;
   position: absolute;
   transition: 0.5s ease-in-out all;
   filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 3px black)
}

#loading-screen {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   background: #0a0a0a;
   z-index: 100
}

.loading-spinner {
   margin: auto
}

.loading-spinner svg {
   width: 64px;
   height: 64px
}

#flip-previous {
   left: 10px;
}

#flip-next {
   right: 10px;
}

#flip-previous:hover {
   left: 15px
}

#flip-next:hover {
   right: 15px
}

.hidden {
   display: none
}

header {
   padding: 1rem;
   display: flex;
   position: relative;
   z-index: 10;
   background: var(--header-bg);
   color: var(--header-text)
}

#magazine {
   display: flex;
   justify-content: center;
   align-content: center;
   height: auto;
}

.page {
   background: white
}

.hard {
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 6rem;
   font-family: "Inter", sans-serif;
   background: #0a3868 !important;
   box-shadow: inset 0 0 8px 4px #072545 !important;
   user-select: none
}

#loading-screen.fade {
   animation: fade 0.5s ease-in-out forwards
}

@keyframes fade {
   from {
      opacity: 1
   }
   to {
      opacity: 0;
      z-index: 0
   }
}