:root {
    --theme: #df3062;
    --background: #e8e8e8;
}

html {
    margin: 0;
    font-family: sans-serif;
    min-height: calc(100% - 6px);
    border: 3px solid var(--theme);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 1rem;
}

body {
    margin: 5em 12em;
}

.project {
    padding: 20px;
}

.project:target {
    background-color: #df30623d;
}

.secondary {
    color: grey;
}

.button {
    padding: 4px 5px;
    /* border-radius: 4px; */
    border: 1px solid var(--theme);
    background-color: #df30624d;
    text-decoration: none;
    color: black;

    /* These are here to stop any layout reflow when hovered over and the side and bottom borders increase to 3px */
    margin-bottom: 2px;
    margin-right: 2px;
}

.button:hover {
    border-bottom: 3px solid var(--theme);
    border-right: 3px solid var(--theme);
    margin-bottom: 0;
    margin-right: 0;
}