/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   .index {
     text-align: center;
   }
   
   #itsame {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 35px;
   }
   
   .testsection {
     background-color: white;
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
     border: 3px solid gray;
     border-radius: 5px 5px 0px 0px;
     width: 10%;
     font-family: verdana;
     font-size: 12px;
     font-variant: small-caps;
     text-align: center;
     background-image: linear-gradient(to bottom right, gray, white);
   }
   
   .boxheader {
     background-color: black;
     border-bottom: 1px solid gray;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     height: 20px;
     width: 100%;
     background: repeating-linear-gradient(45deg, #C1CDCD,#C1CDCD 10px,#838B8B 10px,#838B8B 20px);
     
  }
   
body {
  background-color: white;
  color: black;
  font-family: Verdana;
  background-image: url("acer_wallpaper.jpg");
  background-attachment: fixed;
  background-size: cover;
}

.highlighted {
  color: red;
  background-color: yellow;
}

nav {
  display: flex;
  justify-content: space-evenly;
}

.header-button {
  border: 5px solid black;
  background-image: linear-gradient(to bottom right, red, yellow);
  padding: 5px;
}

#workspace1 {
  display: flex;
  background-color: #78dcdd;
  width: 22%;
  padding: 0px 5px;
  font-variant: small-caps;
  font-size: 12px;
  border: 2px dashed #33839e;
  border-radius: 10px 10px 0px 0px;
  background: repeating-linear-gradient(45deg, #aba7e6,#aba7e6 20px,#c2d6ff 20px, #c2d6ff 40px);
}

#workspace2 {
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: bold;
  color: grey;
}

#workspace3 {
  display: flex;
  align-items: flex-end;
  margin: 20px 0px 2px 0px;
}

#layout1 {
  display: flex;
  text-align: center;
  border: 1px solid red;
  margin: -15px;
}

#column1 {
  width: 25%;
  padding: 10px;
  border-top: 2px dashed #33839e;
  border-bottom: 2px dashed #33839e;
  border-left: 2px dashed #33839e;
  border-right: 1px dashed #33839e;
  border-radius: 10px 10px 0px 0px;
  background: repeating-linear-gradient(45deg, #aba7e6,#aba7e6 20px,#c2d6ff 20px, #c2d6ff 40px);
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#column2 {
  width: 25%;
  padding: 10px;
  border-top: 2px dashed #33839e;
  border-bottom: 2px dashed #33839e;
  border-left: 1px dashed #33839e;
  border-right: 1px dashed #33839e;
  border-radius: 10px 10px 0px 0px;
  background: repeating-linear-gradient(45deg, #aba7e6,#aba7e6 20px,#c2d6ff 20px, #c2d6ff 40px);
}

#column3 {
  width: 25%;
  padding: 10px;
  border-top: 2px dashed #33839e;
  border-bottom: 2px dashed #33839e;
  border-left: 1px dashed #33839e;
  border-right: 1px dashed #33839e;
  border-radius: 10px 10px 0px 0px;
  background: repeating-linear-gradient(45deg, #aba7e6,#aba7e6 20px,#c2d6ff 20px, #c2d6ff 40px);
}

#column4 {
  width: 25%;
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
  border-top: 2px dashed #33839e;
  border-bottom: 2px dashed #33839e;
  border-left: 1px dashed #33839e;
  border-right: 1px dashed #33839e;
  background: repeating-linear-gradient(45deg, #aba7e6,#aba7e6 20px,#c2d6ff 20px, #c2d6ff 40px);
}