style.css

/* import font */
@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=IM+Fell+English+SC&display=swap');

/* css var */
:root {
    --font1: "Gideon Roman", serif;
    --font2: "IM Fell English SC", serif;
    --color1: rgb(19, 8, 84);
    --color2: #F4C466;
}

/* content */

body {
    /* body text */
    color: var(--color1);
    font-size: 16px;

    /* background colors */
    font-family: var(--font1);
    background: rgb(238, 220, 174);
    background: radial-gradient(circle, rgba(238, 220, 174, 1) 0%, rgba(148, 187, 233, 1) 100%);

    margin: auto;
}


main {
    width: 54%;
    margin: 0 auto;
    padding: 53px;

    position: relative;
}


div {
    /* p text box attributes */
    background: rgb(232, 232, 232);
    border: var(--color2) dotted .1em;
    padding: .5em 1em;
    text-indent: 20px;
}

/* headings */

h1 {
    font-family: var(--font2);
    background: var(--color2);
    padding: .25em .5em;
    width: fit-content;
    font-size: 46px;
}

h2 {
    font-family: var(--font2);
    color: var(--color2);
    background: var(--color1);
    padding: .25em .5em;
    width: fit-content;
    font-size: 24px;
}