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

    body {
        background-color: antiquewhite;
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
    }

    header {
        background-color: chocolate;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        width: 100%;
    }

    h1 {
        font-size: 24px;
        color: white;
    }

    nav {
        background-color: burlywood;
        border-radius: 20px;
        margin-top: 10px;
        padding: 10px;
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    nav a {
        text-decoration: none;
        font-size: 18px;
        color: black;
        font-weight: bold;
        padding: 10px;
    }

    main {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        padding: 10px;
    }
    footer {
        background-color: rgb(248, 226, 178);
        margin-top: 10px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 10px;
    }

    iframe {
        width: 100%;
        max-width: 800px;
        height: 450px;
        border-radius: 10px;
        border: 0;
    }


    @media (max-width: 768px) {
        header {
            height: 60px;
        }

        h1 {
            font-size: 20px;
        }

        nav {
            flex-direction: column;
            align-items: center;
        }

        nav a {
            font-size: 16px;
        }

        main {
            flex-direction: column;
            align-items: center;
        }

        iframe {
            height: 300px;
        }
    }
    p {margin: auto;display: flex;max-width: 700px; justify-content: center; background-color: rgb(240, 218, 190);}

    .dark-mode {
        background-color: black;
        color: white;


    }
    .my-element {
        color: rgb(0, 0, 0);
      }
      
    .my-element:hover {
        color: red;
      }
      .my-element2 {
        color: rgb(48, 161, 48);
      }
      
    .my-element2:hover {
        color: red;
      }