* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: cutesy;
    font-size: 14px;
    color: #753a13;
    list-style-type: none;
}

@font-face {
  font-family: cutesy; /* set name */
  src: url(cutesy.ttf); /* url of the font */
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* level 1 */

html{
    height: 100%;
    width: 100%;
}

body{
    background: url(bg/bricks.gif);
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

container{
    display: grid;
    gap: 5px;
    width: 700px;
}

/* level 2 */

header{
    width: inherit;
    margin: auto;
    text-align: center;
}

marquee{
    display: inline-block;
    margin-top: 5px;
    vertical-align: middle;
}

footer, #topping{
    width: inherit;
    height: 2rem;
    border: 1px solid green;
    margin: auto;
    text-align: center;
    padding: 5px;
    background: url(misc/image0.jpg);
    background-size: cover;
}

main{
    margin: auto;
    width: inherit;
    height: 40rem;
    border: dashed 1px;
    background: white;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.flow{
    overflow: hidden;
    font: 10px;
}

.div1 {
    grid-area: 1 / 1 / 4 / 14;
    background-color: #ffffd6;
    box-shadow: 2px 4px 3px 2px rgba(194,162,97,0.34);
}
.div2 {
    grid-area: 4 / 1 / 10 / 4;
    background-color: #e7f1ef;
}
.div3 {
    grid-area: 4 / 4 / 11 / 12;
    background-color: #fef0d7;
}
.div4 {
    grid-area: 2 / 3 / 5 / 5;
}
.div5 {
    grid-area: 10 / 1 / 14 / 1;
    background-color: #f6ffe9;
}
.div6 {
    grid-area: 10 / 2 / 14 / 2;
    background-color: #e7f1ef;
}
.div7 {
    grid-area: 10 / 3 / 14 / 3;
    background-color: #ffffd6;
}
.div8 {
    grid-area: 15 / 1 / 14 / 1;
    background-color: #fef0d7;
}

/* level 3 */

/* media queries */

@media(max-width: 700px){
    container{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    main{
        height: 100%;
    }
}

@media(max-width: 700px){
    container{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    main{
        height: 100%;
    }
}

@media(max-width: 500px) and (orientation: portrait){
    container{
        display: flex;
        flex-direction: column;
        background-color: #fcffd2;
    }
    
    main{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8{
        height: 100px;
    }
    
    .div2{
        order: 1;
    }
    
    .div1{
        order: 2;
    }
    
    .div3{
        order: 2;
    }
    
    .div4{
        order: 2;
    }
    
    .div5{
        order: 2;
    }
    
    .div6{
        order: 2;
    }
    
    .div7{
        order: 2;
    }
    
    .div8{
        order: 2;
    }
}

@media(min-width: 500px){
    
    p.small{
        display: none;
    }
}

@media(max-width: 500px){
    
    p.big{
        display: none;
    }
}