@media (min-width: 1024px) {
    main {
        position: relative;
        margin-top: 20px;
        min-height: 100vh;
    }
    main > article {
        width: 70%;
        margin: 10px 25px;
        padding: 20px 0;
        border-radius: 25px;
        min-height: 300px;
        background-color: rgba(33, 158, 188, 1);
        color: #FFFFFF;
        text-align: center;
    
    }
    main > article > section {
        width: 70%;
        margin: auto;
        margin-top: 60px;
    }
    main > aside {
        position: absolute;
        top: 0;
        right: 0;
        width: 25%;
        margin: 10px 25px;
        border-radius: 25px;
        min-height: 600px;
        background-color: rgba(33, 158, 188, 1);
        color: #FFFFFF;
    }
    h1, h2 {
        margin: 20px;
    }
    h3, h4, h5, h6 {
        margin: 10px;
    }
    h1 {
        font-size: xx-large;
    }
    h2 {
        font-size: x-large;
    }
    h3 {
        font-size: larger;
    }
    h4 {
        font-size: medium;
    }
    p {
        font-size: small;
    }
    ol {
        margin: 20px 0;
        text-align: start;
    }
    ol > li {
        margin: 10px 0;
    }
    .title {
        font-size: medium;
        font-weight: bold;
    }
    .inner-list {
        list-style-type: lower-alpha;
    }
    .inner-list li {
        margin-left: 20px;
    }
    .article-paragraph {
        font-size: medium; 
        text-align: start; 
        margin-top: 20px;
    }
    aside  ul {
        margin-left: 10px;
        list-style-type: none;
    }
    aside > ul {
        width: fit-content;
        margin: auto;
    }
    aside a:hover {
        color: #219ebc;
    }
    aside a {
        text-decoration: none;
        color: #FFFFFF;
    }
    .summary-outer-list {
        font-size: x-large;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .summary-outer-list li {
        font-size: large;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}
@media (min-width: 320px) and (max-width: 1023px) {
    main {
        margin-top: 110px;
        min-height: 100vh;
    }
    main > article {
        width: 90%;
        margin: 12px auto;
        padding: 20px 0;
        border-radius: 25px;
        min-height: 300px;
        background-color: rgba(33, 158, 188, 1);
        color: #FFFFFF;
        text-align: center;
    
    }
    main > article > section {
        width: 70%;
        margin: auto;
        margin-top: 60px;
    }
    main > aside {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 25%;
        margin: 10px 25px;
        border-radius: 25px;
        min-height: 600px;
        background-color: rgba(33, 158, 188, 1);
        color: #FFFFFF;
    }
    h1, h2 {
        margin: 20px;
    }
    h3, h4, h5, h6 {
        margin: 10px;
    }
    h1 {
        font-size: xx-large;
    }
    h2 {
        font-size: x-large;
    }
    h3 {
        font-size: larger;
    }
    h4 {
        font-size: medium;
    }
    p {
        font-size: small;
    }
    ol {
        margin: 20px 0;
        text-align: start;
    }
    ol > li {
        margin: 10px 0;
    }
    .title {
        font-size: medium;
        font-weight: bold;
    }
    .inner-list {
        list-style-type: lower-alpha;
    }
    .inner-list li {
        margin-left: 20px;
    }
    .article-paragraph {
        font-size: medium; 
        text-align: start; 
        margin-top: 20px;
    }
    aside  ul {
        margin-left: 10px;
        list-style-type: none;
    }
    aside > ul {
        width: fit-content;
        margin: auto;
    }
    aside a:hover {
        color: #219ebc;
    }
    aside a {
        text-decoration: none;
        color: #FFFFFF;
    }
    .summary-outer-list {
        font-size: x-large;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .summary-outer-list li {
        font-size: large;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}