html {
  background: url(images/10-4.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "PT Sans", Verdana, sans-serif;
}

body {
  margin: 0%;
  overflow: hidden;
}

  .menubar {
    width: 100%;
    height: min-content;
    margin: 0%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(rgb(255,255,255), rgb(241,241,241) 50%, rgb(233,233,233) 75%, rgb(255,255,255));
    box-shadow:
      0px 2px 15px rgba(0, 0, 0, .5),
      0px -6px #000000;
    border-radius: 6px 6px 0px 0px;
    cursor: default;
  }

  .window-menu-title {
    font-weight: bolder;
    font-size: medium;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .window-menu-item {
    position: relative;
    display: inline-block;
  }

  .window-menu-item:hover .dropdown-content {display: block;}

  .dropdown-button {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .window-menu-item:hover .dropdown-button {
    background: linear-gradient(rgb(35, 126, 233), rgb(1,92,216));
    color: #ffffff;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background: repeating-linear-gradient(0deg, #ECECEC, #ECECEC 2px, #f0f0f0 2px, #f0f0f0 4px);
    z-index: 1;
    box-shadow:
    0px 0px 1px 1px rgba(100, 100, 100, .75),
    0px 10px 15px rgba(0, 0, 0, .5);
    padding-top: 0.25em;
    padding-bottom: 0.5em;
  }

  .dropdown-item {
    padding-left: 1em;
    padding-right: 0.5em;
    text-decoration: unset;
    color: #000;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-item:hover {
    background-color: rgb(51, 111, 204);
    color: #ffffff;
  }

  .svg-icon {
    height: 0.85em;
    width: auto;
    margin-left: 1em;
    filter: invert(0%) sepia(7%) saturate(29%) hue-rotate(254deg) brightness(108%) contrast(107%);
  }

  .dropdown-item:hover .svg-icon {
    filter: invert(100%) sepia(93%) saturate(27%) hue-rotate(55deg) brightness(108%) contrast(107%);
  }

  .apple-button {
    max-height: 1em;
    height: auto;
    margin-left: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
  }

  .clock {
    flex-grow: 4;
    text-align: right;
    margin-right: 1em;
  }

  .aqua-contents {
    background: repeating-linear-gradient(0deg, #ECECEC, #ECECEC 2px, #f0f0f0 2px, #f0f0f0 4px);
    width: 307px;
    height: 350px;
    display: block;
    position: relative;
    z-index: 503;
    margin: auto;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .25), 0px 6px 7px -3px rgba(0, 0, 0, .35), 0px 0px 1px 1px rgba(0, 0, 0, .15);
    text-align: center;
  }

  .titlebar {
    border-bottom: 1px solid #B3B3B3;
    text-align: center;
    font-size: smaller;
    margin-bottom: 25px;
  }

  .mac-logo {
    height: 80px;
  }

  h2 {
    margin-bottom: 0%;
  }
  h6 {
    font-style: normal;
    font-weight: lighter;
    color: dimgray;
    margin-top: 0%;
  }

  .specs {
    width: 80%;
    font-size: smaller;
    margin: 0 auto 0.5em;
  }

  .specs-row {
    display: flex;
    gap: 20px;
    padding: 5px 0;
  }

  .specs-label {
    font-weight: bolder;
    flex: 1;
    text-align: right;
  }

  .specs-value {
    flex: 1;
    text-align: left;
  }

  .dock {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    gap: 1px;
    z-index: 504;
  }

  .dock-row {
    display: flex;
    flex: 1 1;
    background-color: rgba(120, 130, 170, .95);
    border: 1px solid rgb(143, 153, 187);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .25);
    border-bottom-style: none;
  }

  .dock-icon {
    flex: 0;
    height: 64px;
    padding: 5px;
    filter: drop-shadow(0px 1px DimGrey);
  }

  .aqua-button {
    vertical-align: top;
    display: inline-block;
    margin: 0px 5px;
    padding: 1px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    color: #000;
    border-radius: 4.5px;
    background-image: -webkit-linear-gradient(rgb(76, 80, 163) 0%, rgb(69, 70, 94) 100%);
    background-image: linear-gradient(rgb(76, 80, 163) 0%, rgb(69, 70, 94) 100%);
  }

  .aqua-button {
    background-image: -webkit-linear-gradient(rgb(152, 152, 152) 0%, rgb(142, 142, 142) 100%);
    background-image: linear-gradient(rgb(152, 152, 152) 0%, rgb(142, 142, 142) 100%);
  }

  .aqua-button:active {
    background-image: -webkit-linear-gradient(rgb(66, 71, 160) 0%, rgb(59, 61, 99) 100%);
    background-image: linear-gradient(rgb(66, 71, 160) 0%, rgb(59, 61, 99) 100%);
  }

  .aqua-button div {
    padding: 0px 12px;
    padding-top: 1px;
    height: 18px;
    min-width: 50px;
    width: auto;
    background: #28f;
    border-radius: 3.5px;
    background-image: -webkit-linear-gradient(rgb(229, 247, 255) 0%,
                                              rgb(210, 236, 253) 5.5%,
                                              rgb(199, 228, 252) 11%,
                                              rgb(196, 221, 252) 16.5%,
                                              rgb(189, 222, 255) 22%,
                                              rgb(180, 216, 252) 27.5%,
                                              rgb(177, 216, 253) 33%,
                                              rgb(168, 211, 252) 38.5%,
                                              rgb(162, 210, 252) 44%,
                                              rgb(155, 207, 254) 50%,
                                              rgb(138, 191, 249) 55.5%,
                                              rgb(140, 196, 252) 61%,
                                              rgb(148, 202, 252) 66.5%,
                                              rgb(161, 212, 255) 72%,
                                              rgb(170, 217, 253) 77.5%,
                                              rgb(179, 224, 253) 83%,
                                              rgb(187, 232, 255) 89%,
                                              rgb(203, 242, 255) 95%,
                                              rgb(219, 244, 255) 100%);
    background-image: linear-gradient(rgb(229, 247, 255) 0%,
                                      rgb(210, 236, 253) 5.5%,
                                      rgb(199, 228, 252) 11%,
                                      rgb(196, 221, 252) 16.5%,
                                      rgb(189, 222, 255) 22%,
                                      rgb(180, 216, 252) 27.5%,
                                      rgb(177, 216, 253) 33%,
                                      rgb(168, 211, 252) 38.5%,
                                      rgb(162, 210, 252) 44%,
                                      rgb(155, 207, 254) 50%,
                                      rgb(138, 191, 249) 55.5%,
                                      rgb(140, 196, 252) 61%,
                                      rgb(148, 202, 252) 66.5%,
                                      rgb(161, 212, 255) 72%,
                                      rgb(170, 217, 253) 77.5%,
                                      rgb(179, 224, 253) 83%,
                                      rgb(187, 232, 255) 89%,
                                      rgb(203, 242, 255) 95%,
                                      rgb(219, 244, 255) 100%);
    box-shadow: inset 3px 0px 3px -3px rgba(0, 0, 0, .2), inset -3px 0px 3px -3px rgba(0, 0, 0, .2);
  }

  .aqua-button div {
    background-image: linear-gradient(rgb(255, 255, 255) 22%,
                                      rgb(251, 251, 251) 27.5%,
                                      rgb(249, 249, 249) 33%,
                                      rgb(245, 245, 245) 38.5%,
                                      rgb(242, 242, 242) 44%,
                                      rgb(240, 240, 240) 50%,
                                      rgb(231, 231, 231) 55.5%,
                                      rgb(231, 231, 231) 72%,
                                      rgb(232, 232, 232) 77.5%,
                                      rgb(232, 232, 232) 89%,
                                      rgb(235, 235, 235) 95%,
                                      rgb(239, 239, 239) 100%);
    background-image: -webkit-linear-gradient(rgb(255, 255, 255) 22%,
                                              rgb(251, 251, 251) 27.5%,
                                              rgb(249, 249, 249) 33%,
                                              rgb(245, 245, 245) 38.5%,
                                              rgb(242, 242, 242) 44%,
                                              rgb(240, 240, 240) 50%,
                                              rgb(231, 231, 231) 55.5%,
                                              rgb(231, 231, 231) 72%,
                                              rgb(232, 232, 232) 77.5%,
                                              rgb(232, 232, 232) 89%,
                                              rgb(235, 235, 235) 95%,
                                              rgb(239, 239, 239) 100%);
  }

  .aqua-button div {
    background-image: linear-gradient(rgb(255, 255, 255) 22%,
                                      rgb(251, 251, 251) 27.5%,
                                      rgb(249, 249, 249) 33%,
                                      rgb(245, 245, 245) 38.5%,
                                      rgb(242, 242, 242) 44%,
                                      rgb(240, 240, 240) 50%,
                                      rgb(231, 231, 231) 55.5%,
                                      rgb(231, 231, 231) 72%,
                                      rgb(232, 232, 232) 77.5%,
                                      rgb(232, 232, 232) 89%,
                                      rgb(235, 235, 235) 95%,
                                      rgb(239, 239, 239) 100%);
    background-image: -webkit-linear-gradient(rgb(255, 255, 255) 22%,
                                              rgb(251, 251, 251) 27.5%,
                                              rgb(249, 249, 249) 33%,
                                              rgb(245, 245, 245) 38.5%,
                                              rgb(242, 242, 242) 44%,
                                              rgb(240, 240, 240) 50%,
                                              rgb(231, 231, 231) 55.5%,
                                              rgb(231, 231, 231) 72%,
                                              rgb(232, 232, 232) 77.5%,
                                              rgb(232, 232, 232) 89%,
                                              rgb(235, 235, 235) 95%,
                                              rgb(239, 239, 239) 100%);
  }

  .aqua-button div:active {
    background-image: -webkit-linear-gradient(rgb(176, 205, 236) 0%,
                                              rgb(148, 179, 237) 5.5%,
                                              rgb(136, 169, 229) 11%,
                                              rgb(128, 163, 229) 16.5%,
                                              rgb(121, 161, 230) 22%,
                                              rgb(114, 155, 230) 27.5%,
                                              rgb(107, 154, 230) 33%,
                                              rgb(99, 150, 230) 38.5%,
                                              rgb(92, 147, 230) 44%,
                                              rgb(87, 143, 230) 50%,
                                              rgb(58, 128, 230) 55.5%,
                                              rgb(64, 132, 231) 61%,
                                              rgb(73, 140, 234) 66.5%,
                                              rgb(85, 150, 236) 72%,
                                              rgb(96, 158, 236) 77.5%,
                                              rgb(109, 167, 237) 83%,
                                              rgb(122, 178, 237) 89%,
                                              rgb(135, 189, 236) 95%,
                                              rgb(158, 203, 236) 100%);
    background-image: linear-gradient(rgb(176, 205, 236) 0%,
                                      rgb(148, 179, 237) 5.5%,
                                      rgb(136, 169, 229) 11%,
                                      rgb(128, 163, 229) 16.5%,
                                      rgb(121, 161, 230) 22%,
                                      rgb(114, 155, 230) 27.5%,
                                      rgb(107, 154, 230) 33%,
                                      rgb(99, 150, 230) 38.5%,
                                      rgb(92, 147, 230) 44%,
                                      rgb(87, 143, 230) 50%,
                                      rgb(58, 128, 230) 55.5%,
                                      rgb(64, 132, 231) 61%,
                                      rgb(73, 140, 234) 66.5%,
                                      rgb(85, 150, 236) 72%,
                                      rgb(96, 158, 236) 77.5%,
                                      rgb(109, 167, 237) 83%,
                                      rgb(122, 178, 237) 89%,
                                      rgb(135, 189, 236) 95%,
                                      rgb(158, 203, 236) 100%);
  }
  
  @-webkit-keyframes button {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes button {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	100% { opacity: 0; }
}