/* Specifies decorations for elements. Note that the colors are in a different
 * file.
 */
@font-face {
   font-family: 'dotmatrix';
   src: url('/project/webroot/assets/font/Arcade.ttf') format('truetype');
}

html {
   font-family: serif;
}

.topbar {
   box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
}

.border {
   border-style: solid;
   border-width: 1px;
   padding: 1em;
}

.box-shadow {
   box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
}

.btn {
   box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
   border-style: none;
   padding: 0.5em 1em 0.5em 1em;
   text-transform: uppercase;
   cursor: pointer;
   text-decoration: none;
   font-family: Roboto;
}

a {
   cursor: pointer;
}

.btn:active:not(:disabled) {
   box-shadow: 0 0 1px 0 var(--color-box-shadow);
   transform: translate(2px, 2px);
   cursor: pointer;
   text-decoration: none;
   font-family: Roboto;
}

.btn:disabled {
   transform: none !important;
}

.btn-outline {
   border: 1px solid var(--color-bg-gray);
}

.link {
   box-shadow: none;
   border-style: none;
   cursor: pointer;
   text-decoration: none;
   text-transform: none;
}

.card {
   box-shadow: 2px 2px 5px 0 var(--color-box-shadow);
}

.banner {
   border-style: solid;
   border-width: 1px;
   text-transform: lowercase;
}

nav>* {
   cursor: pointer;
}

summary {
   cursor: pointer;
}

.form {
   border-style: none;
}

#container-status {
   border: 1px solid black;
   font-size: xx-small;
   font-family: monospace;
   overflow: scroll;
   height: 80vh !important;
   margin-top: 5em;
   z-index: 0;
}

.status-message {
   border: 1px solid black;
   font-size: xx-small;
   font-family: monospace;
   padding: 1em;
   margin: 1em;
   overflow: scroll;
}

.status-message-error {
   background-color: #ffdfdf;
   color: black;
}

.status-message-success {
   background-color: #afffaf;
   color: black;
}

.status-message-target {
   background-color: #afffff;
   color: black;
}

.status-message-payload {
   background-color: #ffffad;
   color: black;
}

/* TODO: This doesn't work yet */
[required]::after {
   content: ' *';
   color: red;
}