:root {
  --gray: #666;
  --white: #fff;
  --black: #000;
  --pink: #d77584;
  --pinktwo: #ff9db5;
  --brown: #752b42;
  --pinkthree: #f0608b;
  --red: #af2d13;
  --waterblue: #8ed3dd;
}
body {
  padding: 0;
  margin: 0;
}
audio, #startButton {
  display: none;
}
a {
  color: #333 !important;
  text-decoration: none;
}
summary {
  list-style: none;
}
button.focused, button:focus, button:not(:disabled):hover {
  box-shadow: none !important;
}
#container {
  background: url(bg.png);
  width: 100%;
  height: 100vh;
  display: block;
  background-size: 100%;
}
.title-bar {
  background: linear-gradient(180deg, #6b6b6b, #4c4c4c 8%, #4a4a4a 40%, #444444 88%, #444444 93%, #3e3e3e 95%, #323232 96%, #323232) !important;
  border-top: 1px solid #5a5a5a !important;
  border-left: 1px solid #5a5a5a !important;
  border-right: 1px solid #282828 !important;
  text-shadow: 1px 1px #2a2a2a !important;
}
.title-bar-controls button {
  filter: grayscale(1);
}
.window {
  box-shadow: inset -1px -1px #222222, inset 1px 1px #555555, inset -2px -2px #333333, inset 2px 2px #777777, inset -3px -3px #444444, inset 3px 3px #666666 !important;
}
menu[role=tablist] {
  overflow-y: auto;
}
menu[role=tablist] button {
  height: auto;
  min-width: 100px !important;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* background */
.windows__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  -webkit-animation: fadeout 1s linear 5s infinite;
          animation: fadeout 1s linear 5s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  z-index: 10;
  .windows__bg--inner {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    zoom: 0.5;
    animation:1s linear infinite;
  }
}
/* logo */
.windows__logo {
  margin: 0 15% 0 0;
  min-width: 15vw;
  font-size: 0;
  transform: skew(-10deg);
  display: block;
  position: relative;
  float: right;
  svg {
    width: 15vw;
    height: 15vw;
  }
  .windows__logo--inner{
    width: calc(50% - .5vw);
    height: auto;
    background-color: white;
    display: inline-block;
    padding: calc( 47% - .5vw ) 0 0;
    position: relative;
    &::before, &::after {
      content: '';      
    }
    &::before {
      width: 100%;
      height: 3vw;
      position: absolute;
      top: -2vw;
      left: 0;
      border-radius: 100% 60% 0 0;
    }
    &::after {
      width: 100%;
      height: 3vw;
      position: absolute;
      top: calc( 100% - 2vw );
      left: 0;
      background-color: black;
      border: .1vw solid black;
      border-radius: 100% 60% 0 0;
    }
  }
}
.windows__name {
  color: white;
  font-family: sans-serif;
  clear: both;
  top: -2.4vw;
  position: relative;
  & p {
    font-size: 1.8vw;
    margin: 0;
  }
  .windows__name--inner{
    font-size: 6vw;
    font-weight: bold;
    & span {
      color: #ffffff;
      font-size: 4.8vw;
      bottom: 2.8vw;
      left: 1vw;
      position: relative;
    }
  }
}
.windows__bg--loading {
  width: 20vw;
  height: 2.5vw;
  border: .2vw solid #878787;
  margin: 2.5vw auto 0;
  border-radius: .5vw;
  position: relative;
  overflow: hidden;
  & ul {
    font-size: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -4.6vw;
    animation:2s linear infinite loading;
    width: 3.9vw;
    & li {
      width: 1.2vw;
      height: 2.0vw;
      display: inline-block;
      background: linear-gradient(180deg,#09112d,#8197cd 20%,#8197cd 40%,#5d62ab 60%,#4158a6 70%,#4158a6 80%,#204399 90%,#1c2954);
      margin: 0 .1vw 0 0;
      filter: grayscale(1);
    }
  }
}
@keyframes loading { 
  0% { left: -4.6vw; } 
  100% { left: 20vw;}
}
@keyframes fadeout {
  0% {
      opacity: 1;
  }
  10% {
      opacity: .5;
  }
  to {
      opacity: 0;
      z-index: -1
  }
}
.windows__bg__shutdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #7A7A7A;
  z-index: 10;
  background: linear-gradient(0deg, #282828, #282828 10%, #B0B0B0 10%, #7A7A7A 10.5%, #7A7A7A 30%, #7A7A7A 60%, #7A7A7A 70%, #7A7A7A 80%, #7A7A7A 89.5%, #B0B0B0 90%, #282828 90%, #282828);
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  .windows__bg--inner {
    position: fixed;
    left: 52.5%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    zoom: 0.3;
    animation:1s linear infinite;
  }
}
/* main */
.windows-main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
  width: 50px;
  overflow: hidden;
  padding: 15px;
  & .window-main-menu-content-button {
    background: transparent;
    border: none;
    text-align: center;
    padding: 0;
    width: 100%;
    min-width: auto;
    &:hover {
      box-shadow: none;
      background: transparent;
      bordeer: none;
    }
    & .window-main-img {
      width: 35px;
    }
  }
}

/* footer */
.windows-footer {
  position: fixed;
  bottom:0;
  left: 0;
  width: 100%;
  & .title-bar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 3px 0 3px 3px;
  }
  & .title-bar-start {
    font-family: Trebuchet MS;
    background: linear-gradient(180deg, #555555, #606060 8%, #5E5E5E 40%, #575757 88%, #595959 93%, #5A5A5A 95%, #575757 96%, #4F4F4F);
    padding: 3px 15px 3px 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 25%;
    border-bottom-right-radius: 25%;
    font-size: 13px;
    line-height: 13px;
    text-shadow: 1px 1px #606060;
    width: 75px;
    height: 23px;
    font-style: italic;
    color: #fff;
    border-top: 1px solid #707070;
    border-left: 1px solid #666666;
    border-right: 1px solid #444444;
    margin-left: -4px;
    position: relative;
    cursor: pointer;
    & .windows__logo {
      zoom: 0.05;
      margin: 0 15px 0 0;
      .windows__logo--inner {
        &::after {
            background-color: #1F8328;
            border: .1vw solid #1F8328;
        }
      }
    }
  }
  & .windows-start-menu {
    position: absolute;
    bottom: 27px;
    width: 30%;
    left: -4px;
    & > .title-bar {
      color: #fff;
      height: 70px;
      padding: 3px 10px;
      &:last-child {
      height: 40px;        
      }
    }
    & .windows-start-profile-bar {
      justify-content: flex-start;
      & .windows-start-menu-profile-img{
        height: 55px;
        clip-path: inset(0 0 round 10px 10px 10px 10px);    
        margin: 0 10px 0 0;
      }
    }
    & .window-start-menu-inner {
      display: flex;
      background: #fff;
      width: 100%;
    }
    & .window-menu-img {
      width: 30px;
      padding: 0 10px 0 0;
    }
    & .window-start-menu-left,  & .window-start-menu-right {
      padding: 0 10px;
      width: 50%;
    }
    & .window-start-menu-right {
      background:#cccccc
    }
    & .window-start-menu-dl {
      margin: 10px 0;
      display: flex;
      align-items: center;
      width: 100%;
    }
    & .window-start-menu-dt {
      width: 40px;
      display: flex;
    }
    & .window-start-menu-dd {
      margin: 0;
    }
  }
  & .window-start-menu-content {
    & .window-start-menu-content-button {
      background: transparent;
      border: transparent;
      font-size: 13px;
      padding: 0;
      font-family: "Trebuchet MS";
      text-shadow: 1px 1px #0f1089;
      outline: none;
      text-align: left;
      cursor: pointer;
      &:hover {
        box-shadow: none;
      }
    }
  }
  & .window-menufooter {
    display: flex;
    justify-content: flex-end;
    & .window-menufooter-link {
      display: flex;
      align-items: center;
      margin: 0 0 0 10px;
      background: transparent;
      border: none;
      color: #fff;
      font-family: Trebuchet MS;
      font-size: 13px;
      text-shadow: 1px 1px #0f1089;
      -webkit-font-smoothing: auto;
    }
    & .window-menufooter-img {
      margin: 0 5px 0 0;
      height: 25px;
      filter: grayscale(1);
    }
  }
  & .window-timer {
    color: #ffffff;
    background: linear-gradient(180deg, #949494, #7a7a7a 8%, #777777 40%, #777777 88%, #777777 93%, #777777 95%, #7f7f7f 96%, #7f7f7f);
    padding: 8px 15px;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    letter-spacing: 1px;
    text-shadow: none;
  }
}

/* dialog */
& .window-start-menu-content-dialog {
  border: none;
  background: transparent;
  &[open] {
    & .window-start-menu-content-inner {
      display: block;
      & .window-start-menu-content-dialog-figure {
        margin: 0;
        position: relative;
        aspect-ratio: 1 / 0.67;
        overflow: hidden;
        & .window-start-menu-content-dialog-img {
          position: absolute;
        }
      }
    }   
  }
  & .window-start-menu-content-inner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    overflow: hidden;
  }
  & .window-start-menu-content-iframe {
    width: 100%;
    height: 75vh;
    margin: 0;
    border: none;
  }
  & .window-start-menu-content-profile {
    width: 45%;
  }
  & .window-start-menu-content-inner-picture {
    max-width: 700px;
  }
  & .window-start-menu-content-inner-contact {
    max-width: 100%;
    width: 330px;
    & .window-body {
      margin: 15px;
    }
    & .g-recaptcha {
      margin: 10px 0 0;
    }
    & .window-start-menu-content-inner-contact-btn {
      margin: 10px 0 0;
    }
  }
}

/* logof */

@media (max-width: 767px) {
  #container {
    background: url(bg.png) center center;
    width: 100%;
    height: 100vh;
    display: block;
    background-size: 200vh 100vh;
  }
  .windows__bg,
  .windows__bg__shutdown {
    .windows__bg--inner {
      zoom: 1;
    }
  }
  .windows-footer {
    & .windows-start-menu {
        width: 100%;
        left: 0px;
    }
    & .title-bar-start {
      & .windows__logo {
        zoom: 1;
        min-width: auto;
        margin: 0 5px 0 0;
        & svg {
          width: 15px;
          height: 15px;
          margin: 5px 0 0;
        }
      }
    }
  }
  & .window-start-menu-content-dialog {
    & .window-start-menu-content-inner,
    & .window-start-menu-content-profile {
        width: 90%;
    }
  }
}