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

    body {font-family: Verdana, Arial, sans-serif;
    }
    
    #wrapper { background-color:  #aa80de; 
        margin-right: auto;
    }

    header { color: #00005D; 
            background-color: #d9a8f4;
            padding: .5em 0 .5em 0;
            border-bottom: 3px solid #2c272f;
            text-align: center;
    }
    main {   background-color: #FFFFFF;
            color: #000000;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 0.25em;
            padding-bottom: 0.25em;
    }
    img { padding: 1em;}
    video {
        padding: 1em;
        padding-top: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    aside { text-align: center; }
    footer {  background-color: #2c272f;
            color: white;
            font-size:70%;
            text-align: center;
            padding: 0.5em 0;
    }
    footer a {color:#d9a8f4;}
    h2 { color: #2c272f; }

    nav ul { list-style-type: none;
            padding-left: 0; 
            border-top: 2px solid #EEEEEE;
    }
    nav li { border-bottom: 2px solid #EEEEEE;  
            text-align: center; 
            padding-top: .5em;
            padding-bottom: .5em;
    }
    nav a { text-decoration: none;
            font-weight: bold;
    }
    nav a:link { color: #00005D; }
    nav a:hover { color: #ffffff; }
    nav #page { font-weight: bold;
                color: #ffffff; 
                text-shadow: 2px 2px #2c272f;}

    footer a:hover { color: #eedff3; }

    input[type=text] {width: 75%;}

    textarea {width:75%;
        height: 200%;}

    fieldset {width: 75%;}

    legend {font-weight: bold;}
    .latest-box, .box {
        background-color: #a65ec2;
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin: 20px auto;
        width: auto;
        display:grid;
        overflow:hidden;
    }
    .box {
        background-color: #d9a8f4;
    }

    .latest-box img, .box img {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        border-radius: 25px;
        }
    .latest-box h2, .latest-box h3, .latest-box h4 {
        color: white; text-shadow: 
        2px 2px 2px #231c28;
    }
    .box h2, .box h3, .box h4 {
        color: white; text-shadow: 
        2px 2px 2px #231c28;
    }
    .latest-box a {
        color:#00005D
    }

    .box-left, .box-right {
        background-color: #d9a8f4;
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin: 20px auto;
        width: auto;
        display:grid;
        overflow:hidden;
        }

    .box-left p, .box-right p {
        line-height: 25px;
        margin-right: 15px;
        font-size: 16px;
        text-align: center;
    }

    .box-left span, .box-right span {position:relative; bottom: 5px; }

    .box-left img, .box-left video, .box-right img, .box-right video {
        border-radius: 25px;
        padding-bottom: 1em;
        width: 100%;
        height: auto;
    }

    main table {width: 100%;}

    /* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
    header, nav, main, footer, aside, figure { display: block; }

    /* Medium Display */
    @media (min-width: 600px) {
        header {text-align: left;}
    nav li { display: inline-block;
            width: 7em;
            padding: 0.5em;
            border: none; 
            }
    nav ul { text-align: center; border-top: none; border-bottom: 3px solid #2c272f;}
    main { float: left;
            width: 100%; 
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 0;
            padding-bottom: 0;
        }
    aside { margin-left: 55%; }
    footer { clear: both; border-bottom: 2px solid #000000;}
    input[type=text] {width: 60%;}
    fieldset {width: 60%;}
    textarea {width: 60%;}
    main table {width: 70%;}
    body { background-color: #3c3646;}
    }
    
    /* Large Display */
    @media (min-width: 1018px) {
        header {text-align: left;}
        nav li { display: block; text-align: left; padding-left: 1em;}
        nav ul { border-top: none; border-bottom: none;}
    nav { float: left; width: 15%; }
    footer {border: none;}
    #wrapper { width: 80%;
                margin: auto;
                max-width: 1200px;
    }
    main {width: 80%;}
    main table {width: 70%;}
    body { background-color: #3c3646;}
    .box-left p, .box-right p {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        font-size: 13px;
    }
    .box-left img, .box-left video {
        flex: 0 0 55%;
        width: 55%;
        height: auto;
    }
    .box-right img, .box-right video {
        flex: 0 0 55%;
        width: 55%;
        height: auto;
        order: 2;
    }
    .box-left span, .box-right span {
        flex: 1;
        margin-top: 40px;
    }
    }


    @media (min-width: 1200px) {
    .box-left p, .box-right p {font-size: 16px;}
    }