* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: lightgray;
  font-family: Times, serif;
}

.window {
  position: absolute;
  border-radius: 3px;
  resize: both;
  border-top: 3px solid #141414;
  overflow: hidden;
  box-shadow: -10px 10px 0 0 rgba(0, 0, 0, 0.2);
}
.window.closed {
  -webkit-transition: 500ms;
  transition: 500ms;
  opacity: 0;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
  pointer-events: none;
}

.window-1 {
  left: 2rem;
  top: 60px;
  background: pink;
  width: 440px;
  height: 300px;
}

.window-2 {
  left: 200px;
  top: 100px;
  width: 540px;
  height: 350px;
  background: lightblue;
}

.window-countdown {
  left: auto;
  right: 100px;
  top: auto;
  bottom: 10%;
  width: 480px;
  height: 150px;
  background: white;
}

.window-content {
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 1rem;
  margin-right: 3px;
  margin-bottom: 3px;
}
.window-content h1 {
  font-size: 4rem;
}

.window-header {
  background: white;
  min-height: 20px;
  padding: 5px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  border-bottom: 3px solid #141414;
  width: 100%;
  cursor: -webkit-grab;
  cursor: grab;
}
.is-pointer-down .window-header {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.window-header:hover, .window-header:focus {
  background: #e6e6e6;
}

.window-title {
  font-size: .9rem;
  font-weight: 600;
}

[class*=window-control] {
  display: inline-block;
  height: 100%;
  line-height: 0;
  cursor: pointer;
}
[class*=window-control] svg {
  position: relative;
  top: -2px;
  height: 20px;
  width: 20px;
}

[class*=dragbar] {
  position: absolute;
  background: #141414;
}

.dragbar-right {
  right: 0;
  top: 0;
  width: 3px;
  height: 100%;
  cursor: ew-resize;
}

.dragbar-bottom {
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  cursor: ns-resize;
}

.dragbar-left {
  bottom: 0;
  left: 0;
  width: 3px;
  height: 100%;
  cursor: ew-resize;
}

.desktop-header {
  background: #fff;
  border-bottom: 1px solid #141414;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
}
.desktop-header a {
  color: #141414;
  text-decoration: none;
}

.desktop-title {
  font-weight: bold;
  margin-right: 2rem;
  display: inline-block;
}

.desktop-nav {
  display: inline-block;
}
.desktop-nav a {
  margin-right: .5rem;
}


/* Menu bar */

#menu-bar {
  position: absolute;
  bottom: 0;
  width: calc(100%);
  background: #fff;
  height: 50px;
  border: 3px solid #141414
}

.btn {
    display: inline-block;
    text-decoration: none;
    color: black;
    line-height: 25px;
    font-family: Courier, serif;
    font-weight: bold;
    min-width: 75px;
    height: 90%;
    /*background-image: url(http://vignette4.wikia.nocookie.net/logopedia/images/b/b3/Windows_logo_(Pre-XP)_alt._color.svg.png/revision/latest?cb=20160311145452);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 5px center;*/
    background-color: #eee;
    border-top: 2px solid white;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    border-left: 2px solid white;
    outline: 0;
}

.btn:active {
  border-top: 2px solid #222;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  border-left: 2px solid #222;
}