* {
    border: var(--hotpink) 1px solid;
}

:root {
    --pink: #fa4a69;
    --navy: #232e48;
    --skintone: #f8f3f0;
    --pine: #5e6a4c;
    --oak: #ccca7d;
    --hotpink: #ff4b9a;
}

html {
    font-size: 16px;
    background-color: var(--pine);
    color: var(--skintone);
    font-family: "Sour Gummy", sans-serif;
}

body {
    display: grid;
    grid-template-columns: 25% 50% 25%;
}

#centercenter {    
    display: grid;
    grid-template-columns: 50% 50%;
}

h1 {
    font-family: "Barriecito", system-ui;
    text-align: center;
    font-size: 6em;
    color: var(--skintone);
}

#LeftImg {
    background-image: url("./images/Greta.jpg");
    height: 1000px;
    background-position-x: center;
    background-position-y: center;
    background-size:cover;
}

#RightImg {
    background-image: url("./images/Greta.jpg");
    height: 1000px;
    background-size: cover;
    background-position-x: right;
}

li {
    font-family: "Barriecito", system-ui;
    font-size: 3em;
    padding: 5px;
    margin: 5px;
    color: var(--navy);
    background-color: var(--skintone);
}

li:hover {
    background-color: var(--hotpink);
    color: var(--skintone);
}

ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

h2 {
    padding: 15px;
    font-size: 2em;
}

p {
    font-size: 1.5em;
    padding: 10px;
}

.blogPost {
    background-color: var(--oak);
    color: var(--navy);
    margin: 10px;
}

a {
    margin: none;
    text-decoration: none;
}