@font-face {
    font-family: 'ITCAvantGardeStd-Bold';
    src: url(../font/ITCAvantGardeStd-Bold.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Demi';
    src: url(../font/ITCAvantGardeStd-Demi.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Bk';
    src: url(../font/ITCAvantGardeStd-Bk.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Md';
    src: url(../font/ITCAvantGardeStd-Md.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-XLt';
    src: url(../font/ITCAvantGardeStd-XLt.otf);
}
@font-face {
    font-family: 'Zepto';
    src: url(../font/zepto/Zepto-Regular.ttf);
}
body {
    background-image:url(../img/content/background_image.jpg);
    background-size:cover;
}
body ::selection {
    color: #001111;
    background-color: #ddffff;
}
html {
    margin-top: 0px !important;
    overflow-x: hidden;
    background-color:black;
}
div, p, span, ul, li, button {
	font-family: 'Zepto';
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Zepto';
	font-weight: bold;
    margin-top: 20px;
}
body .ds-title-container-front {
    position: absolute;
    max-width: 100% !important;
    width: 100% !important;
    top: 2vh;
    left: 0;
}
body .ds-title-container-back {
    position: absolute;
    max-width: 100% !important;
    width: 100% !important;
    top: 2vh;
    left: 0;
}
.loading {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index:99999999999;
}
.loading p {
    font-size: 40px;
    margin: 200px auto;
    text-align: center;
    font-family: 'Zepto';
    animation-name: loading;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes loading {
  0% {text-shadow: 0px 0px 50px #164f4f;color: cyan;}
  25% {text-shadow: 0px 0px 50px #4f1616;color: red;}
  50% {text-shadow: 0px 0px 50px #4f4e16;color: yellow;}
  100% {text-shadow: 0px 0px 50px #254f16;color: green;}
}
.digitorum-title {
    font-size: 50px;
}
.ds-title-container-front h2 {
    position:relative;
    text-align: center;
    margin: 0 auto;
    text-transform:uppercase;
    color:cyan;
    text-shadow: 0px 0px 50px #164f4f;
    animation-name: front;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ds-title-container-back h2 {
    position:relative;
    text-align: center;
    margin: 0 auto;
    text-transform:uppercase;
    color:blue;
    animation-name: back;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes bullet-left {
  from {transform: rotate(270deg) scaleY(-1) translateX(-7vw) translateY(-5.8vw)}
  to {transform: rotate(270deg) scaleY(-1) translateX(-7vw) translateY(200vw)}
}
@keyframes front {
  0% {text-shadow: 0px 0px 50px #164f4f;}
  25% {text-shadow: 0px 0px 50px #4f1616;}
  50% {text-shadow: 0px 0px 50px #4f4e16;}
  100% {text-shadow: 0px 0px 50px #254f16;}
}
@keyframes back {
  0% {color: cyan;}
  25% {color: red;}
  50% {color: yellow;}
  100% {color: green;}
}
.page-content {
    width:100%;
    height:calc(100vh + 250px);
}
.footer {
    width:100%;
    height:50px;
}
.canvas-container {
    position:absolute;
    z-index:-1;
    padding:20px;
    background-color:#555;
    display:none;
}
.capture {
    position:absolute;
    width:100%;
    max-width:900px;
    top:calc(6vh + 50px);
    left:50%;
    transform:translateX(-50%);
    background-color:#111;
    border:1px solid #eee;
}
.date-time-container {
    width:100%;
    text-align:center;
    margin-bottom: 20px;
}
.date-time {
    margin:0 auto;
    color:#999;
    font-size:14px;
}
.timebox-heading h2 {
    text-align: center;
    text-transform:uppercase;
    cursor:pointer;
    transition: all 0.5s;
}
.timebox-heading h2:hover {
    text-shadow:0px 0px 10px #008686;
    color:#aaffff;
    transition: all 0.5s;
}
hr {
    background-color:#ccc;
}
textarea {
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-all;
    overflow-x: scroll;
}
.column-wrapper {
    display:flex;
}
.left-column {
    flex:50%;
    margin:0px 5px 10px 10px;
}
.right-column {
    flex:50%;
    margin:0px 10px 10px 5px;
}
tr.input ::selection {
    color: #ddffff;
    background-color: #001111;
}
tr.boxes ::selection {
    color: #ddffff;
    background-color: #001111;
}
tr.input {
    background:#fff;
    color:#000;
    border:1px solid #222;
    text-align: center;
}
tr.boxes {
    background:#fff;
    color:#000;
    border:1px solid #222;
    text-align: center;
}
.input td {
    padding:5px;
}
.boxes td {
    padding:5px;
}
.input input {
    border:none;
    text-align: center;
    color: #555;
    font-family: sans-serif;
    font-weight: 900;
}
.boxes input {
    border:none;
    text-align: center;
    color: #555;
    font-family: sans-serif;
    font-weight: 600;
    font-size:12px;
    padding:0 5px;
}
.input input:focus {
    color: #000;
}
.boxes input:focus {
    color: #000;
}
th {
    text-align:center;
    text-transform:uppercase;
    border:none;
}
table {
    border:none;
}
td.num {
    color:#555;
    text-align:center;
    background-color: #ccc;
}
.input textarea {
    border:none;
    text-align: justify;
    color: #111;
    font-family: sans-serif;
    font-weight: 600;
    height:630px;
    font-size:14px;
}
.brain-dump-paragraph {
    border:none;
    text-align: justify;
    color: #111;
    font-family: sans-serif;
    font-weight: 600;
    height:601px;
    overflow-wrap: normal;
    word-break: normal;
    white-space: pre-line;
    font-size:14px;
}
@media only screen and (max-width: 600px) {
    .capture {
        top:calc(4vh + 50px);
    }
    .digitorum-title {
        font-size: 30px;
    }
    .timebox-heading h2 {
        font-size:26px;
    }
    th {
        font-size:16px;
    }
    input[type='text'] {
        font-size:12px;
    }
    .input input {
        font-size:14px;
    }
    .boxes input {
        font-size:12px;
        font-weight:600;
    }
    .input td {
        padding:1px;
    }
    .boxes td {
        padding:1px;
    }
    textarea {
        font-size:12px;
        padding:10px;
    }
    .brain-dump-paragraph {
        font-size:12px;
        padding:10px;
        height:548px;
    }
    tr.textarea {
        padding:2px;
    }
    .column-wrapper {
        display:block;
    }
    .left-column {
        flex:100%;
        margin:0px 10px 10px 10px;
    }
    .right-column {
        flex:100%;
        margin:0px 10px 10px 10px;
    }
    .date-time {
        font-size:14px;
    }
}