body {
    background-color: #202020;
}


h1 {
    font-family:cursive;
}
.inside {
    max-width: 800px;
    margin:auto;

    text-align:center;
    color:white;

    font-size:1.1rem;
    padding:5px;
}

#input {
    height:250px;
    resize:none;
    font-family:monospace;
    color:#40ff40;

    background-color:#000000;
    font-size:14px;

    width: 100%;
    border:0;
    box-shadow: none;
    outline: none;
    border-radius:5px;
}

.io-container {
    display:block;
    margin:15px 0 15px 0;
    width:100%;
    border:2px solid #ffffff;
    border-radius:5px;
    
    text-align:left;
    background-color:#000000;
}
#log {
    overflow-wrap:break-word;
    white-space:pre-wrap;
    font-family:monospace;
    color:#40ff40;

    padding:5px;
    width:100%;
}
.io-container > button {
    color:#ffffff;
    display:block;
    width:100%;
    font-size:1.5rem;
    text-align:center;

    padding:5px;

    background-repeat:repeat-x;
    background-image: url(grey-stripes.png);
    background-size: contain;

    border: 0;
    filter:contrast(130%);
    transition:filter 0.2s ease;

    --border:2px solid #404040;
}
.io-container > button:hover {
    filter:contrast(120%);
}
#compile {
    border-radius: 0px 0px 5px 5px;
    border-top:var(--border);
}
#copy {
    border-radius: 5px 5px 0px 0px;
    border-bottom:var(--border);
}



.highlightHover {
    transition: color 0.25s 0s;
}
.highlightHover:hover {
    color:grey;
    cursor:pointer;
}
.alt-font {
    font-family:sans-serif;
}
.link-button {
    display:block;
    text-decoration: none;
    background-color: white;

    padding:5px 10px;
    margin:5px auto;
    border-radius:5px;

    color:black;
    font-size:1.2rem;

    border:2px solid #c0c0c0;

}