/*border-box needed since css fucks up with the container's sizing if you even dare put a margin otherwise*/
*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: "mother"; 
    src: url("Motherish-Medium.otf?#iefix") format("truetype");
}

body {
    background: url(EB_BG.gif);
    margin: 0px; 
    font-family: "mother", sans-serif;
}

main {
    /*BACKGROUND*/
    background: url(papertexture1.png);
    image-rendering: optimizeSpeed;

    /*SPACING*/
    padding: 0.7rem;
    margin: 2rem auto;
    width: clamp (10vw, 40rem, 80vw); 
    
    /*BORDER-IMAGE*/
    border: 10px solid transparent;
    border-image: url(WW_border.png);
    border-image-slice: 70 70 60 70;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 10px 20px 10px 20px;
    border-image-repeat: round; 
}
/*STYLING THE FORMATTING*/
main p {text-indent: 0.7rem;}
main h1 {text-align: center;}
main h1, b, em {color: darkred}
main hr {
    border: none;
    border-bottom: darkred dotted 2.8px; /*you can change the border style to dotted to something else if you wish: https://www.w3schools.com/css/css_border.asp*/
}
main li::marker {
    font-weight: bold;
    color: darkred
}
main img {
    float: left;
    width: 50%;
    margin: 0.5rem;
    border: solid 2px black;
}