@font-face {
  font-family: dotmatrix;
  src: url(./DOTMATRI.TTF);
}
@font-face {
  font-family: Inter;
  src: url(./Inter-Regular.woff2);
}
@keyframes headingAnim {
  0%   {color: red; opacity: 0;}
  10% {opacity: 1;}
  50%  {color: green;}
  100% {color: blue;}
}
@keyframes fadeInAnim {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes flashAnim {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
.flash{
  animation: flashAnim 0.5s infinite alternate;
}
:root {
  --body-color: rgba(221, 221, 221, 0.75);
  --button-color: rgb(150, 150, 150);
  --button-hover-color: rgb(119, 119, 119);
  --wrapper-color: rgba(161, 161, 161, 0.5);
  --wrapper-color-second: rgba(255, 255, 255, 0.5);
  font-size:140%;
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Inter, "Open Sans", sans-serif;
  font-weight: 500;
}
body {
  background-image: url(./background_image.png);
  width: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color:var(--body-color);
  -webkit-animation: fadeInAnim .5s ease-out;
  animation: fadeInAnim .5s ease-out;
}
.heading-wrapper{
  width: 100%;
  background-image: linear-gradient(180deg, var(--wrapper-color),var(--wrapper-color-second),var(--wrapper-color));
}
#heading, h2{
  padding: 0.65rem;
  font-family: dotmatrix;
  font-weight: 500;
  text-align: center;
  color: blue;
  text-shadow: 0px 0px 5px blue;
}
.id-wrapper{
  width: auto;
  padding: 0.65rem;
  margin-right: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  background: var(--body-color);
  box-shadow: 0px 0px 2px black;
}
.tool-wrapper{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.65rem;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  box-shadow: 0px 0px 2px black;
  background-image: linear-gradient(180deg, var(--wrapper-color),var(--wrapper-color-second),var(--wrapper-color));
}
.color-buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.message-wrapper{
  width: 90%;
  padding: 0.65rem;
}
.message-box {
  display: block;
  width: 100%;
  max-height: 150px;
  min-height: 150px;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 12px;
  margin-top: 0.5rem;
  font-size: 1.3rem;
  word-spacing: -0.3rem;
  overflow: auto;
  background: white;
  cursor: default;
  white-space: pre; /* Allows spaces and new lines */
  box-shadow: 0px 0px 2px black;
}
.message-box:focus {
  outline: 1px solid black;
}
.message-box span{
  font-family: dotmatrix;
  word-break: keep-all;
}
.message-box .event{
  font-family: Inter;
  font-size: 0.9rem;
}

.event-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  max-height: 0;
  padding: 0;
  scale: 100% 0%;
  font-size: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0px 0px 2px black;
  background-image: linear-gradient(180deg, var(--wrapper-color),var(--wrapper-color-second),var(--wrapper-color));
  transform-origin: top;
  transition: all .2s ease-out;
}
.show{
  max-height: 100%;
  scale: 100% 100%;
  padding: 0.65rem;
  margin-top: 0.5rem;
}
.hide{
  display: none;
}
.button-wrapper {
  display: flex;
  margin: 1rem;
}
.together {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 1rem;
}
.brightness-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
}
input {
  height: 2rem;
  width : 100%;
  margin: 0;  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .1s;
  transition: .1s;
  border-radius: 0.5rem;
}
input[type=text] {
  width: 8rem;
  padding: 0.4rem;
  margin: 0;
  font-size: 1rem;
  text-align: center;
}
input[type=text]::placeholder {
  font-size: 0.9rem;
}
input[type=button], .button {
  width: auto;
  background-image: linear-gradient(var(--button-color), var(--wrapper-color), var(--button-color));
  border: none;
  color: black;
  padding: 0px 0.65rem;
  margin: 0.5rem;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  opacity: .9;
  font-size: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
  border-radius: 0.5rem;
}
input[type=button]:hover, .button:hover {
  scale: 105%;
  background-color: var(--button-hover-color);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.75);
  opacity: 1;
}
input[type=button]:active {
  scale: 110%;
  background-color: var(--button-hover-color);
  opacity: 1;
}
input[type=datetime-local] {
  font-size: 0.8rem;
  width: 10rem;
  padding: 1px 1px;
  margin: 0;
}
input.colorbutton {
  padding: 0px 0.65rem;
  font-weight: bolder;
  background-image: none;
}
#flashing{
  width: 4rem;
  border: solid grey;
  background-image: linear-gradient(var(--button-color), var(--wrapper-color), var(--button-color));
}
#red {
  border: solid rgb(255, 40, 40);
  background-color: red;
  opacity: .85;
}
#green {
  border: solid rgb(41, 128, 41);
  background-color: green;
  opacity: .85;
}
#blue {
  border: solid rgb(60, 60, 255);
  background-color: rgb(35, 35, 255);
  opacity: .85;
}
#white {
  border: solid lightgrey;
  background-color: white;
  opacity: .85;
}
#red:hover,#green:hover,#blue:hover,#white:hover,#flashing:hover {
  border-color: darkslategray;
}
.active-colour{
  border-color: black !important;
  scale: 105% !important;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.75) !important;
}
.button-disabled{
  opacity: 0.3 !important;
  background-color: darkslategray !important;
  scale: 1 !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75) !important;
}
#help{
  position: absolute;
  height: auto;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  top: 0;
  right: 0;
  border-radius: 0.4rem;
}
.help-content{
  text-align: center;
}
.slider {
  width: 80%;
  height: 15px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .5s; /* 0.5 seconds transition on hover */
  transition: opacity .5s;
}
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.console-wrapper{
  width: 90%;
}
#console {
  font-size: 1rem;
  text-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px;
  width:100%;
  display: inline-block;
  max-height: 100px;
  min-height: 100px;
  background-color: white;
  border-radius: 0.5rem;
  overflow-y: scroll;
  box-shadow: 0px 0px 2px black;
}

@media(max-width: 1010px),(max-height: 870px) {
  :root{font-size: 130%;}
}
@media(max-width: 825px),(max-height: 820px) {
  :root{font-size: 120%;}
}
@media(max-width: 890px),(max-height: 790px) {
  .id-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .id-wrapper h3{
    margin-right: 0.5rem;
  }
}
@media(max-width: 700px),(max-height: 790px) {
  :root{font-size: 110%;}
}
@media(max-width: 510px),(max-height: 740px) {
  :root{font-size: 100%;}
}

/* Fix for iPhone Hover sticking */
@media (hover: none) {
  input[type="button"]:hover {
    background-color: var(--button-color);
  }
}