@font-face {
  font-family: "morningtea";
  src: url(MorningTea.ttf);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100vh;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-position: bottom;
  background-attachment: fixed;
  background-blend-mode: lighten;
  color: white;
  font-family: "Gaegu", serif;
}

#page-index {
  background-image: url("https://github.com/maksym981/webprojekt-fotos/blob/main/bg4.png?raw=true");
}

#page-about {
  background-image: url("https://github.com/maksym981/webprojekt-fotos/blob/main/bg6.png?raw=true");
}

#page-hobbies {
  background-image: url("https://github.com/maksym981/webprojekt-fotos/blob/main/bg101.png?raw=true");
}

#page-photos {
  background-image: url("https://raw.githubusercontent.com/maksym981/webprojekt-fotos/refs/heads/main/bg12.png");
}

#app-window-wrapper {
  flex-grow: 1;
  width: 720px;
  margin: 0 auto;
  padding-top: 30px;
  transition: width 0.2s;
}

#app-window-wrapper.fullscreen {
  width: 100%;
  padding: 0;
  transition: width 0.2s;
}

#app-window {
  position: relative;
  z-index: 1;
  background-color: white;
  border: 2px solid #004cdf;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

#app-window .window-header {
  display: flex;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: #004cdf 2px solid;
  padding: 5px;
  background: linear-gradient(to bottom, #3792ff 0%,
      #0057e6 10%, #0d64fa 51%, #2a83ff 92%, #0169fe 98%, #004cdf 100%);
}

#app-window .window-header .title {
  display: flex;
  flex-grow: 1;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  padding-left: 25px;
  font-size: 110%;
}

#page-index #app-window .window-header .title {
  background-image: url('../img/my-computer.ico');
}

#page-about #app-window .window-header .title {
  background-image: url('../img/my-documents.ico');
}

#page-hobbies #app-window .window-header .title {
  background-image: url('../img/msn.ico');
}

#page-photos #app-window .window-header .title {
  background-image: url('../img/camera.ico');
}

#app-window .window-header .buttons {
  text-align: right;
}

#app-window .window-header .buttons span {
  display: inline-block;
  border: 0.75px solid #376eed;
  border-bottom: #1a4fc4 solid 1px;
  border-right: #1a4fc4 solid 1px;
  outline: 0.75px solid #fff;
  box-shadow: 0 0 2px #fff;
  width: 20px;
  text-align: center;
  border-radius: 2px;
  text-shadow: 0.5px 0.5px 1px #ffffff;
  background: linear-gradient(135deg, #89adfb 0%, #2b6bf2 35%, #2b6bf2 71%, #1a4fc4 100%);
  font-weight: bold;
  cursor: pointer;
}

#app-window .window-header .buttons span:hover {
  background: linear-gradient(135deg, #94b6ff 0%, #4a84ff 35%, #4680ff 71%, #2e6aed 100%);
}

#app-window .window-header .buttons .cross {
  border: 1px solid #f54d26;
  border-bottom: #ab2f0a solid 1px;
  border-right: #ab2f0a solid 1px;
  background: linear-gradient(135deg, #f0a188 0%, #f54d26 27%, #e23d00 83%, #ab2f0a 100%);
}

#app-window .window-header .buttons .cross:hover {
  background: linear-gradient(135deg, #ffb59f 0%, #ff623f 27%, #fb581d 83%, #cd4015 100%);
}

#app-window .address-bar {
  display: flex;
  color: black;
  background-color: rgb(239, 239, 229);
}

#app-window .address-bar .wrapper {
  display: flex;
  border: 1.5px outset;
  flex-grow: 1;
}

#app-window .address-bar .caption {
  text-align: center;
  padding: 6px 5px;
}

#app-window .address-bar .url {
  display: flex;
  width: 100%;
  padding: 3px;
  margin: 2px 0;
  border: 1.5px inset;
  background-color: #fff;
  border: 1px solid #87bcea;
}

#app-window .address-bar .url .icon {
  height: 16px;
  padding: 2px 2px 0 0;
}

#app-window .address-bar .url .url-text {
  flex-grow: 1;
  padding-top: 0px;
}

#app-window .address-bar .nav-buttons {
  border: 1.5px outset;
  padding: 3px 4px 0;
  white-space: nowrap;
}

#app-window .address-bar .nav-buttons span {
  display: inline-block;
  color: #fff;
  background: linear-gradient(135deg, rgba(188, 188, 188, 1) 0%, rgba(188, 188, 188, 1) 22%, rgb(59, 59, 59) 89%, rgba(59, 59, 59) 100%);
  border: 1.5px solid #b3b3b3;
  opacity: 70%;
  border-radius: 100px;
  width: 22px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0.5px 0.5px 0px #000;
}

#app-window .address-bar .nav-buttons span:hover {
  border: 1.5px solid #3ec539;
  background: linear-gradient(135deg, rgb(223, 255, 205) 0%, rgba(97, 196, 25, 1) 40%, rgba(97, 196, 25, 1) 68%, rgba(97, 196, 25, 1) 68%, rgb(24, 124, 9) 100%);
}

#app-window .address-bar .reload {
  cursor: pointer;
  padding: 1px 4px 0;
}

#app-window .address-bar .home span {
  cursor: pointer;
  margin: 1px 10px 0;
  font-size: 20px;
  color: grey;
}

#app-window .address-bar .home span:hover {
  color: rgb(192, 192, 192);
}

#app-window .address-bar .home {
  background-color: rgb(239, 239, 229);
  flex-grow: 1;
  display: inline-block;
}

#app-window .window-content {
  color: #000;
  padding: 15px;
  overflow-y: scroll;
  min-height: 70vh;
  max-height: 70vh;
}

#app-window .window-content p {
  margin-top: 0;
}

#app-window .window-content h1 {
  margin-top: 0;
}

#page-index .window-content {
  background: #000;
  background-image: url("https://raw.githubusercontent.com/maksym981/webprojekt-fotos/refs/heads/main/transparent_stars.gif");
}

#page-index .window-content .content-block {
  background-color: #ffffff;
  padding: 2% 5%;
  max-width: 60%;
  margin: auto;
  border: #ffffff 10px solid;
  text-align: justify;
  margin-bottom: 30px;
}

#page-index .window-content .content-block h1 {
  font-size: 35px;
  text-align: center;
  margin: 15px;
  font-family: "morningtea";
}

#page-index .window-content .content-block img {
  border: #ffd3b6 10px solid;
  float: right;
  margin-left: 20px;
  max-width: 150px;
}

#page-index .window-content .content-block p {
  font-size: 23px;
  margin-bottom: 10px;
}

#page-photos .window-content {
  background-color: #000;
}

#page-photos .window-content .photos .row {
  display: flex;
}

#page-photos .window-content .photos .two-cols .col {
  width: 50%;
}

#page-photos .window-content .photos .three-cols .col {
  width: 33.3%;
}

#page-photos .window-content .photos .col img {
  width: 100%;
  display: block;
}

#page-about .window-content {
  background-color: beige;
}

#page-about .window-content .content-block {
  margin: 0 10%;
  padding: 20px;

}

#page-about .window-content .content-block h1 {
  font-size: 33px;
  font-family: "morningtea";
  border-bottom: #000 dotted 5px;
  background-color: rgb(226, 226, 198);
  padding: 5px;
}

#page-about .window-content .content-block img {
  border: #000000 3px dashed;
  float: right;
  margin-left: 20px;
  max-width: 150px;
}

#page-about .window-content .content-block p {
  font-size: 22px;
}

#page-about .window-content .content-block .box {
  background-color: rgb(226, 226, 198);
  color: rgb(226, 226, 198);
  padding-bottom: 100px;
  border-top: #000 dotted 5px;
}

#page-hobbies .window-content {
  background-color: black;
  background-image: url("https://github.com/maksym981/webprojekt-fotos/blob/main/gallery/aphextwinlogo.webp?raw=true");
  color: white;
  background-repeat: round;
  background-size: 100px;
  background-position: center;
  background-blend-mode: lighten;

}

#page-hobbies .window-content .content-block {
  margin: 0 20%;
  font-size: 20px;
}

#page-hobbies .window-content .content-block p {
  padding: 10px;
  background: rgb(0, 0, 0);
  border: red 10px solid;
  border-radius: 1px;
}

#page-hobbies .window-content .content-block h1 {
  font-size: 35px;
  text-align: center;
  margin: 15px;
  font-family: "morningtea";
  text-shadow: white 0px 0px 10px;
}

#page-hobbies .window-content .content-block ul li {
  padding: 5px;
  background: black;
  border: black 5px solid;
  border-radius: 1px;
  margin-bottom: 5px;
  list-style: inside;
  font-size: 22px;
}

#page-hobbies .window-content .content-block ul li span {
  font-size: 22px;
  font-style: oblique;
}

#page-hobbies .window-content .content-block ul p {
  font-size: 22px;
  border: #ff0000 5px dashed;
}

#page-hobbies .window-content .content-block h2 {
  border: #800e0e solid 5px;
  background-color: #0f1e3b;
  text-align: center;
  text-shadow: white 0px 0px 10px;
}

#taskbar {
  display: flex;
  background: linear-gradient(to bottom, #75a8ef 0%, #2259da 16%, #2259da 16%, #2259da 50%, #2259da 90%, #12317a 100%);
  border: solid 1px #2259da;
  border-right: 0;
  border-left: 0;
}

#taskbar .start {
  background: linear-gradient(to bottom, #b4e391 0%, #419b3b 27%, #419b3b 43%, #72c433 79%, #419b3b 94%, #419b3b 100%);
  font-size: 25px;
  text-shadow: 1px 1px 2px #000;
  border: solid 2px #419b3b;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 8px;
  padding: 0 10px;
  display: flex;
  margin-right: 12px;
  color: #fff;
  text-decoration: none;
}

#taskbar .start:hover {
  background: linear-gradient(to bottom, #beee98 0%, #49aa42 27%, #4bb044 43%, #7bd437 79%, #4cb344 94%, #4ab042 100%);
}

#taskbar .start .caption {
  margin: 2px 8px 0 4px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1px;
}

#taskbar .start .icon {
  width: 24px;
  filter: drop-shadow(0.5px 0.5px 1px #000);
  margin: 8px 0;
}

#taskbar .task-buttons {
  display: flex;
  flex-grow: 1;
}

#taskbar .task-buttons img {
  width: 20px;
  height: 20px;
  margin: 4px 3px 0 12px;
}

#taskbar .task-buttons .tab .caption {
  margin-top: 6px;
}

#taskbar .task-buttons .tab {
  background: linear-gradient(135deg, #7db9e8 0%, #3a7ff6 10%, #397af4 93%, #397af4 93%, #397af4 100%);
  max-height: 28px;
  display: flex;
  flex-direction: row;
  margin: 6px 5px 0 0;
  width: 175px;
  border-radius: 2px;
  border-top: 1px solid #83ACEA;
  border-left: 2px solid #83ACEA;
  color: #fff;
  text-decoration: none;
}

#taskbar .task-buttons .tab:hover {
  background: linear-gradient(135deg, #7db9e8 0%, #3576e4 10%, #3572e3 93%, #3471e2 93%, #336dd8 100%);
}

#taskbar .task-buttons .tab.active {
  background: #1850bd;
  border: 1px solid #1143ab;
  border-top: 2px solid #0e30a9;
  border-left: 2px solid #0e30a9;
  max-height: 27px;
}

#taskbar .notifications {
  background: linear-gradient(to bottom, #15cbef 0%, #0994f2 24%, #0994f2 87%, #0f73de 100%);
  display: flex;
  width: 94px;
  padding: 12px 0 0 0;
  border-left: #19366b solid 2px;
}

#taskbar .notifications img {
  margin: 0 10px;
  height: 20px;
  width: 20px;
}

#taskbar .notifications .clock {
  display: flex;
  font-size: 108%;
}

.desktop-icons>a {
  display: block;
  position: fixed;
  text-align: center;
  color: #fff;
  text-decoration: none;
  width: 75px;
  text-shadow: #000 2px 2px 1px;
  line-height: 110%;
}

.desktop-icons>a:hover {
  text-decoration: underline;
}

.desktop-icons .my-computer {
  left: 16px;
  top: 15px;
}

.desktop-icons .my-documents {
  left: 16px;
  top: 105px;
}

.desktop-icons .msn {
  left: 16px;
  top: 195px;
}

.desktop-icons .camera {
  left: 16px;
  top: 285px;
}

.desktop-icons .people {
  left: 16px;
  top: 375px;
}

.desktop-icons .recycle {
  right: 16px;
  bottom: 60px;
}