/* Start https://www.cursors-4u.com */ 
* {
  cursor: url(https://cur.cursors-4u.net/games/gam-2/gam189.cur), auto !important;
} /* End https://www.cursors-4u.com */

@font-face {
  font-family: FreePixel;
  src: url(assets/font/FreePixel.ttf);
  font-weight: normal;
}

@font-face {
  font-family: FreePixel;
  src: url(assets/font/PixelOperator-Bold.ttf);
  font-weight: bold;
}

html {
  font-family: FreePixel;
  font-size: 12pt;
  color: #3f4158;
}

/* VERTICAL CENTER */
html, body {
  height: 99%;
  overflow-y: hidden;
}

body {
  background: url(assets/bg/galaxy-bg.gif);
}

* {
  box-sizing: border-box;
}

/* checks containers 
div, header, nav, aside, footer, main, details, summary {
  border: solid 1px magenta !important;
}
*/

/*
p {
  border: solid 1px magenta !important;
}
*/

* {
  box-sizing: border-box;
}

p, h1, h2, h3, h4, li {
  margin: 0px;
}

h1 {
  font-size: 16px;
}

b, strong, em, i {
  color: #589bc7;
}

u {
  text-decoration: underline wavy 1px #589bc7;
  font-weight: bold;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-box {
  position: relative;
  display: flex;
}

.nav-window {
  text-align: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 260px;
  left: -48%;
  top: -10%;
}

nav div.window-style:first-child {
  height: 150px;
}

h1.window-title + p  {
  margin-top: 5px;
}

p + h1.window-title {
  margin-top: 15px;
}

nav div.window-style {
  height: 250px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

nav div.window-style-inside {
  padding: 10px;
  overflow-y: auto;
}

.homepage {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  text-align: center;
}

a.window-style {
  width: 120px;
  font-family: FreePixel;
  color: #3f4158;
  font-size: 12pt;
  margin-top: 10px;
  text-decoration: none;
}

a.window-style:hover {
  border-bottom: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  border-left: solid 2px #2b2b2b;
  border-top: solid 2px #696969;
  text-decoration: underline dotted 1px;
}

a.window-style:active {
  background-color: #eeeeee;
}

aside.window-style {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 350px;
  width: 200px;
  right: -35%;
  bottom: -5%;
}

aside.window-style div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(1) 
          hue-rotate(-180deg) 
          saturate(1.2) 
          brightness(0.9);
  transition: filter 0.1s ease-in-out;
}

aside.window-style div img:hover {
  filter: none;
}

aside div.window-style-inside {
  padding: 0;
}

main.window-style {
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 500px;
  gap: 7px
}

.window-style {
  padding: 5px;
  background-color: #c0c0c0;
  outline: solid 2px #c0c0c0;
  border-top: solid 2px #ffffff;
  border-left: solid 2px #ffffff;
  border-bottom: solid 2px #2b2b2b;
  border-right: solid 2px #696969;
}

main div.window-style-inside {
  overflow-y: auto;
}

.window-style-inside {
  height: 100%;
  padding: 30px;
  background-color: #ffffff;
  border-top: solid 2px #696969;
  border-left: solid 2px #2b2b2b;
  border-bottom: solid 2px #eeeeee;
  border-right: solid 2px #eeeeee;
}

main div.window-title {
  padding-left: 30px;
}

.window-title {
  color: white;
  padding: 5px;
  font-weight: bold;
  background: linear-gradient(to right, #5a64a0, #589bc7)
}

.window-title div {
  display: flex;
  align-items: center;
  gap: 5px
}

.window-title div:first-child {
  flex-grow: 100;
}

.window-title div:not(:first-child) {
  width: 21px;
  color: black;
  background-color: #c0c0c0;
  border-top: solid 2px #ffffff;
  border-left: solid 2px #ffffff;
  border-bottom: solid 2px #2b2b2b;
  border-right: solid 2px #696969;
}

.window-title div:not(:first-child) p {
  text-align: center;
  width: 16px;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #c0c0c0;
  border-left: solid 2px #e2e2e2;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-top: solid 2px #ffffff;
  border-left: solid 2px #ffffff;
  border-bottom: solid 2px #2b2b2b;
  border-right: solid 2px #696969;
}

/* Handle on hover 
::-webkit-scrollbar-thumb:hover {
  background: rgb(255, 199, 182);
}
*/

.small-text {
  font-size: 10pt;
  color: #589bc7;
}

.stamps {
  margin-top: 10px;
  filter: sepia(1) 
          hue-rotate(-180deg) 
          saturate(1.1)
          brightness(0.95);
}

.stamps:hover {
  filter: none;
}


.stamps a {
  text-decoration: none;
}

::selection {
  color: white;
  background: #5a64a0;
}