$colorfg: #212121;
$colorborder: #f2f2f2;
$color01: #0fa0ce;

body {
    margin: 0;
    color: $colorfg;
}

hr {
    border: 1px solid $colorborder;
}

.sidebar {
    position:fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 20ch;
    border-right: 1px solid $colorborder;

    .items {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
    }

    .item {
        line-height: 2em;
    }

    .end {
        margin-top: auto;

        a {
            padding: 2em 0;
        }
    }

    a, span {
        display:block;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .2rem;
        text-decoration: none;
        color: $colorfg;

    }

    a:hover {
        color: $color01;
    }

    h1 {
        text-align:center;
    }
}

.container {
    margin-left: 20ch;
    height:100vh;
    padding: 0em 2em;
}

@media (max-width: 600px) {
    .sidebar{
        display: none;
    }

    .container{
        margin-left: 0;
    }

}

table {
    width: 100%;
    border-collapse: collapse;

    th {
        background: $colorfg;
        color: $colorborder;
        font-weight: bold;
        text-transform: uppercase;
    }

    td, th {
        padding: 6px;
        height: 2em;
        border-bottom: 1px solid $colorfg;
        text-align: left;
    }

    td.controls {
        a {
            display:block;
            text-transform: uppercase;
            font-weight: bold;
            text-decoration: none;
            color: $colorfg;
        }
    }

    th.controls {
        a {
            display:block;
            text-transform: uppercase;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }
    }
}

form {
    height: 100%;

    label {
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: .9em;
    }

    input[type=text], textarea{
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 2em;
        border: 1px solid $colorfg;
        border-radius: 4px;
        margin-bottom: 1em;
        padding: .4em;
    }

    textarea {
        box-sizing: border-box;
        height: 30em;
    }


    input[type=submit]{
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        color: $colorfg;
        border: 1px solid $colorfg;
        border-radius: 4px;
        background-color: #fff;

        font-weight: bold;  
        height: 38px;
        padding: 0 38px;
        margin-bottom: 3em;
        text-transform: uppercase;
    }
}