@font-face {
  font-family: 'Monogram';
  src: url('assets/font.ttf');
}


:root {
  /* normal color scheme
  --background-gradient-begin: #000000;
  --background-gradient-end: #4d2014;
  --background-patern: url("assets/eyes.png");
  --background-patern-animation: body-background-scroll;
  --window-gradient-begin: #85261D;
  --window-gradient-end: #FF7230;
  */

  /* ice color scheme */
  --background-gradient-begin: #000000;
  --background-gradient-end: #14374d;
  --background-patern: url("assets/flakes.png");
  --background-patern-animation: body-background-scroll-ice;
  --window-gradient-begin: #1d5885;
  --window-gradient-end: #30b0ff;
}


html,
body {
  margin: 0px;
  padding: 0px;
}

html {
  height: 100%;

  background-repeat: no-repeat;
  background-attachment: fixed;

  background: linear-gradient(180deg, var(--background-gradient-end) 0%, var(--background-gradient-begin) 100%);
}

body {
  min-height: 100%;

  font-family: 'Monogram';
  font-size: 24px;

  color: #000000;
}

@keyframes body-background-scroll {
  0% {
    background-position: 0px 0px
  }

  100% {
    background-position: 128px 128px
  }
}

@keyframes body-background-scroll-ice {
  0% {
    background-position: 0px 0px
  }

  25% {
    background-position: 32px 32px
  }

  75% {
    background-position: -32px 96px
  }

  100% {
    background-position: 0px 128px
  }
}

body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: var(--background-patern);
  animation: var(--background-patern-animation) 5s linear infinite;
  opacity: 0.05;
}

.environment {
  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 32px;
  margin: 0px;
}

.window {
  justify-content: center;

  width: clamp(200px, 100%, 650px);

  padding: 2px;
  margin-bottom: 32px;

  outline: outset 1px #c3c3c3;
  border: outset 1px #ffffff;

  background-color: #c3c3c3;
}

.window .title {
  padding-left: 4px;
  margin-bottom: 2px;

  background: linear-gradient(90deg, var(--window-gradient-begin) 0%, var(--window-gradient-end) 100%);
  color: #ffffff;
}

.content,
.grid-content,
.main-content {
  padding: 10px;
}


.grid-content {
  display: flex;

  justify-content: space-around;
}

.main-content {
  display: flex;

  justify-content: space-between;
}

.nothing-here {
  display: flex;

  justify-content: center;
  align-items: center;

  background: url("assets/web.png");
  background-repeat: no-repeat;

  opacity: 0.5;

  height: 128px;
  width: 100%;
}

.nothing-here img {
  display: flex;

  justify-items: left;
  align-self: self-start;
}

.oc {
  display: flex;
  justify-content: right;

  width: 128px;

  padding-left: 8px;
}

.footer {
  color: #ffffff;
  text-align: center;
}

a {
  text-decoration: none;
  color: #3333ff;
}

a:visited {
  color: #7733ff;
}

a:hover {
  color: #9999ff;
}

h1 {
  margin: 0px;
}