@font-face {
  font-family: "Segoe UI Bold";
  src: url("/assets/fonts/Segoe\ UI.ttf");
}

@font-face {
  font-family: "Segoe UI";
  src: url("/assets/fonts/Segoe UI.ttf");
}

@font-face {
  font-family: "Segoe MDL2";
  src: url("/assets/fonts/SegMDL2.ttf");
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;

  font-size: 1rem;

  --window-header-height: 1.75rem;
  --window-border-width: 0.5rem;
}

body {
  padding:0;
  margin:0;
  background-image: url(/assets/wallpapers/1_rockformations_turkey.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  background-position: left;
}

.window-outer {
  /* background-color: rgba(45, 45, 45, 1); */

  border-radius: var(--window-border-width);

  /* position: relative; */

  padding: var(--window-border-width);
  padding-top: var(--window-header-height);

  border: 1px rgb(197, 197, 197) solid;

  backdrop-filter: blur(10px);
  /* background-color: #8cb4cd; */

  position: fixed;
  z-index: 10;

  /* -moz-perspective: 800px; */
  overflow:hidden;
  
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.6);
}

.window-outer .shade {
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%); 
  position: absolute;
  top: 0;
  left: 0;

  height: 12rem;
  width: 15rem;

  transform: translate(-4rem, -6rem);
  pointer-events: none;
}

.window-outer .shade:nth-child(2) {
  left: unset;
  right: 0;

  transform: translate(4rem, -6rem);
}

.window-outer.active .shade {
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%); 
}

.window-outer.active {
  z-index: 999;
  box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.6);
  
  backdrop-filter: blur(10px);
  /* background-color: rgba(109, 170, 208, 0.6); */
  background-color: rgba(0, 0, 0, 0.4);

  border: 1px rgb(197, 197, 197) solid;

}

.window-outer.fadein {
  animation-name: fadein;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.window-outer.fullscreen {
  padding-left: 0;
  padding-bottom: 0;
  padding-right: 0;

  padding-top: calc(1rem + 6px);

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  border-radius: 0;
  border: none;
}

.window-outer.fullscreen .window-controls {
  right: 2px;
}

.window-outer.fullscreen .window-title {
  top: 0px;
}

.window-outer.fullscreen .window-inner {
  border: none;
  border-top: 1px #000 solid;
}

.window-inner {
  width: 100%;
  height: 100%;
  /* border: 1px rgb(197, 197, 197) solid; */
  position: relative;

  background-color: white;
  transition: background 0.2s;
}

.window-inner .cover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;

  z-index: 99;
  display: none;
}

.window-outer[data-mousedown="true"] .window-inner .cover,
.window-outer:not(.active) .window-inner .cover {
  display: block;
}

.window-inner * {
  user-select: none;
}

.window-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.window-outer[data-mousedown="true"] * {
  user-select: none;
  pointer-events: none;
}

.window-controls {
  position: absolute;
  top: 0;
  right: var(--window-border-width);

  height: 1rem;

  border: 1px rgba(0,0,0,0.5) solid;
  border-top: none;


  outline: 1px rgb(222, 222, 222) solid;
  /* outline-style: dashed; */

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  font-size: 0.5rem;

  /* overflow: hidden; */

  cursor: default;
}

.window-controls .button {
  display: block;
  width: 2rem;
  float: left;

  text-align: center;

  position: relative;
  color: white;

  font-family: "Segoe MDL2", arial;

  height: 100%;
  line-height: 1rem;

  transition: box-shadow 0.2s;

  user-select: none;
}

/* glass effect on buttons */
/* .window-controls .button::after,
.window-controls .button::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
} */

.window-controls .button:not(:last-of-type) {
  border-right: 1px rgba(0, 0, 0, 0.5) solid;
  height: 100%;
}

.window-outer.active .window-controls .button.close:hover {
  box-shadow: 0px 0px 8px 4px rgba(232, 93, 72, 0.82);
  z-index: 300;
}

.window-outer .window-controls .button.close {
  width: 46px;
  font-weight: bold;
  border-bottom-right-radius: inherit;
}

.window-outer.active .window-controls .button.close {
  
  background-image: url(/assets/aero/close_gradient.png);
  background-size:cover;
}

.window-outer .window-controls .button.default {
  width: 29px;
  font-weight: bold;
}

.window-outer.active .window-controls .button.default {
  background-image: url(/assets/aero/option_middle.png);
  background-size: cover;
  transition: 0.3s;
}

.window-outer.active .window-controls .button.default:hover {
  background-color: #2a8f94;
  box-shadow: 0px 0px 8px 4px #31aeb5;
  z-index: 300;
}

.window-outer.active .window-controls .button.default:first-of-type {
  background-image: url(/assets/aero/option_corner.png);
  border-bottom-left-radius: inherit;
}

/* .window-controls .button.close::after {
  background-image: url(/assets/aero/close.png);
  background-size: contain;
  width: 11px;
  height: 11px;
  content: "";
} */

/* .window-outer.active .window-controls .button.close:hover::after {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgb(255, 138, 49) 0%, rgba(15, 15, 15, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.30) 50%);

} */

/* .window-outer.active .window-controls .button.close {  
  background: rgb(246,75,47);
  background: radial-gradient(circle, rgba(246,75,47,1) 10%, rgba(193,64,43,1) 42%, rgba(125,42,29,1) 100%);  */
/* } */

/* .window-outer.active .window-controls .button.close::after {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(15, 15, 15, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.30) 50%);
} */
/* .window-outer.active .window-controls .button.default::after {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(15, 15, 15, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.40) 50%);
} */

.window-controls .button .contents {
  position: relative;
  z-index: 3;

  --_shadow-color: #555;
  text-shadow: -1px 1px 0 var(--_shadow-color),
    1px 1px 0 var(--_shadow-color),
    1px -1px 0 var(--_shadow-color),
    -1px -1px 0 var(--_shadow-color);
}

.window-title {
  display: inline;
  position: absolute;
  top: 3px;
  left: var(--window-border-width);

  font-family: "Segoe UI";

  --_shadow-color: white;
  text-shadow: -1px 1px 10px var(--_shadow-color),
    1px 1px 10px var(--_shadow-color),
    1px -1px 10px var(--_shadow-color),
    -1px -1px 10px var(--_shadow-color);
  /* font-weight: 500; */
  font-size: 0.9rem;

  user-select: none;
  pointer-events: none;
}

.window-title .window-icon {
  height: 1rem;
  margin-right: 5px;
  vertical-align: sub;
  font-size: 16px;

  display:inline-block;
}

.fadeout {
  animation-name: fadeout;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.watermark {
  color: #ccc;

  position: fixed;

}

@keyframes fadeout {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}