VELTRON.NET/css/crt_television.css

/* TV Container */
.crt-tv-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}
.crt-tv-top-container {
  background-color: #d8d5d5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  display: flex;
  width: 390px;
  height: 250px;
  padding: 45px 0px 5px 0px;
}
/* Left */
.crt-tv-left {
  background-color: #817d7b;
  background-size: 4px 4px;
  background-image: repeating-linear-gradient(
    45deg,
    #c0bcba 0,
    #c0bcba 0.4px,
    #a7a3a1 0,
    #a7a3a1 50%
  );
  border-right: 20px solid #c9c7c7;
  border-left: 5px solid #c9c7c7;
  border-top: 5px solid #c9c7c7;
  border-bottom: 5px solid #c9c7c7;
  width: 100px;
  height: 186px;
}
/* Right */
.crt-tv-right {
  background-color: #817d7b;
  background-size: 4px 4px;
  background-image: repeating-linear-gradient(
    45deg,
    #c0bcba 0,
    #c0bcba 0.4px,
    #a7a3a1 0,
    #a7a3a1 50%
  );
  border-right: 5px solid #c9c7c7;
  border-left: 20px solid #c9c7c7;
  border-top: 5px solid #c9c7c7;
  border-bottom: 5px solid #c9c7c7;
  width: 100px;
  height: 186px;
}
/* Middle  */
.crt-tv-middle {
  border-top: 5px solid #c9c7c7;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.crt-screen-div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-left: 3px solid #c9c7c7;
  border-right: 3px solid #c9c7c7;
  border-bottom: 5px solid #c9c7c7;
  width: 240px;
  height: 187.5px;
  position: relative;
  padding: 3.5px;
}
#crtVideo {
  filter: brightness(1) saturate(1.1) contrast(1) blur(0.5px);
  width: 100%;
  height: 99%;
  border-radius: 5px;
}
.crt-static {
  border-radius: 3px;
  pointer-events: none;
  position: absolute;
  width: 98%;
  height: 98%;
  opacity: 0.07;
  z-index: 2;
}
.crt-branding {
  background: #a3a09c;
  color: #212121;
  letter-spacing: 2px;
  font-weight: bold;
  margin: 5px 0px 5px 0px;
  padding: 3px;
  width: 50px;
}
/* Bottom buttons */
.crt-bottom-buttons {
  background-color: #d4d4d4;
  border: 2px solid #9b9b9b;
  display: flex;
  align-items: center;
  padding: 3px 10px 2px 10px;
  height: 20px;
  width: 200px;
}
#crtUpload {
  background-color: #d0d0d0;
  border: 2px solid #a1a1a1;
  color: #3c3c3c;
  padding: 1px 5px 1px 5px;
  font-size: 0.6em;
}
#crtUpload:hover {
  cursor: url("images/pointer.html"), pointer;
}
.crt-on-button {
  color: red;
  font-size: 30px;
  margin-left: 5px;
}
.crt-off-button {
  color: black;
  font-size: 30px;
}
#crtReset {
  background-color: #d0d0d0;
  border: 2px solid #929191;
  color: #3c3c3c;
  padding: 1px 5px 1px 5px;
  margin: 0px 5px;
  font-size: 0.6em;
}
#crtReset:hover {
  cursor: url("images/pointer.html"), pointer;
}
#crtURL {
  background-color: #d0d0d0;
  border: 2px solid #929191;
  color: #3c3c3c;
  padding: 1px 5px 1px 5px;
  font-size: 0.6em;
  width: 100%;
}

/* TV Stand */
.crt-stand-arm {
  background-color: #b0aeae;
  height: 4px;
  width: 310px;
  margin: 0 auto;
}
.crt-stand {
  background-color: #c3c2c2;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  height: 3px;
  width: 320px;
  margin: 0 auto;
}
.crt-stand-bottom {
  background-color: #c3c2c2;
  height: 2px;
  width: 320px;
  margin: 0 auto;
}

/* Table */
.crt-table-top {
  background-color: #9a7656;
  height: 10px;
  width: 505px;
}
.crt-table-middle {
  background-color: #63462d;
  border-left: 10px solid #79593d;
  border-right: 10px solid #79593d;
  border-bottom: 10px solid #79593d;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  height: 350px;
  width: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.crt-table-background {
  background-color: #533f2d;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.crt-table-background img {
  width: 51px;
  height: 75px;
  max-height: 120px;
  margin: 0px 4px 0px 4px;
}
.crt-table-structure {
  background-color: #6e5034;
  height: 13px;
  width: 100%;
}
.crt-table-bottom {
  background-color: #9e846c;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.253);
  height: 5px;
  width: 485px;
}

/* Introduction Container */
.crt-text {
  width: 92%;
  padding: 10px 10px 13px 10px;
  margin: 15px auto 0px auto;
}
#crtSection p {
  font-size: 0.9em;
}

/* Instructions Container */
.crt-instructions {
  width: 92%;
  padding: 10px 10px 7px 10px;
  margin: 20px auto 0px auto;
}
.crt-instructions p {
  font-size: 0.9em;
}
.crt-instructions img {
  width: 100%;
}