: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: #fff;
  text-decoration: none;
}
summary {
  list-style: none;
}
button.focused, button:focus, button:not(:disabled):hover {
  box-shadow: none !important;
}
#container {
  background: url(bg.jpg);
  width: 100%;
  height: 100vh;
  display: block;
  background-size: 100%;
}
/* 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;
  & .red{
    margin: 0 0 2vw;
    background: linear-gradient(90deg,#de641f,#de832f 20%,#d79d4c 40%,#de8430 60%,#df6420 70%,#bb4d20 80%,#a53624 90%,#a53624);
    &:before {
      background: linear-gradient(90deg,#de641f,#de832f 20%,#d79d4c 40%,#de8430 60%,#df6420 70%,#bb4d20 80%,#a53624 90%,#a53624);   
    }
  }
  & .green{
    margin: 0 0 4vw .8vw;
    transform: rotate(180deg);
    z-index: 1;
    background: linear-gradient(90deg,#7faa2a,#85c12d 8%,#85c12d 55%,#7faa2a 60%,#76802f 80%,#4a582a 90%,#4a582a);        
    &:before {
      background: linear-gradient(90deg,#7faa2a,#85c12d 8%,#85c12d 55%,#7faa2a 60%,#76802f 80%,#4a582a 90%,#4a582a);   
    }
  }
  & .blue{
    clear: both;
    top: -1vw;
    background: linear-gradient(90deg,#2e328e,#5b75b8 8%,#8097cc 30%,#5174b8 60%,#4057a5 70%,#324399 80%,#2e3280 90%,#2e3280);   
    &:before {
      background: linear-gradient(90deg,#2e328e,#5b75b8 8%,#8097cc 30%,#5174b8 60%,#4057a5 70%,#324399 80%,#2e3280 90%,#2e3280);   
    }
  }
  & .yellow{
    margin: 0 0 0 .8vw;
    transform: rotate(180deg);
    top: -3vw;
    background: linear-gradient(90deg,#b39a1c,#dcb125 8%,#dcb125 55%,#b39a1c 60%,#b39a1c 80%,#946625 98%,#959536); 
    &::before {
      background: linear-gradient(90deg,#b39a1c,#dcb125 8%,#dcb125 55%,#b39a1c 60%,#b39a1c 80%,#946625 98%,#959536); 
    }
  }
  .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: -3.4vw;
  position: relative;
  & p {
    font-size: 1.8vw;
    margin: 0;
  }
  .windows__name--inner{
    font-size: 6vw;
    font-weight: bold;
    & span {
      color: #c3441d;
      font-size: 4.8vw;
      bottom: 2.8vw;
      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;
    }
  }
}
@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:#5B7EDC;
  z-index: 10;
  background: linear-gradient(0deg, #13319A, #13319A 10%, #C5B0B0 10%, #5B7EDC 10.5%, #5B7EDC 30%, #5B7EDC 60%, #5B7EDC 70%, #5B7EDC 80%, #5B7EDC 89.5%, #C5B0B0 90%, #13319A 90%, #13319A);
  .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;
  }
  .windows__logo--inner{
    &::after {
      background-color: #5B7EDC;
      border: .1vw solid #5B7EDC;
    }
  }
}
/* 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, #1A7228, #208829 8%, #1F8328 40%, #1D7C21 88%, #1E7F24 93%, #1E8024 95%, #1D7C23 96%, #1E642C);
    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 #208621;
    width: 75px;
    height: 23px;
    font-style: italic;
    color: #fff;
    border-top: 1px solid #3C8C37;
    border-left: 1px solid #238E47;
    border-right: 1px solid #146002;
    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:#cfe9ff
    }
    & .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;
    }
  }
  & .window-timer {
    color: #ffffff;
    background: linear-gradient(180deg, #37AEF4, #2E88F2 8%, #2E88EE 40%, #2E88EE 88%, #2E88EE 93%, #2E88EE 95%, #3198ED 96%, #3198ED);
    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-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: 400px;
  }
  & .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.jpg) 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%;
    }
    & .title-bar-start {
      & .windows__logo {
        zoom: 0.15;
      }
    }
  }
  & .window-start-menu-content-dialog {
    & .window-start-menu-content-inner,
    & .window-start-menu-content-profile {
        width: 90%;
    }
  }
}