/* file reset */
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #C0C0C0;
  height: auto;
  min-height: 100%;
  width: auto;
  padding-top: 4%;
  padding-left: 4%;
  /* scrollbar for firefox */
  scrollbar-width: auto;
  /* "auto" or "thin" */
  scrollbar-color: #cccccc #e6e6e6;
  /* scroll thumb and track */
}

p {
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.7em;
  padding-top: 0.5%;
  padding-bottom: 3%;
}

/* container of all icons */
.container {
  display: contents;
}

/* container holding icon and name */
.centericon {
  text-align: center;
  width: 50px;
  padding-bottom: 3%;
}

button:hover {
  cursor: pointer;
}

.foundation {
  margin-left: -3px;
}

.about {
  margin-left: 6px;
}

.jobs {
  margin-left: 5px;
}

.contact-name {
  margin-left: 7px;
}

/* change images on hover */
.folder {
  background-image: url("img/folder.svg");
  width: 58px;
  height: 47px;
}

.folder:hover {
  background-image: url("img/folder-open.svg");
  width: 67px;
  height: 55px;
  /* margin-left: -10px;
  margin-top: -8px; */
  position: relative;
  top: -8px;
  left: -8px;
  margin-bottom: -8px;
}

.computer {
  background-image: url("img/computer.svg");
  width: 57px;
  height: 57px;
}

.computer:hover {
  background-image: url("img/desktop-active.svg");
  width: 57px;
  height: 57px;
}

.mail {
  background-image: url("img/mail.svg");
  width: 58px;
  height: 52px;
}

.mail:hover {
  background-image: url("img/mail-active.svg");
  width: 58px;
  height: 52px;
}

/* the folders are buttons so this is to remove button style from them  */
.click {
  background: transparent;
  border: 0px;
}

.click:hover {
  background: transparent;
  border: 0px;
}

/* popup about folder style */
.popup {
  background-color: #CCCCCC;
  z-index: 90;
  width: 45%;
  padding: 0.3%;
  position: absolute;
  display: none;
  text-align: left;
  font-size: 1.3em;
  border-style: outset;
  border-color: #E6E6E6;
  border-width: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup p {
  background-color: white;
  padding: 6%;
  border-style: inset;
  border-color: #D9D9D9;
  height: 300px;
  overflow: scroll;
  line-height: 1.3;
}

.popup h1 {
  background-color: #1B00AA;
  padding: 0.6%;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.75em;
  color: white;
  height: 20px;
  line-height: 1.3;
}

.popup img {
  width: 97%;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

/* popup about folder close x button */
.close {
  font-family: verdana;
  font-size: 0.7em;
  border-style: outset;
  border-color: #D9D9D9;
  border-width: 2px;
  width: 24px;
  line-height: 1.2 !important;
  position: absolute;
  z-index: 91;
  top: 6px;
  right: 5px;
  border-radius: 10%;
}

/* popup foundation folder button style aka the icon/image */
.click2 {
  background: transparent;
  border: 0px;
}

.click2:hover {
  background: transparent;
  border: 0px;
}

/* popup foundation folder style */
.popup2 {
  background-color: #CCCCCC;
  z-index: 90;
  width: 45%;
  padding: 0.3%;
  position: absolute;
  display: none;
  text-align: left;
  font-size: 1.3em;
  border-style: outset;
  border-color: #E6E6E6;
  border-width: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup2 p {
  background-color: white;
  padding: 6%;
  border-style: inset;
  line-height: 1.3;
  border-color: #D9D9D9;
}

.popup2 h1 {
  background-color: #1B00AA;
  padding: 0.6%;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.75em;
  color: white;
  height: 20px;
  line-height: 1.3;
}

.popup2 a {
  padding: 0.6%;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.6em;
}

.popup2 img {
  width: 97%;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.contact {
  background-color: #E6E6E6;
  border-style: outset;
  border-color: #808080;
  border-width: 2px;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.8em;
  padding: 0.3%;
  padding-right: 1%;
  padding-left: 1%;
}

.contact:hover {
  background-color: #CCCCCC;
  border-style: inset;
  border-color: #808080;
  border-width: 2px;
}

/* popup foundation folder close x button */
.close2 {
  font-family: verdana;
  font-size: 0.7em;
  border-style: outset;
  border-color: #D9D9D9;
  border-width: 2px;
  width: 24px;
  line-height: 1.2;
  position: absolute;
  z-index: 91;
  top: 6px;
  right: 5px;
  border-radius: 10%;
}

/* footer */
footer p {
  text-align: left;
  background-color: #C0C0C0;
  color: black;
  position: absolute;
  bottom: 5px;
  padding: 0.5%;
  border-style: inset;
  border-color: #E6E6E6;
}

footer {
  background-color: #C0C0C0;
  color: black;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 99.1%;
  height: 27px;
  padding: 1% 0 0 0.5%;
  border-style: outset;
  border-color: #E6E6E6
}

/* bottom right time display */
.clock {
  position: absolute;
  bottom: 8px;
  right: 5px;
  padding: 0.5%;
  border-width: 0px;
  background-color: transparent;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.7em;
}

/* scrollbar fo chrome, edge, and safari (scrollbar for firefox is in body)*/
*::-webkit-scrollbar {
  width: 20px;
}

*::-webkit-scrollbar-track {
  background: #e6e6e6;
}

*::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 0px;
  border: 2px outset #E6E6E6;
}

/* screensaver */
#myVideo {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100vh;
    min-width: 100vw;
  width: 100%;
  height:100%;
    z-index: 99;
    object-fit: cover;
}

/* START OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */
/* START OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */
/* START OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */
.popup3 {
  background-color: #CCCCCC;
  z-index: 90;
  width: 45%;
  padding: 0.3%;
  position: absolute;
  display: none;
  text-align: left;
  font-size: 1.3em;
  border-style: outset;
  border-color: #E6E6E6;
  border-width: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup3 p {
  background-color: white;
  padding: 4%;
  padding-bottom: 15%;
  border-style: inset;
  border-color: #D9D9D9;
  height: 40px;
  /* overflow: scroll; */
  line-height: 1.3;
  text-align: center;
}
.popup3 h1 {
  background-color: #1B00AA;
  padding: 0.6%;
  font-family: lores-12, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.75em;
  color: white;
  height: 20px;
  line-height: 1.3;
}
.popup3 img {
  width: 97%;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.close3 {
  font-family: verdana;
  font-size: 0.7em;
  border-style: outset;
  border-color: #D9D9D9;
  border-width: 2px;
  width: 24px;
  line-height: 1.2 !important;
  position: absolute;
  z-index: 91;
  top: 6px;
  right: 5px;
  border-radius: 10%;
}
.click3 {
  background: transparent;
  border: 0px;
}
.click3:hover {
  background: transparent;
  border: 0px;
}
/* END OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */
/* END OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */
/* END OF TEMPORARY UNDER CONSTRUCTION JOBS POPUP */

@media only screen and (min-width: 800px){
#myVideo{
	display:block;
}
}


/* mobile version */
@media only screen and (max-width: 768px) {
  body {
    padding-top: 10%;
    padding-left: 10%;
  }

  /* icon name font size */
  p {
    font-size: 1em;
  }

  /* container of all icons */
  .container1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-right: 12%;
  }

  .container2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-right: 14%;
  }

  .foundation {
    margin-left: -3px;
  }

  .about {
    margin-left: -2px;
  }

  .jobs {
    margin-left: -1px;
  }

  .contact-name {
    margin-left: -2px;
  }

  /* container holding icon and name */
  .centericon {
    text-align: center;
    width: auto;
    padding-bottom: 8%;
    padding: 5%;
  }

  /* icon resizing */
  .folder {
    background-image: url("img/folder.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 69.6px;
    height: 56.4px;
  }

  .folder:hover {
    background-image: url("img/folder-open.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80.4px;
    height: 66px;
    margin-left: 0px;
    margin-top: -2px;
  }

  .computer {
    background-image: url("img/computer.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 68.4px;
    height: 68.4px;
  }

  .computer:hover {
    background-image: url("img/desktop-active.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 68.4px;
    height: 68.4px;
  }

  .mail {
    background-image: url("img/mail.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 73.8px;
    height: 66px;
  }

  .mail:hover {
    background-image: url("img/mail-active.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 74px;
    height: 68px;
  }

  /* about folder popup window */
  .popup {
    height: 50%;
    width: 90%;
    margin-top: -15%;
  }

  .popup p {
    height: 75%;
    font-size: 0.69em;
  }

  .popup img {
    display: none;
  }

  .close {
    font-size: 0.5em;
    height: 19px;
    width: 19px;
    top: 2px;
    right: 2px;
  }

  /* foundation folder popup window */
  .popup2 {
    height: auto;
    width: 90%;
    margin-top: -15%;
  }

  .popup2 p {
    height: 60%;
    overflow: scroll;
    font-size: 0.69em;
  }

  .popup2 img {
    display: none;
  }

  .close2 {
    font-size: 0.5em;
    height: 19px;
    width: 19px;
    top: 2px;
    right: 2px;
  }

  .contact {
    border-width: 2px;
    font-size: 1em;
    padding: 1%;
    padding-right: 2.5%;
    padding-left: 2.5%;
    margin-top: 3px;
  }

  /* footer */
  footer p {
    bottom: 5px;
    padding: 1%;
    padding-left: 2%;
    padding-right: 2%;
  }

  footer {
    padding: 1.5%;
    width: 98%;
    padding: 3% 0 0 1%;
  }

  /* screensaver */
  #myVideo {
    display: none !important;
    opacity:0 !important;
  }

  /* START OF TEMPORARY UNDER CONSTRUCTION POPUP */
  /* START OF TEMPORARY UNDER CONSTRUCTION POPUP */
  /* START OF TEMPORARY UNDER CONSTRUCTION POPUP */
  .popup3 {
    height: auto;
    width: 90%;
    margin-top: -15%;
  }

  .popup3 p {
    height: 60%;
    overflow: scroll;
    font-size: 0.69em;
  }

  .popup3 img {
    display: none;
  }

  .close3 {
    font-size: 0.5em;
    height: 19px;
    width: 19px;
    top: 2px;
    right: 2px;
  }
  /* END OF TEMPORARY UNDER CONSTRUCTION POPUP */
  /* END OF TEMPORARY UNDER CONSTRUCTION POPUP */
  /* END OF TEMPORARY UNDER CONSTRUCTION POPUP */

}