:root {
    --main-radius: 5px;
    --main-padding: 5px;

    /*Main website colors*/
    --light-shades: #EDEAE7;
    /*EED5B6*/
    --light-accent: #A78860;
    /*929685*/
    --main-brand-color: #80654A;
    /*847458*/
    /* --dark-accent: #835E60; */
    --dark-accent: #373E40;
    /*86746E*/
    --dark-shades: #282126;
    /*1D1C24*/

    /*Main website colors*/
    --development-tag: #1C7194;
    --design-tag: #8A1A43;
    --solo-tag: #702A92;
    --team-tag: #40791D;
    --ludoleo-tag: #FF7900;
    --environment-tag: #2b2b2b;


    /*Old website colors*/
    --primary-color: var(--light-shades);
    /* #926468, groen-beige 7B7864*/
    --secondary-color: var(--dark-accent);
    /* #60334A */
}

h1,
h2 {
    margin: 1%;
    text-align: center;
}

pre {
    text-align: left;

    /* white-space: pre-line; */
}


body {
    font-family: "Montserrat";
    color: var(--dark-shades);

    background-color: var(--dark-shades);
    /* #9A868A */
    /* background-image: url("images/background.jpg"); */
}

main {
    margin: 0.25rem;
    padding-top: var(--main-padding);
    grid-area: main;

    background: var(--dark-shades);
    color: white;

    border-style: double;
    border-width: 5px;
    border-radius: var(--main-radius);
}

main {
    /* The pixel font */
    font-family: "Silkscreen";
    margin: 0.25rem;
    padding-top: var(--main-padding);
    grid-area: main;

    background: var(--dark-shades);
    color: white;

    border-style: double;
    border-width: 5px;
    border-radius: var(--main-radius);
}

img {
    border-radius: var(--main-radius);
}

.expansionContainer {
    overflow: hidden;
    height: 400px;
    margin-bottom: 5px;
    border-radius: var(--main-radius);
}

.zoom {
    transition: transform 1s;
    margin: 0 auto;
}

.zoom:hover {
    -ms-transform: scale(1.05);
    /* IE 9 */
    -webkit-transform: scale(1.05);
    /* Safari 3-8 */
    transform: scale(1.05);
}

nav {
    background: var(--dark-accent);
    color: white;
    font-size: 30px;
    margin: 0.25rem;
    grid-area: nav;
    border-radius: var(--main-radius);
}

footer {
    margin: 0.25rem;
    background: var(--secondary-color);
    grid-area: footer;
    border-radius: var(--main-radius);
    padding: var(--main-padding);
    text-align: center;
}

p,
h5,
h6,
h4 {
    text-align: left;
}

.wideBlock {
    /* margin-left: -2%; */
}

#sidebar {
    background: var(--dark-accent);
    color: white;

    margin: 0.25rem;
    grid-area: sidebar;
    border-radius: var(--main-radius);
}

#sidebarContent {}

#sidebarText {
    text-align: left;
    font-weight: lighter;
}

#robotBoxing {
    grid-area: robotBoxing;
}

#mazeGenerator {
    grid-area: mazeGenerator;
}

#portalDragon {
    grid-area: portalDragon;
}

#vrPainter {
    grid-area: vrPainter;
}

#duelingDragons {
    grid-area: duelingDragons;
}

#cookMatch {
    grid-area: cookMatch;
}

#combatSimulation {
    grid-area: combatSimulation;
}

#lines {
    grid-area: lines;
}

#herosCrucible {
    grid-area: herosCrucible;
}

#vrMinor {
    grid-area: vrMinor;
}

#gumball {
    grid-area: gumball;
}

#spaceOwl {
    grid-area: spaceOwl;
}

#ctr3 {
    grid-area: ctr3;
}

#congaline {
    grid-area: congaLine;
}

#mineralist {
    grid-area: mineralist;
}

#patterns {
    grid-area: patterns;
}

.projectWindow {
    margin: 0.45rem;
    background: var(--primary-color);
    border-radius: var(--main-radius);
    padding: var(--main-padding);
}

span {
    font-weight: bold;
}

.tagContainer {
    text-align: right;
}

.tag {
    border-radius: var(--main-radius);
    background-color: var(--main-brand-color);
    color: white;
    text-align: center;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}

.container {
    display: grid;
    /* height: 100vh; */
    /*grid-template-columns: .75fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1fr 1.2fr 0.8fr;*/
    grid-template-columns: 17.5% 27.5% 27.5% 27.5%;
    grid-template-areas:
        "sidebar nav nav nav"
        "sidebar main main main"
        "sidebar patterns ctr3 ctr3"
        "sidebar mineralist portalDragon vrPainter"
        "sidebar congaLine cookMatch cookMatch"
        "sidebar mazeGenerator lines robotBoxing"
        "sidebar combatSimulation duelingDragons herosCrucible"
        "sidebar gumball spaceOwl vrMinor"
        "sidebar footer footer footer";
    font-size: 14px;
    text-align: center;
}

@media only screen and (max-width: 700px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "nav"
            "main"
            "sidebar"
            "patterns"
            "ctr3"
            "congaLine"
            "mineralist"
            "portalDragon"
            "vrPainter"
            "robotBoxing"
            "mazeGenerator"
            "duelingDragons"
            "cookMatch"
            "lines"
            "combatSimulation"
            "herosCrucible"
            "vrMinor"
            "gumball"
            "spaceOwl"
            "footer";
    }

    /* h4,
    p {
        margin-left: .5%;
    }

    .wideBlock {
        margin-left: 0%;
    } */

    /* .tagContainer {
        margin-bottom: -10px;
        margin-left: .75%;
    } */

    /* article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    } */

    /* body {
        line-height: 1;
    } */

    /* ol,
    ul {
        list-style: none;
    } */

    /* blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    } */
}