:root {
    --text: #d9e0ee;
    --bg: #4f372d;
    --bg-mid: #75574e;
    --bg-mid-bg: #ffcdb8;
    --red: #ec6a88;
    --green: #3fdaa4;
    --blue: #3fc6de;
    --grad1: #233A4E;
    --grad2: #9C6DB0;
}

* { 
    font-size: 1em;
    color: white;
}

body {
    background-color: var(--bg);
    font-family: "JetBrains Mono", liberation mono, monospace;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.6;
    max-width: 70ch;
    background-repeat: no-repeat
}

h1,h2 {
    color: var(--red);
    font-size: 1.4em;
}

h3 { 
    color: var(--green);
    font-size: 1.2em;
}

h4 {
    color: black;
    font-size: 1em;
}

a { 
    color: var(--blue);
    text-decoration: none;
}

a:hover { color: var(--green); text-decoration: underline }

ul { padding: 0 1rem;}

header, footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header a {
    padding: 0 .5rem;
}

header, footer { 
    background-color: var(--bg-mid);
    border-radius: 8px;
    padding-block: 0.5rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.info {
    background: var(--bg-mid-bg);
    border-radius: 8px;
    min-width: 300px;
    overflow-wrap: break-word;
    flex: 2;
    padding: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.heroheader {
    display:flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    text-shadow: 1px 1px 2px black, 0 0 25px var(--grad2), 0 0 5px darkgrey;
    margin-bottom: 1rem;
}

.indeximg {
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}