/* background */

@-webkit-keyframes background {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -420px 270px;
   }
}

@-moz-keyframes background {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -420px 270px;
   }
}

@-ms-keyframes background {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -420px 270px;
   }
}

@-o-keyframes background {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -420px 270px;
   }
}

@keyframes background {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -420px 270px;
   }
}

body {
   -webkit-animation: background 33s linear infinite;
   -moz-animation: background 33s linear infinite;
   -ms-animation: background 33s linear infinite;
   -o-animation: background 33s linear infinite;
   animation: background 33s linear infinite;
   background-attachment: fixed;
   background-image: url("https://cdn.nuzzles.dev/backgrounds/background.png");
   background-repeat: repeat;
}



/* font */

@font-face {
   src: url("https://cdn.nuzzles.dev/fonts/ubuntu/regular.ttf");
   font-family: "Ubuntu";
   font-size: normal;
   font-weight: normal;
}

@font-face {
   src: url("https://cdn.nuzzles.dev/fonts/ubuntu/bold.ttf");
   font-family: "Ubuntu";
   font-size: large;
   font-weight: bold;
}

@font-face {
   src: url("https://cdn.nuzzles.dev/fonts/ubuntu_mono/regular.ttf");
   font-family: "Ubuntu Mono";
   font-size: normal;
   font-weight: normal;
}

@font-face {
   src: url("https://cdn.nuzzles.dev/fonts/russell_square/regular.ttf");
   font-family: "Russell Square";
   font-size: normal;
   font-weight: normal;
}

* {
   font-family: "Ubuntu";
}

h1 {
   font-size: 1.5em;
   font-weight: bold;
}
 
h2 {
   font-size: 1.25em;
   font-weight: bold;
}

h3 {
   font-size: 1em;
   font-weight: bold;
}



/* text */

p {
   margin: 0;
}

ul {
   padding-left: 2em;
}

li {
   padding: 0.25em 0;
}

li::marker {
   color: #808080;
}

code {
   background: hsla(0, 0%, 0%, 0.05);
   border: 1px solid hsla(0, 0%, 0%, 0.10);
   border-radius: 4px;
   font-family: "Ubuntu Mono" !important;
   padding: 0 0.2em;
}

time {
   background: hsla(0, 0%, 0%, 0.075);
   border: 1px solid hsla(0, 0%, 0%, 0.10);
   border-radius: 4px;
   padding: 0 0.2em;
   position: relative;
}

* > .popup {
   background-color: #e6e6e6;
   border: 1px solid hsla(0, 0%, 0%, 0.10);
   border-radius: 4px;
   bottom: 1.5em;
   display: none;
   margin: 0 calc(-1px - 0.2em);
   padding: 0 0.2em;
   position: absolute;
   visibility: hidden;
}

*:hover > .popup:not(#magicalbunny31-button-popup) {
   display: inline;
   width: max-content;
   visibility: visible;
}

.corner-border:has(> .button:hover), .corner-border:has(> .large-button:hover:not(#email)), .media-corner-border:has(> a:hover) {
   filter: brightness(90%);
   scale: 110%;
}

a:link:not(.button, .large-button, .footer-item), a:visited:not(.button, .large-button, .footer-item) {
   color: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);
   text-decoration: none;
}

a:hover:not(.button, .large-button, .footer-item) {
   text-decoration: underline;
}



/* images */

.circle-border {
   border-radius: 100%;
}



/* scroll anchors */

html {
   scroll-behavior: smooth;
}

a.scroll-anchor > * {
   color: black;
}

a.scroll-anchor:hover {
   text-decoration: none;
}

a.scroll-anchor:focus {
   outline: none;
}



/* layout */

* {
   box-sizing: border-box;
}

.centre {
   padding: 0 10%;
}

.box {
   display: flow-root; /* if the display seems fucked up, this may be the line that's causing it ! */
   padding: 1em;
   position: relative;
   background-color: #e6e6e6;
}

hr {
   width: 100%;
}

.empty {
   padding: 1em;
}



/* borders */

.corner-border {
   --border-thickness: 0.25em;
   --border-colour: #606060;
   --border-width: 1em;
   --_g: #0000 90deg, var(--border-colour) 0;
   --_p: var(--border-width) var(--border-width) border-box no-repeat;
   align-items: center;
   background:
      conic-gradient(from 90deg  at top    var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    0    / var(--_p),
      conic-gradient(from 180deg at top    var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 0    / var(--_p),
      conic-gradient(from 0deg   at bottom var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    100% / var(--_p),
      conic-gradient(from -90deg at bottom var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 100% / var(--_p);
   border: var(--border-thickness) solid #0000;
   display: flex;
   float: left;
   justify-content: center;
}

.media-corner-border {
   --border-thickness: 0.25em;
   --border-colour: #606060;
   --border-width: 1em;
   --_g: #0000 90deg, var(--border-colour) 0;
   --_p: var(--border-width) var(--border-width) border-box no-repeat;
   align-items: center;
   background:
      conic-gradient(from 90deg  at top    var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    0    / var(--_p),
      conic-gradient(from 180deg at top    var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 0    / var(--_p),
      conic-gradient(from 0deg   at bottom var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    100% / var(--_p),
      conic-gradient(from -90deg at bottom var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 100% / var(--_p);
   border: var(--border-thickness) solid #0000;
   display: border;
   justify-content: center;
   line-height: 0;
}

.large-corner-border {
   --border-thickness: 0.5em;
   --border-colour: #606060;
   --border-width: 2em;
   --_g: #0000 90deg, var(--border-colour) 0;
   --_p: var(--border-width) var(--border-width) border-box no-repeat;
   border: var(--border-thickness) solid #0000;
   background:
      conic-gradient(from 90deg  at top    var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    0    / var(--_p),
      conic-gradient(from 180deg at top    var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 0    / var(--_p),
      conic-gradient(from 0deg   at bottom var(--border-thickness) left  var(--border-thickness), var(--_g)) 0    100% / var(--_p),
      conic-gradient(from -90deg at bottom var(--border-thickness) right var(--border-thickness), var(--_g)) 100% 100% / var(--_p);
   position: relative;
}

.border {
   --border-colour: #606060;
   outline: 0.15em solid var(--border-colour);
}

.large-border {
   --border-colour: #606060;
   outline: 0.25em solid var(--border-colour);
}



/* main sections */

section {
   display: -webkit-flex;
   display: flex;
}

article {
   display: flex;
   -webkit-flex: 3;
   -ms-flex: 3;
   flex: 3;
   flex-direction: column;
   gap: 1em;
   padding: 1em;
}



/* sidebar */

.navigator {
   order: 621;
   position: sticky;
   top: 1.5em;
}

nav {
   display: flex;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   flex-direction: column;
   gap: 1em;
   padding: 1em;
}


/* groups */

.list {
   column-gap: 0.2em;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   row-gap: 0.2em;
}

.grid {
   column-gap: 0.2em;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   row-gap: 0.2em;
}

.row {
   display: flex;
   gap: 0.2em;
}

.column {
   display: flex;
   flex-direction: column;
   flex: 25%;
   gap: 0.2em;
}



/* buttons */

.button {
   align-items: center;
   background-color: #ffffff;
   border: none;
   color: black;
   column-gap: 0.5em;
   cursor: pointer;
   display: flex;
   height: 100%;
   padding: 10px 16px;
   text-decoration: none;
   width: 100%;
}

.button.disabled {
   background-color: #808080;
   color: white;
   pointer-events: none;
}



/* large buttons */

.large-button {
   align-items: center;
   background-color: #ffffff;
   border: none;
   color: black;
   column-gap: 0.5em;
   cursor: pointer;
   display: flex;
   height: 100%;
   padding: 10px 16px;
   text-decoration: none;
   width: 100%;
}

.large-button img, .large-button video {
   float: left;
   height: 2em;
}



/* tab */

.tab-heading-container {
   display: grid;
}

.tab-heading {
   display: flex;
   flex-direction: row;
   gap: 0.5em;
   overflow: scroll;
   padding: 0.5em;
}

.tab-item {
   text-wrap: nowrap;
}

.tab-heading .button.disabled {
   background-color: var(--disabled-colour);
   cursor: default;
}



/* footer */

footer {
   padding: 1em;
}

.info {
   font-size: 0.75em;
   color: #606060;
}

.info a, .info span {
   color: #808080;
   text-decoration: none;
}

.info a:hover {
   cursor: pointer;
}

.info a:hover:not(#splash) {
   text-decoration: underline;
}

#splash {
   background: #f60000;
   background: -webkit-linear-gradient(left, #ff8c00 , #ffee00, #4de94c, #3783ff, #4815aa, #fe83c6);
   background: -moz-linear-gradient(right, #ff8c00 , #ffee00, #4de94c, #3783ff, #4815aa, #fe83c6);
   background: -o-linear-gradient(right, #ff8c00 , #ffee00, #4de94c, #3783ff, #4815aa, #fe83c6);
   background: linear-gradient(to right, #ff8c00 , #ffee00, #4de94c, #3783ff, #4815aa, #fe83c6);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   user-select: none;
}



/* modal */

#modal-background {
   background: hsla(0, 0%, 0%, 0.5);
   bottom: 0;
   display: none;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 2;
}

#modal {
   left: 50%;
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
   z-index: 2;
}

#modal .box-border {
   margin-bottom: 0;
}

#modal-content {
   display: inline-block;
   max-height: 80vh;
   overflow: scroll;
   overflow-wrap: anywhere;
   width: 100%;
}

#modal .grid:has(#close-modal) {
   grid-template-columns: repeat(1, minmax(0, 1fr));
}



/* media */

img, video {
   width: 100%;
}

.media-corner-border:has(.thumbnail) {
   height: auto;
   float: right;
   width: auto;
}

.thumbnail {
   position: relative;
   width: 10em;
}

.secondary-thumbnail {
   clear: right;
   margin-top: 1em !important;
}

.banner:not(.thumbnail) {
   margin-top: 1em;
}

.thumbnail.banner {
   width: 20em;
}

figure {
   margin: 0;
}

a img {
   text-decoration: none;
}

.media-corner-border:has(.youtube-video) {
   aspect-ratio: 16 / 9;
}

.youtube-video {
   height: 100%;
   width: 100%;
}



/* emojis */

.emoji {
   height: 1.25em;
   vertical-align: middle;
   width: auto;
}

.inline-button-emoji {
   float: none !important;
   height: 1.25em !important;
}



/* responsive web design */

.mobile {
   display: none;
}

@media only screen and (max-width: 750px) {
   .desktop {
      display: none;
   }

   .mobile {
      display: block;
   }

   ul {
      padding-left: 1.25em;
   }

   .grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .thumbnail {
      width: 5em !important
   }

   .centre, article {
      padding: 0 !important;
   }

   section {
      -webkit-flex-direction: column;
      flex-direction: column;
   }

   .navigator {
      position: unset;
      top: 0;
   }

   #modal {
      height: 100% !important;
      left: 0 !important;
      top: 0 !important;
      transform: none !important;
      width: 100% !important;
   }

   #modal > .large-corner-border, #modal > .large-corner-border > .large-border {
      height: 100% !important;
      width: 100% !important;
   }
}