@font-face {
    font-family: "Cursive";
    src: url("/assets/fonts/Cursive\ standard.woff2");
}

@font-face {
    font-family: "Cursive-bold";
    src: url("/assets/fonts/Cursive\ standard\ Bold.woff2");
}

// Colors 

:root {
    --title-color: #63BAEE;
    --bgd-color: #F7F6EE;
    --text-color: #2A2A2A;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bgd-color: #2A2A2A;
        --text-color: #F7F6EE;
    }
}

body {
    font-family: "Cursive";
    display: flex;
    flex-direction: column;
    background-color: var(--bgd-color);
    color: var(--text-color);
    margin-left: 10%;
    margin-right: 10%;


    h1 {
        font-family: "Cursive-bold";
        margin-left: auto;
        margin-right: auto;
        font-size: xxx-large;
        color: var(--title-color);
        text-align: center;
    }

    .FeedDesc {
        font-size: x-large;
        text-align: center;
    }

    .FollowMe {
        display: flex;
        flex-direction: row;

        align-items: center;
        height: 10vh;

        font-size: x-large;
        white-space: nowrap;

        a {
            margin-left: 5%;
            margin-right: 5%;
            display: flex;
            flex-direction: row;
            text-decoration: none;
            height: 100%;
            align-items: center;

            p {
                margin-left: 5%;
                margin-right: 5%;
                white-space: nowrap;
            }

            img {
                height: 25%;
            }
        }
    }

    .listen-on {
        display: flex;
        flex-direction: row;

        align-items: center;

        font-size: x-large;
        white-space: nowrap;

        height: 10vh;

        a {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 5%;
            margin-right: 5%;
            height: 100%;

            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-decoration: none;
            
            img {
                height: 75%;
            }

            .textRSS {
                margin-left: 5%;
                color: var(--text-color);
            }
        }

        .rss-listen {
            padding-left: 1%;
            padding-right: 1%;
            
            border: solid var(--text-color);
            border-radius: 50px;
        }
    }

    hr {
        width: 100%;
    }

    .Podcasts {
        .podcast {
            audio {
                width: 90%;
                background-color: #F7F6EE;
            }
        }
    }
}