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

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

        }

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

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

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

        a {
            color: green;
        }

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

    html {
        font-size: 15px;
        background-image: url(../background.jpg);
        height: 100%;
        background-position: center;
        background-size: cover;
        -webkit-animation: bg-scrolling-reverse 9.00s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 9.00s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 9.00s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 9.00s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    }

/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}

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

    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;
        align-items: center;
        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: #81d68e;
        padding: 20px;
        width: 100%;
    }

    .navbar ul {
        list-style-type: none;
        background-color: #bbe9c2;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .navbar a {
        color: black;
        text-decoration: none;
        padding: 15px;
        display: block;
        text-align: center;
    }

    .navbar a:hover {
        background-color: green;
        color: white;
    }

    .navbar li {
        float: left;
        margin: 0;
        padding: 0;
    }

    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: #81d68e;
        z-index: 1000;
    }

        .blogs-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .blog-pagecard{
            background-color: #81d68e;
            grid-row: 1 / 1;
            grid-column: 1 / 4;
            margin: 30px;
            border: 30px solid #81d68e;
        }
            
        .tags {
            background-color: #81d68e;
            grid-row: 2 / 3;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .recent {
            background-color: #81d68e;
            grid-row: 1 / 3;
            grid-column: 4 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .recent img {
            width: 500px;
        }

        .blog1 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog2 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 4 / 7;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog3 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 7 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog4 {
            background-color: #81d68e;
            grid-row: 4 / 4;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog5 {
            background-color: #81d68e;
            grid-row: 4 / 4;
            grid-column: 4 / 7;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog6 {
            background-color: #81d68e;
            grid-row: 4 / 4;
            grid-column: 7 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog7 {
            background-color: #81d68e;
            grid-row: 5 / 5;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog8 {
            background-color: #81d68e;
            grid-row: 5 / 5;
            grid-column: 4 / 7;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .blog9 {
            background-color: #81d68e;
            grid-row: 5 / 5;
            grid-column: 7 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .nextpage {
            background-color: #81d68e;
            grid-row: 10 / 10;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }

        .nextpage h1 {
            text-align: center;
        }
    }
}

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

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

        h1  {
            color: green;
            font-family: 'Courier New', Courier, monospace;
            font-size: larger;
        }

        h2 {
            color: black;
            font-family: 'Courier New', Courier, monospace;
            font-size: large;
        }

        h3 {
            color: black;
            font-family: "Special Gothic";
            font-size: medium;
        }

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

        a {
            color: green;
        }

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

    html {
        font-size: 14px;
        background-color: #bbe9c2;
    }

    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: column;
        align-items: center;
        justify-content: space-around;
        padding: 15px;
        margin-bottom: 25px;
    
        .header-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }

        .header-content img{
            width: 75px
        }

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

        .content {
            text-align: center;
        }
    }

        header,footer {
        background-color: #81d68e;
        width: 100%;
        }
        
    .navbar ul {
        list-style-type: none;
        background-color: #bbe9c2;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .navbar a {
        color: black;
        text-decoration: none;
        padding: 15px;
        display: block;
        text-align: center;
    }

    .navbar a:hover {
        background-color: green;
        color: white;
    }

    .navbar li {
        float: left;
        margin: 0;
        padding: 0;
    }

    body {
        padding-bottom: 50px; /* 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: #81d68e;
        z-index: 1000;
    }
    
    .blogs-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .blog-pagecard{
            background-color: #81d68e;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            margin: 20px;
            border: 20px solid #81d68e;
        }
            
        .tags {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .recent {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 4 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .recent img {
            width: 400px;
        }

        .blog1 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog2 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 5 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog3 {
            background-color: #81d68e;
            grid-row: 4 / 4;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog4 {
            background-color: #81d68e;
            grid-row: 4 / 4;
            grid-column: 5 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog5 {
            background-color: #81d68e;
            grid-row: 5 / 5;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog6 {
            background-color: #81d68e;
            grid-row: 5 / 5;
            grid-column: 5 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog7 {
            background-color: #81d68e;
            grid-row: 6 / 6;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog8 {
            background-color: #81d68e;
            grid-row: 6 / 6;
            grid-column: 5 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .blog9 {
            background-color: #81d68e;
            grid-row: 7 / 7;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .nextpage {
            background-color: #81d68e;
            grid-row: 10 / 10;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .nextpage h1 {
            text-align: center;
        }
    }
}

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

        h1  {
            color: green;
            font-family: 'Courier New', Courier, monospace;
            font-size: large;
        }

        h2 {
            color: black;
            font-family: 'Courier New', Courier, monospace;
            font-size: medium;
        }

        h3 {
            color: black;
            font-family: "Special Gothic";
            font-size: small;
        }

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

        a {
            color: green;
        }

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

    html {
        font-size: 13px;
        background-color: #bbe9c2;
    }

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

    main {
        margin: 0 auto;
        text-align: justify;
        flex: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 10px;
        margin-bottom: 25px;

        .header-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;

        }

        .header-content img{
            width: 50px
        }

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

        .content {
            text-align: center;
        }

    }

    header,footer {
        background-color: #81d68e;
        width: 100%;
    }

    .navbar ul {
        list-style-type: none;
        background-color: #81d68e;
        padding: 0;
        margin: 5px;
        overflow: hidden;
    }

    .navbar a {
        color: black;
        text-decoration: none;
        padding: 1px;
        display: block;
        text-align: center;
    }

    .navbar a:hover {
        background-color: green;
        color: white;
    }

    .navbar li {
        float: none;
        background-color: #bbe9c2;
        margin: 3px;
        padding: 3px;
    }

    body {
    padding-bottom: 50px; /* 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: #81d68e;
        z-index: 1000;
    }

        .blogs-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        
        .blog-pagecard{
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }
            
        .tags {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .recent {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .recent img {
            width: 300px;
        }

        .blog1 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog2 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog3 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog4 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog5 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog6 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog7 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog8 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .blog9 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .nextpage {
            background-color: #81d68e;
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .nextpage h1 {
            text-align: center;
            font-size: medium
        }
    }
}