/* 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-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: #c2bbe9;
        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: #e9c2bb;
        color: white;
    }

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

    .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 {
            background-color: #81d68e;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            margin: 30px;
            border: 30px solid #81d68e;
        }

        .item1 h1 {
            text-align: left;
        
        }

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

        .item3 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 4 / 10;
            margin: 30px;
            border: 30px solid #81d68e;
        }

        .photos-container {
            display: flex;
            align-items: column;
            justify-content: left;
            gap: 10px;
        }

        .other-photos {
            display: flex;
            border: 10px;
            flex-direction: row;
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .other-photos img {
            width: 150px;
        }

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

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

        .updates-slider {
            overflow-y: auto;
            height: 175px; /* Adjust height as needed */
            position: relative;
        }

    }

    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;
    }

    .about-container{
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;
    
        .about-pagecard{
            background-color: #81d68e;
            grid-row: 1 / 1;
            grid-column: 1 / 4;
            margin: 30px;
            border: 30px solid #81d68e;
        }

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

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

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

        .favorites {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .favorites img {
            width: 75px;
        }

        .favorites-left {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
        }

        .faves {
            display: flex;
            justify-content: right;
        }

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

        .rotation {
            display: flex;
            align-items: left;
            object-fit: scale-down;
            gap: 10px;
        }

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

        .description h3 {
            text-align: left;
        }

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

        .zines embed {
            width: 500px;
            height: 700px;
        }

    }

    .videos-container{
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;

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

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

        .yt-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .yt-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }   

        .yt-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }

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

        .playlists {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

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

        .videothumb-hor {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .channels {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }

    .photos-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 1px;
        
        .photo-pagecard{
            background-color: #81d68e;
            grid-row: 1 / 1;
            grid-column: 1 / 4;
            margin: 30px;
            border: 30px solid #81d68e;
        }
            
        .photo1 {
            background-color: #81d68e;
            grid-row: 1 / 9;
            grid-column: 4 / 10;
            margin: 30px;
            border: 30px solid #81d68e;
        }

        .ig-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 900px;
        }

        .ig-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }

        .ig-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }

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

        .folders {
            display: grid;
            grid-template-columns: repeat(1, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 600px;
        }

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

        .accounts {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
    }

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

        .embed1 iframe{
            width: 200px;
            height: 270px;
        }

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

        .embed2 iframe{
            width: 530px;
            height: 500px;
        }

        .guest3 {
            background-color: #81d68e;
            grid-row: 9 / 9;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }
        
        .embed3 iframe{
            width: 850px;
            height: 250px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }
    }

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

        .embedm1 iframe{
            width: 500px;
            height: 100px;
        }

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

        .embedm2 iframe{
            width: 500px;
            height: 375px;
        }

        .music3 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 7 / 10;
            background-color: #81d68e;
            margin: 30px;
            border: 30px solid #81d68e;
            padding: auto;
        }
        
        .embednm3 iframe{
            width: 300px;
            height: 300px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }
    }

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

        .filmpicks {
            display: flex;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .filmpicks img {
            width: 100px;
        }

        .filmpicks-left {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
        }

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

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


    .errorimg img{
        width: 900px;
    }
}

/* 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: #c2bbe9;
        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: #e9c2bb;
        color: white;
    }

    .navbar li {
        float: left;
        margin: 0;
        padding: 0;
    }
    
    .center-element {
        max-width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .other-photos {
        display: flex;
        border: 10px;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .other-photos img {
        width: 200px;
    }


    .index-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
    
        .item1 {
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }    

        .item1 h1 {
            text-align: left;
        }

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

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

        .photos-container {
            display: flex;
            flex-flow: row wrap;
            gap: 10px;
        }

        .photos-container img{
            width: 200px;
        }

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

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

        .updates-slider {
            overflow-y: auto;
            height: 150px; /* Adjust height as needed */
            position: relative;
        }
    }

    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;
    }

    .about-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
    
        .about-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

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

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

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

        .favorites {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .favorites img {
            width: 63px;
        }

        .favorites-left {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
        }

        .faves {
            display: flex;
            justify-content: right;
        }

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

        .rotation {
            display: flex;
            align-items: left;
            object-fit: scale-down;
            gap: 10px;
        }

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

        .description h3 {
            text-align: left;
        }

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

        .zines embed {
            width: 500px;
            height: 600px;
        }

    }

    .videos-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
    
        .video-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

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

        .yt-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .yt-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }   

        .yt-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }
        
        .video2 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .videothumb-hor {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

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

        .channels {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

    }

    .photos-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .photo-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
            
        .photo1 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .ig-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 900px;
        }

        .ig-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }

        .ig-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }

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

        .folders {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 600px;
        }

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

        .accounts {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }

    .guest-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .guest-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
            
        .guest1 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 1 / 4;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .embed1 iframe{
            width: 230px;
            height: 500px;
        }

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

        .embed2 iframe{
            width: 550px;
            height: 500px;
        }

        .guest3 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
        
        .embed3 iframe{
            width: 875px;
            height: 250px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }

    }

    .music-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .music-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
            
        .music1 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .embedm1 iframe{
            width: 350px;
            height: 370px;
        }

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

        .embedm2 iframe{
            width: 450px;
            height: 370px;
        }

        .music3 {
            background-color: #81d68e;
            grid-row: 3 / 3;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
        
        .embednm3 iframe{
            width: 400px;
            height: 300px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }
    }

    .films-container {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10px;
        
        .film-pagecard{
            align-self: auto;
            grid-row: 1 / 1;
            grid-column: 1 / 10;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }
            
        .film1 {
            background-color: #81d68e;
            grid-row: 2 / 2;
            grid-column: 1 / 5;
            background-color: #81d68e;
            margin: 20px;
            border: 20px solid #81d68e;
            padding: auto;
        }

        .filmpicks {
            display: flex;
            border: 10px;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 1px;
        }

        .filmpicks img {
            width: 80px;
        }

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

        .film2 img {
            width: 210px;
        }

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

    .errorimg img{
        width: 600px;
    }
}

/* 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: #e9c2bb;
        color: white;
    }

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

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

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


    .index-container {
        display: flex;
        flex-direction: column;
        padding: 10px;

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

        .item1 h1 {
            text-align: left;
        }

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

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

        .photos-container {
            display: flex;
            flex-flow: row wrap;
            gap: 10px;
        }

        .other-photos img{
            width: 300px;
        }

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

        .item5 {
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
        }

        .updates-slider {
            overflow-y: auto;
            height: 100px; /* Adjust height as needed */
            position: relative;
        }
    }

    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;
    }

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

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

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

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

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

        .favorites-left {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
        }

        .favorites img {
            width: 50px;
        }

        .faves {
            display: flex;
            justify-content: right;
        }

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

        .rotation {
            display: flex;
            align-items: left;
            object-fit: scale-down;
            gap: 10px;
        }

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

        .description h3 {
            text-align: left;
        }

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

        .zines embed {
            width: 300px;
            height: 500px;
        }
    }

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

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

        .yt-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .yt-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }   

        .yt-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }

        .videothumb-hor {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

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

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

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

        .channels {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }
    
    .photos-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        
        .photo-pagecard{
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }
            
        .photo1 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }

        .ig-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 600px;
        }

        .ig-grid-item {
            aspect-ratio: 1 / 1; /* Forces the item to stay square */
            overflow: hidden;
        }

        .ig-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Prevents image distortion */
        }

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

        .folders {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columns like Instagram */
            gap: 3px; /* Space between posts */
            width: 100%;
            max-width: 600px;
        }

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

        .accounts {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }

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

        .embed1 iframe{
            width: 370px;
            height: 500px;
        }

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

        .embed2 iframe{
            width: 370px;
            height: 350px;
        }

        .guest3 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }
        
        .embed3 iframe{
            width: 370px;
            height: 250px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }
    }

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

        .embedm1 iframe{
            width: 375px;
            height: 100px;
        }

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

        .embedm2 iframe{
            width: 375px;
            height: 500px;
        }

        .music3 {
            align-self: auto;
            background-color: #81d68e;
            margin: 10px;
            border: 10px solid #81d68e;
            padding: auto;
        }
        
        .embednm3 iframe{
            width: 370px;
            height: 300px;
        }

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

        .center-element iframe{
            width: 100%;
            max-width: 100%;
            border: none;
            height: auto;
        }
    }

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

        .filmpicks {
            display: flex;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
        }

        .filmpicks img {
            width: 70px;
        }

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

        .film2 img {
            width: 210px;
        }

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


    .errorimg img{
        width: 300px;
    }
}