* {
    margin: 0;
}

body {
    background-color: #111111;
    text-align: center;
}

h1 {
    color: #a7a7a7;
    font-size: 5vw;
    letter-spacing: 20px;
}

p, label {
    font-family: "Roboto", sans-serif;

    color: #919191
}

p#error {
    color: #802929
}

.textContainer {
    margin: 30px auto;
    width: 30vw;
}

a.button {
    display:inline-block;
    padding:0.7em 1.4em;
    margin:0 0.3em 0.3em 0;
    border-radius:0.15em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    color:#a5a5a5;
    background-color:#444444;
    box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
    text-align:center;
    position:relative;
    transition: all 0.15s;
    user-select: none;
    cursor: pointer;
}

a.button:active {
    top:0.1em;
}

a.button:hover {
    color:#FFFFFF;
    border-color:#FFFFFF;
}

a.button#create {
    background-color: #214d21;
}

@media all and (max-width:425px){
    a.button{
        display:block;
        margin:0.4em auto !important;
    }

    .textContainer {
        width:100%
    }

    #code p, #code pre {
        display: none;
    }
}

input {
    margin: 10px auto;
}

input[type="date"] {
    display: block;
    background-color: #5e5e5e;
    border: none;
}

#result {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #5e5e5e;
}

#jsDate {
    margin-top: 10px;
}

#code {
    margin-top: 50px;

    display: flex; 
    flex-direction: column; 
    align-items: center;
}

pre {
    text-align: left;
    background-color: #181818;


    width: fit-content;
}

.tag {
    color: tomato !important;
}

.pln {
    color: #cccccc !important;
}

.kwd, .atn {
    color: #aa71ca !important;
}

.atv, .lit, .str {
    color: steelblue !important;
}

.com {
    color: grey !important;
}