:root {
    --main-background-color: #6DAC5D;
    --accent-color: #e34926;
    --text-color: #424242;
    --dark-color: #424242;
}

/*------------ FONTS ------------*/
@font-face {
    font-family: layton-title;
    src: url(/assets/fonts/cv-block.otf);
}

@font-face {
    font-family: layton-text;
    src: url(/assets/fonts/professor-layton.otf)
}


body {
    background-color: var(--main-background-color);
    font-family: layton-text, sans-serif;
    color: var(--text-color);
}

table,
th,
td {
    border: var(--text-color) 2px solid;
    /* Avoid double borders*/
    border-collapse: collapse;
    padding: 5px;

}

/*------------ BUTTONS, CONTAINERS, ETC ------------*/
input,
button,
select,
textarea {
    font-family: inherit;
    background-color: white;
    border-radius: 4px;

}

a.back-to-top {
    /*Always at bottom right corner of browser window*/
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 8px;
    width: 140px;
    margin: 1em;

    /*Bold text on white background */
    background-color: white;
    font-weight: 800;

    /*Thick red border with round corners*/
    border: 8px solid;
    border-color: var(--accent-color);
    border-radius: 8px;

    /*Remove underline*/
    text-decoration: none;
    text-align: center;
}

a.back-to-top:hover {
    border-color: var(--main-background-color);
}

div.container {
    /*Center the box in the middle*/
    max-width: 700px;
    margin: 1em auto;

    padding: 2em;

    border: 8px solid var(--dark-color);
    border-radius: 0.5em;
    background-color: #F4F2E9;
}

div.todo {
    color: #F4F2E9;
    background-color: #e34926;
    border-color: #F4F2E9;
}

hr {
    margin: 3em auto;
    border: 2px #424242 dashed;
}

/*------------ TEXT ------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: layton-title;
}

a {
    color: var(--accent-color);
}

a:hover {
    color: var(--main-background-color);
    text-decoration: wavy underline;
}

code {
    font-family: inherit;
    color: rgb(111, 111, 111);
    background-clip: border-box;
}