@font-face {
font-family: old-msss;
src: url('MS Sans Serif.ttf');
}

body {
  background-color: #008081;
  color: #ffffff;
  font-family: "old-msss";
}

p {
  margin: 2px;
  padding: 1px;
  text-overflow: scroll;
  overflow: scroll;
}

.win {
  background-color: #808083;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  color: #bebebe;
  text-indent: 2px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 25% 24% 24% 25%;
  grid-template-rows: auto 250px 250px 250px;
}

.essay-container {
  display: grid;
  gap: 10px;
  grid-template-columns: 70% 25%;
  grid-template-rows: auto;
}

#intro-win {
  grid-column: 1;
  grid-row: 1;
}

#nelson-goodman-win {
  grid-column: 1;
  grid-row: 2;
}

#me-win {
  grid-column: 1;
  grid-row: 3;
}

#creation-win {
  grid-column: 1;
  grid-row: 4;
}

#nothing-win {
  grid-column: 1;
  grid-row: 5;
}

#perception-win {
  grid-column: 1;
  grid-row: 6;
}

#new-ideas-win {
  grid-column: 1;
  grid-row: 7;
}

#so-what-win {
  grid-column: 1;
  grid-row: 8;
}

#my-personal-connection-win {
  grid-column: 1;
  grid-row: 9;
}

#thank-you-win {
  grid-column: 1;
  grid-row: 10;
}

#reality-sidebar-win {
  grid-column: 2;
  grid-row: 1 / span 10;
}

.icon-container {
  pllace-items: center;
  display: grid;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
}

.icon {
  place-items: center;
  height: 50px;
  width: 50px;
  display: grid;
  padding: 10px
  grid-template-columns: 30px;
  grid-template-rows: 20px, 10px;
}

.icon-label {
  text-align: center;
}

#site-header {
  grid-column: 1 / span 4;
  grid-row: 1;
}

#update-win {
  grid-column: 1;
  grid-row: 2;
}

#highlight-win {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
}

#leave-comment-win {
  grid-column: 4;
  grid-row: 2 / span 3;
}

#sidebar-win {
  grid-column: 1;
  grid-row: 2 / span 3;
}

#placeholder-win-1 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

#placeholder-win-2 {
  grid-column: 4;
  grid-row: 2 / span 3;
}

#other-works-icon-container {
  grid-column: 2 / span 2;
  grid-row: 3 / span 2;
}

.win-header {
  display: grid;
  column-gap: 5px;
  grid-template-columns: auto 22px 22px 22px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.win-outer-layer {
  background-color: #c0c0c0;
  color: #5f5f5f;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  margin-bottom: 0;
}

#ud-outer-layer {
  height: 203px;
}

#hl-outer-layer {
  height: 463px;
}

#lc-outer-layer {
  height: 723px;
}

#sb-outer-layer {
  height: 723px;
}

#ph1-outer-layer {
  height: 203px;
}

#ph2-outer-layer {
  height: 723px;
}

#w1-outer-layer {
  
}

#rs-outer-layer {
  height: 4000px;
}

.win-inner-layer {
  margin: 10;
  background-color: #ffffff;
  color: #2c2c2c;
  border-width: 2px;
  border-style: solid;
  border-color: #000000 #ffffff #ffffff #000000;
}

#ud-inner-layer {
  height: 163px;
}

#hl-inner-layer {
  height: 403px;
}

#lc-inner-layer {
  height: 123px;
}

#lc-inner-layer-2 {
  height: 483px;
}

#sb-inner-layer {
  height: 683px;
}

#ph1-inner-layer {
  height: 163px;
}

#ph2-inner-layer {
  height: 683px;
}

#rs-inner-layer {
  height: 3980px;
}

.win-button {
  background-color: #c0c0c0;
  color: #5f5f5f;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #000000 #000000 #ffffff;
}

.min {
  height: 18px;
  width: 18px;
}

.max {
  height: 18px;
  width: 18px;
}

.close {
  height: 18px;
  width: 18px;
  margin-right: 2px;
}