body {
    background-color: rgb(22, 22, 22);
    color: rgb(255, 255, 255);
    margin: 0px;

    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Nav styles */
.navbar {
    display: flex;
    justify-content: space-between;
    padding: 36px; 
}

.nav-left {
    display: flex;
}

.nav-right {
    display: flex;
}

.navbar > .nav-left > div {
    display: flex;
    margin-right: 16px;
    font-size: 1em;
    text-transform: uppercase;
}

.nav-link {
    font-weight: 400;
    
    height: 22px;
    border-bottom: 3px solid white;
    transition: border-bottom 0.5s;
}

.nav-link a {
    text-decoration: none;

    color: rgb(255, 255, 255);
    text-shadow: transparent;

    transition: color 0.5s;
    transition: text-shadow 0.5s;
}

.nav-link:hover {
    color:rgb(155, 155, 155);
    border-bottom: 3px solid rgb(155, 155, 155);

    text-shadow: 2px 2px rgb(0, 0, 0);
}

/* Page content */
.content {
    display: flex;
    justify-content: space-between;

    padding: 50px;

    height: 100%;
}

/* Text stuff */ 
.text-header {
    padding: 20px;

    font-size: 39px;

    justify-content: center;

    display: flex;
    height: 60px;

    font-weight: 400;
}

.text-header-small {
    padding: 20px;

    font-size: 29px;

    justify-content: center;

    display: flex;

    font-weight: 300;
}

.text-box {
    padding: 10px;
}

.clear-text-box {
    padding: 10px;

    background-color: transparent;
}

.list ul {
    display: inline-block;
}

.center {
    text-align: center;
}

.fixed {
    position: fixed;
}

.column {
    width: 100%;
}

.img{
    background-image: url("images/pattern.svg");
}