/* Defaults
 *  - Font & Cursor
 *  - Schematic link (.pdf, .ig, etc.) frames
 *  - Coordinate frames
 *  - Time & date frames
 *  - Too lazy to reformat this
 *  - Stop copying me / inspecting me
 *  - (C) Christopher Dela Cruz. 2019, and beyond.
*/
#waveform {
  width: 5vw;
  transform: scaleX(8);
  margin: 0 auto;

}

.btn-pp {
  display: block;
  margin: 0 auto;
}
.work-img-caption {
  display: block;
  text-align: center;
  font-size: 12px;
  color: gray;
  padding: 5px;
}

#work-li {
  background-color: white;
}

#work-li > #work-img {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#work-li > #work-img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.vid-div {
  display: block;
  width: 100%;
  max-width: 600px;
  padding-top: 10px;
  margin: 0 auto;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.vid-div:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

* a:link {
  color: #0900B9;
}

* a:visited {
  color: #0900B9;
}

* a:active {
  color: red;
}

* a:hover {
  color: red;
}

* {
  text-decoration: none;
  font-family: 'VT323', 'monospace';
}

::selection {
  background: black;
  color: white;
}
::-moz-selection {
  background: black;
  color: white;
}

#x-cur {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted black;
  margin-top: -1px;
  z-index: 5;
}

#y-cur {
  height: 100%;
  width: 1px;
  border-left: 1px dotted black;
  margin-left: -1px;
  z-index: 5;
}

.hair {
  position: fixed;
  background-color: rgba(100, 100, 100, 0.1);
  pointer-events: none;
}

.xy-frame {
  color: black;
  position: fixed;
  bottom: 73px;
  right: 0px;
  width: 60px;
  height: 27px;
  border: 3px solid black;
  padding-top: 3px;
  padding-left: 10px;
  z-index: 5;
}

#move-x {
  font-size: 12px;
  color: black;
  text-align: left;
  z-index: 5;
}

#move-y {
  font-size: 12px;
  text-align: left;
  color: black;
  z-index: 5;
}

.rev-frame {
  color: black;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 20px;
  border: 3px solid black;
  padding-left: 10px;
  z-index: 5;
}

.rev-number {
  font-size: 12px;
  text-align: left;
  z-index: 5;
}

.time-frame {
  color: black;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: 3px solid black;
  padding: 10px;
  z-index: 5;
}

.time-frame>div {
  width: 100%;
  position: relative;
  top: -4px;
  text-align: left;
}

#date-part {
  font-size: 12px;
  color: black;
}

#time-part {
  font-size: 12px;
  color: black;
}

.schema-name {
  display: inline-block;
  position: fixed;
  bottom: 73px;
  right: 0;
  width: 300px;
  height: 10px;
  border: 3px solid black;
  padding: 10px;
  z-index: 3;
  font-size: 12px;
}

/* End defaults */

/* First page (landing enter page) */
.bg-index {
  background-image: url("../img/index.jpg"), url("../img/main.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.enter {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 50px;
  border: 3px solid black;
  padding: 10px;
  z-index: 2;
}

.enter:hover + .bg-index {
  background: url("../img/main.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* End of First page (landing enter page) */

/* Second page (Main navigational page) */
.bg-main {
  background-image: url("../img/main.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.work {
  display: inline-block;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 279px;
  width: 40px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.about {
  display: inline-block;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 180px;
  width: 40px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.contact {
  display: inline-block;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 226px;
  width: 50px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.work:hover + .bg-main {
  background: url("../img/main-work.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.about:hover + .bg-main {
  background: url("../img/main-contact.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.contact:hover + .bg-main {
  background: url("../img/main-about.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* End of Second page (Main navigational page) */

/* Contact page */
.email {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-decoration: none;
  font-size: 20px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  font-size: 12px;
  padding: 10px;
  color: lightgray;
}

.bg-contact {
  background-image: url("../img/contact.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.back {
  display: inline-block;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 268px;
  width: 50px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.ig {
  display: inline-block;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 245px;
  width: 20px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.ig-logo {
  cursor: pointer;
  position: absolute;
  width: 55px;
  height: 55px;
  top: 50%;
  left: 50%;
  border: 3px solid transparent;
  transform: translate(-96px, 92px);
  z-index: 2;
}

.ig-logo:hover + .bg-contact {
  background: url("../img/contact-ig.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.vm {
  display: inline-block;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 220px;
  width: 15px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.vm-logo {
  cursor: pointer;
  position: absolute;
  width: 55px;
  height: 55px;
  top: 50%;
  left: 50%;
  border: 3px solid transparent;
  transform: translate(13px, 92px);
  z-index: 2;
}

.vm-logo:hover + .bg-contact {
  background: url("../img/contact-vm.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.ig:hover + .bg-contact {
  background: url("../img/contact-ig.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.vm:hover + .bg-contact {
  background: url("../img/contact-vm.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* End of Contact page */

/* ABOUT page */
.schema-container {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 83px;
  border: 3px solid black;
  padding: 10px;
  z-index: 2;
  text-decoration: none;
  background-color: white;
}

.schema-border {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 83px;
  border: 3px solid black;
  padding: 10px;
  z-index: 2;
  background-color: white;
}

.page-frame {
  color: black;
  position: relative;
  margin: auto;
  width: 600px;
  max-width: 70%;
  border: 3px solid black;
  padding: 10px;
  z-index: 1;
}

.page-frame h1, h2, h3, h4 {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.page-frame p {
  text-align: justify;
}

.line {
  color: black;
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted black;
  z-index: 1;
}

.about-cdc {
  color: black;
  position: relative;
  margin: auto;
  width: 600px;
  max-width: 70%;
  font-size: 40px;
  border: 3px solid transparent;
  padding: 10px;
  z-index: 1;
}

.about-datasheet {
  color: black;
  position: relative;
  margin: auto;
  width: 600px;
  font-size: 20px;
  max-width: 70%;
  border: 3px transparent;
  padding: 10px;
  z-index: 1;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: center;
  padding: 5px;
}

table, th, td {
  border: 1px dotted black;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

#table-work #tr-work-2021:hover { background-color: #EB00C0; }
#table-work #tr-work-2020:hover { background-color: #ED201E; }
#table-work #tr-work-2019:hover { background-color: #6700ED; }
#table-work #tr-work-2018:hover { background-color: #060047; }
#table-work #tr-work-OLDER:hover { background-color: #4F00B0; }

#table-work #tr-work-2021:hover a { color: #FFFFFF; }
#table-work #tr-work-2020:hover a { color: #FFFFFF; }
#table-work #tr-work-2019:hover a { color: #FFFFFF; }
#table-work #tr-work-2018:hover a { color: #FFFFFF; }
#table-work #tr-work-OLDER:hover a { color: #FFFFFF; }

a.disabled {
  pointer-events: none;
  color: rgba(0,0,128,0.5);
}

/* End of ABOUT page*/
.bg-work {
  background-image: url("../img/work.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.work-all {
  display: inline-block;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 242px;
  width: 25px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.work-archive {
  display: inline-block;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 208px;
  width: 30px;
  height: 63px;
  border-top: 3px solid black;
  padding-top: 10px;
  z-index: 2;
}

.w-2021 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(145px, -153px);
  z-index: 2;
}

.w-2021:hover + .bg-work {
  background: url("../img/work-b1.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.w-2020 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(145px, -129px);
  z-index: 2;
}

.w-2020:hover + .bg-work {
  background: url("../img/work-b2.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.w-2019 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(145px, -105px);
  z-index: 2;
}

.w-2019:hover + .bg-work {
  background: url("../img/work-b3.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.w-2018 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(145px, -81px);
  z-index: 2;
}

.w-2018:hover + .bg-work {
  background: url("../img/work-b4.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.OLDER {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(140px, -57px);
  z-index: 2;
}

.OLDER:hover + .bg-work {
  background: url("../img/work-b5.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.w-random {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(137px, -32px);
  z-index: 2;
}

.w-random:hover + .bg-work {
  background: url("../img/work-b6.jpg");
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  background-size: 600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
}

.box-2021 {
  visibility: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 342px;
  font-size: 16px;
  border: 3px solid #E800C0;
  background-color: white;
  transform: translate(-152px, -156px);
  z-index: 3;
}

.box-2020 {
  visibility: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 342px;
  font-size: 16px;
  border: 3px solid #EA201E;
  background-color: white;
  transform: translate(-152px, -156px);
  z-index: 3;
}

.box-2019 {
  visibility: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 342px;
  font-size: 16px;
  border: 3px solid #6500EF;
  background-color: white;
  transform: translate(-152px, -156px);
  z-index: 3;
}

.box-2018 {
  visibility: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 342px;
  font-size: 16px;
  border: 3px solid #050047;
  background-color: white;
  transform: translate(-152px, -156px);
  z-index: 3;
}

.box-OLDER {
  visibility: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 342px;
  font-size: 16px;
  border: 3px solid #4C00B2;
  background-color: white;
  transform: translate(-152px, -156px);
  z-index: 3;
}

.container-work table {
  height: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

/* BEGIN WORK PAGE */