* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

:root {
    font-size: 62.5;
}

img, picture {
    max-width: 100%;
}

body {
    height: 200vh;
    background-color: lightcoral;
    max-width: 100vw;
    font-family: Verdana;
    font-size: 3vh; 
    text-align: center;
    border: 5px solid black;
}

    #container {
        width: 95vw;
        margin: 2vh auto;
    }

        header {
            
            text-align: center;
            /* margin: 10px 0px 10px 0px; */
            display: flex;
            font-family: Verdana;
            font-size: 5vh;
            height: 15vh;
            border: 2px solid blue;
        }
        
            .photo {
                 width: 8vw;
                aspect-ratio: 4/4;
            }

            #title {
                width: 100vw;
                height: 100%;
                font-family: "Pacifico", serif;
                font-size: xx-large;
                line-height: 2; 
                
            }


    ol {
        height: 100vh;
        display: flex; 
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 3vh;
        
    }

        ol li {
            list-style-type: none;
            background-color: lightseagreen;
            width: 23vw; aspect-ratio: 12/8;
            margin-bottom: 1.5vh;  
        }

            div {
                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                width: 22vw;
                
            }

                .Example {
                    /* border: 2px solid blue; */
                    background-color: lightgreen; 
                }

                    h1 {
                        border: 2px solid lightblue;
                        background-color: aquamarine;
                        font-size: large;
                        min-height: 10vh;
                        font-size: large;
                        
                    }

                        div p {
                            
                            font-family: Arial, Helvetica, sans-serif;/*choose different font*/
                            font-size: 75%;
                            margin-top: 10px;
                            justify-content: space-evenly;
                        }

                #Example2 {
                    font-weight: 500;
                    color: blueviolet;
                }

                p.p3andp5 {
                    /* border: 2px solid hotpink; */
                    background-color: yellow;
                    margin-bottom: 1.5vh;
                }

                p:nth-child(3) {
                    background-color: purple;
                    color: aqua;
                }

                #ex5 {
                    /* border: 5px solid hotpink; */
                    list-style: none;
                    font-size: medium;
                }  
                
                    .list {
                        border: 2px solid green;
                        width: 100%;
                        padding: 2.5vh 0 2.5vh 0;
                        
                    }
                    
                    #ex5 li {
                        border: 2px solid plum;
                        background-color: palevioletred;
                        height: 3.5vh;
                        width: 95%;
                        margin: 0 auto 0 auto;
                    }

                #ex6p {
                    background-color: orange;
                    color: green;
                }

                li h2 {
                    font-family: "Sour Gummy", sans-serif;
                    font-size: larger;
                }

                h1 + main {
                    color: blueviolet;
                }

                #one, .sample, main {
                    background-color: palegoldenrod;
                }

                .example10:first-child {
                    border: 2px solid red;
                }

                li:first-child {
                    color: blue;  
                }
                
                li:last-child {
                    color: darkred;  
                }

                h3 ~ p {
                    text-decoration: underline;
                }