@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

.inter-tight-title {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: light;
  font-style: normal;
}

button {
    background-color: transparent;
    border: 1px solid #d8dee9;
    border-radius: 6px;
    color: #d8dee9;
    padding: 3px 6px;
}

button:hover {
    background-color: #d8dee9;
    color: #2e3440;
}

html
{
  min-height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background: radial-gradient(100% 100% at 4% 3%, #2e3440 0%, transparent), radial-gradient(100% 100% at var(--g2-1-x-position) var(--g2-1-y-position), #b48ead -32%, transparent), radial-gradient(100% 100% at var(--g2-2-x-position) var(--g2-2-y-position), #81a1c1 0%, transparent), #2e3440;
  animation-name: g-2;
  animation-iteration-count: infinite;
  animation-duration: 20s;
  transition-timing-function: ease-in-out
}


@property --g2-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 87.96875%; }

@property --g2-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 91.1328125%; }

@property --g2-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 13.398437500000002%; }

@property --g2-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 82.734375%; }


:root {

--g2-1-x-position: 87.96875%

--g2-1-y-position: 91.1328125%

--g2-2-x-position: 13.398437500000002%

--g2-2-y-position: 82.734375%

}


@keyframes g-2 { 50% { --g2-1-x-position: 15%; --g2-1-y-position: 15%; --g2-2-x-position: 61.21093749999999%; --g2-2-y-position: 13.750000000000002%; } }



.banner
{
  font-family: "Inter Tight";
  color: white;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  margin: 1em 0px 0px 0px;
  width: 98%;
  border: 0px;
  padding: 0px 15px;
  background-color: #d8dee932;
  backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0.75rem #2e3440);
  box-sizing: border-box;
  border-radius: 10px;
  transition: border-radius 0.2s, width 0.2s, margin 0.2s;\
}


.banner.scrolled
{
    top: 0%;
    width: 100%;
    border-radius: 0px;
    transition: border-radius 0.2s, width 0.2s, margin 0.2s;
    margin: 0px 0px 0px 0px;
}

.page
{
  font-family: "Inter Tight";
  margin-top: 80px;
  color: white;
  
  margin: 80px auto;

}

@media screen and (width <= 55rem) {
  .page {
    width: 85%;
  }
}

@media screen and (width > 55rem) {
  .page {
    width: 50%;
  }
}

.miniclock
{
  float: right;
}

h1
{
  color:inherit;
}

.navicon
{
  width: 1.5em;
  height: 1.5em;
  margin: -5px 4px;
  padding: 0px;
}