/* desktop */
@media (max-width:3000px) {
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

        h1  {
            color: #333333;
            font-family: 'Courier New', Courier, monospace;
            font-size: x-large;

        }

        h2 {
            color: #444444;
            font-family: 'Courier New', Courier, monospace;
            font-size: larger;
        }

        h3 {
            color: #555555;
            font-family: "Special Gothic";
            font-size: large;
        }

        p {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }

        a {
            color: #000000;
        }

        li {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }
    }

    html {
        font-size: 15px;
        background-image: url(background.gif);
        height: 100%;
        background-position: center;
    }

    .post-box{
        background-color: #cccccc;
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: justify;
        flex: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        margin-bottom: 25px;
    
        .header-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px; /* Optional: adds space between image and text */
        }

        .header-content img{
            width: 100px
        }

        .headings {
            display: flex;
            flex-direction: column;
        }

    }

    .content {
        text-align: center;
    }

    header,footer {
        background-color: #cccccc;
        padding: 20px;
        width: 100%;
    }

    .center-element {
        max-width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .center-element iframe {
        width: 210px;
        height: 119px;
    }

    .center-element img {
        width: 100%;
    }

    .index-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;
    
        .item1 {
            display: grid;
            background-color: transparent;
            grid-row: 1 / 1;
            grid-column: 1 / 56;
            margin: 30px;
            border: 30px solid transparent;
        }
    }

    body {
        padding-bottom: 60px; /* ensure content doesn't hide behind fixed footer */
    }

    footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center; 
        font-size: 14px;
        padding: 5px;
        background-color: #111111;
        z-index: 1000;
    }
}

/* tablet */
@media (max-width:1024px) {

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

        h1  {
            color: #333333;
            font-family: 'Courier New', Courier, monospace;
            font-size: x-large;

        }

        h2 {
            color: #444444;
            font-family: 'Courier New', Courier, monospace;
            font-size: larger;
        }

        h3 {
            color: #555555;
            font-family: "Special Gothic";
            font-size: large;
        }

        p {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }

        a {
            color: #000000;
        }

        li {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }
    }

    html {
        font-size: 15px;
        background-image: url(background.gif);
        height: 100%;
        background-position: center;
    }

    .post-box{
        background-color: #cccccc;
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: justify;
        flex: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        margin-bottom: 25px;
    
        .header-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px; /* Optional: adds space between image and text */
        }

        .header-content img{
            width: 100px
        }

        .headings {
            display: flex;
            flex-direction: column;
        }

    }

    .content {
        text-align: center;
    }

    header,footer {
        background-color: #cccccc;
        padding: 20px;
        width: 100%;
    }

    .center-element {
        max-width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .center-element iframe {
        width: 210px;
        height: 119px;
    }

    .center-element img {
        width: 100%;
    }

    .index-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;
    
        .item1 {
            display: grid;
            background-color: transparent;
            grid-row: 1 / 1;
            grid-column: 1 / 56;
            margin: 2cap;
            border: 20px solid transparent;
        }
    }

    body {
        padding-bottom: 60px; /* ensure content doesn't hide behind fixed footer */
    }

    footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center; 
        font-size: 14px;
        padding: 5px;
        background-color: #111111;
        z-index: 1000;
    }
}

/* phones */
@media (max-width:600px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

        h1  {
            color: #333333;
            font-family: 'Courier New', Courier, monospace;
            font-size: x-large;

        }

        h2 {
            color: #444444;
            font-family: 'Courier New', Courier, monospace;
            font-size: larger;
        }

        h3 {
            color: #555555;
            font-family: "Special Gothic";
            font-size: large;
        }

        p {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }

        a {
            color: #000000;
        }

        li {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }
    }

    html {
        font-size: 15px;
        background-image: url(background.gif);
        height: 100%;
        background-position: center;
    }

    .post-box{
        background-color: #cccccc;
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: justify;
        flex: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        margin-bottom: 25px;
    
        .header-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px; /* Optional: adds space between image and text */
        }

        .header-content img{
            width: 100px
        }

        .headings {
            display: flex;
            flex-direction: column;
        }

    }

    .content {
        text-align: center;
    }

    header,footer {
        background-color: #cccccc;
        padding: 20px;
        width: 100%;
    }

    .center-element {
        max-width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .center-element iframe {
        width: 210px;
        height: 119px;
    }

    .center-element img {
        width: 100%;
    }

    .index-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;
    
        .item1 {
            display: grid;
            background-color: transparent;
            grid-row: 1 / 1;
            grid-column: 1 / 56;
            margin: 2cap;
            border: 20px solid transparent;
        }
    }

    body {
        padding-bottom: 60px; /* ensure content doesn't hide behind fixed footer */
    }

    footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center; 
        font-size: 14px;
        padding: 5px;
        background-color: #111111;
        z-index: 1000;
    }
}