/* page layout*/
/* #########################################################
  
                  SITE LAYOUT
  
  ########################################################*/

/*
  ### Positioning windows
  affect positon by using top: and left:
  
*/


body
{
  background: url("https://wallpapers.com/images/hd/windows-95-bsod-axj4gs27f3abgurv.webp");
  
}

nav
{
  margin-left:0;
}

.nav .ul
{
  list-style: none;
}

/* Create three unequal columns that floats next to each other */
.column {
  position: fixed;
  float: left;
  padding: 10px;
  height: 100%;
  overflow: visible;
}

.one{
  width: 18%;
  margin-left: 10%;
}

.two{
  width: 18%;
  margin-left: 28%;
 }
   
.three{
  width: 18%;
  margin-left: 46%;
}

.four{
  width: 18%;
  margin-left: 64%;
}

.five {
  width: 18%;
  margin-left: 82%;
}

.icons{
 width:10%;
}

/* Clear floats after the columns */
.row{
  width: 100%;
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.footer
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #C9C9C9;
  text-align: center;
}


/*##############################*/

    /* functionality*/
    
/*##############################*/
    


/*MUST REDECLARE IN PAGE STYLE

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/

  .window{
  position: absolute;
  z-index: 9;
   box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 3px;
  padding: 0 0 3px 0;
  background: #FAF5ED;

}

  .title-bar{
  cursor: move;
  z-index: 10;
  font-family: "Trebuchet MS";
  background: linear-gradient(
      180deg,
      rgba(9, 151, 255, 1) 0%,
      rgba(0, 83, 238, 1) 8%,
      rgba(0, 80, 238, 1) 40%,
      rgba(0, 102, 255, 1) 88%,
      rgba(0, 102, 255, 1) 93%,
      rgba(0, 91, 255, 1) 95%,
      rgba(0, 61, 215, 1) 96%,
      rgba(0, 61, 215, 1) 100%
  );
  padding: 3px 5px 3px 3px;
  border-top: 1px solid #0831d9;
  border-left: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  border-top-left-radius: 8px;
  border-top-right-radius: 7px;
  font-size: 15px;
  text-shadow: 1px 1px #0f1089;
  height: 20px;
  color: white;
}

.controls{
  display: flex;
  top:0;
  right:0;
  height:28px;
  width: 84px;
}
  
.window-body{
   padding-left:5px;
   padding-right:5px;
   font-family: "Trebuchet MS";
   font-size: 13px;
   
}
  
/*second window*/
  
   #window2 {
  position: absolute;
  z-index: 9;
   box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 3px;
  padding: 0 0 3px 0;
  background: #FAF5ED;

}

  #window2handle {
  cursor: move;
  z-index: 10;
  font-family: "Trebuchet MS";
  background: linear-gradient(
      180deg,
      rgba(9, 151, 255, 1) 0%,
      rgba(0, 83, 238, 1) 8%,
      rgba(0, 80, 238, 1) 40%,
      rgba(0, 102, 255, 1) 88%,
      rgba(0, 102, 255, 1) 93%,
      rgba(0, 91, 255, 1) 95%,
      rgba(0, 61, 215, 1) 96%,
      rgba(0, 61, 215, 1) 100%
  );
  padding: 3px 5px 3px 3px;
  border-top: 1px solid #0831d9;
  border-left: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  border-top-left-radius: 8px;
  border-top-right-radius: 7px;
  font-size: 15px;
  text-shadow: 1px 1px #0f1089;
  height: 20px;
  color: white;
} 


/*
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
MUST REDECLARE IN PAGE STYLE*/