/* standard stuff */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
	font-size: 1.2rem;
    color: #303030;
    box-sizing: border-box;
    background-image: url(../img/b11.png);
}

@font-face { /* header font */
    font-family: adelia;
    src: url(../font/ADELIA.otf)
}

a:link, a:visited {
	color: #303030;
}

li {
    list-style-image: url(../img/fav.gif);
}

img {
    max-width: 100%;
}


/* layout */
h1 {
    text-align: right;
    margin-right: 30px;
    color: #e37272;
    font-family: adelia, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow: 3px 3px #9e3939; 
}
h1 img {
    margin-right: 15px;
}

.container { /* main and section (sections are in nav) are in this */
	display: grid;
	grid-template-columns: 70% 30%;
}

main, section {
    background-color: #fff4f8;
    overflow: scroll;
    border-top-left-radius: 30px; border-top-right-radius: 30px; /* so top is curved but doesn't fuck up the bottom wavy thing */
    box-shadow: 3px 3px #9e3939 inset;
    margin: 15px;
}

main {
    height: 32rem;
    border: 40px solid #e37272;
    border-bottom-width: 50px;
    mask: linear-gradient(0,#0000 30px,#000 0), radial-gradient(30px,#000 calc(100% - 1px),#0000) bottom/56.9px 60px; /* wavy bottom thing */
    padding: 20px;
}

section {
    border: 20px solid #e37272;
    border-bottom-width: 30px;
    mask: linear-gradient(0,#0000 30px,#000 0), radial-gradient(30px,#000 calc(100% - 1px),#0000) bottom/49.9px 60px; /* wavy bottom */
}

nav section:first-of-type { /* box with dates */
    height: 20.5rem;
}

.align { /* for content in main */
  display: grid;
  grid-template-columns: 40% 60%;
}
.align p { /* so it aligns with the top of the image and isn't right up against it */
    margin-left: 20px;
    margin-top: 0px;
}
.align div:nth-of-type(2) p:first-of-type { /* making item and recipe text underlined and diff colour */
    text-decoration: underline;
    color: #9e3939;
}
.align a:link, .align a:visited {
    color: #9e3939;
}


/* styling for smaller screens */
@media screen and (max-width: 720px) {
	.container {
		display: block;
	}
	h1 {
        margin: 10px;
        text-align: center;
	}
    h1 img {
        display: none;
    }
    section {
        margin: 0px;
        margin-top: 20px;
        mask: linear-gradient(0,#0000 30px,#000 0), radial-gradient(30px,#000 calc(100% - 1px),#0000) bottom/45px 60px;
    }
    main {
        mask: linear-gradient(0,#0000 30px,#000 0), radial-gradient(30px,#000 calc(100% - 1px),#0000) bottom/51px 60px;
    }
}