.mode-toggle {
    position: absolute;
    top: 2vh;
    right: 2vw;
    width: 15vw;
    font-size: xxx-large;
    background: var(--paw-colour);
    color: var(--text-colour);
    border-radius: 10vmin;
}

body {
    margin: 0;
}

.paw-beans {
    display: flex;
    flex-direction: row;
    font-size: larger;
}

.blog-list-header {
    font-family: 'Noto Emoji';
    font-size: 64pt;
    text-align: center;
    background: #2d2657;
    padding: 6% 0;
    width: 100%;
    color: hotpink;
}

.blog-list {
    background: slateblue;
    margin-top: 0;
    text-align: center;
    list-style-type: none;
    padding-left: 0;
}

@media (min-width: 800px) { 
    .blog-list {
        margin-left: 4vw;
        margin-right: 4vw;
    }
}

.blog-list li h1 {
    margin-top: 0;
    text-align: left;
    background: mediumslateblue;
}

.blog-list li h1 h2 {
    font-size: large;
    margin-top: -0.5em;
    padding-bottom: 1em;
    margin-left: 1em;
    color: darkgray;
}

.blog-list li hr {
    margin-bottom: 0;
    text-align: left;
    background: mediumslateblue;
    color: whitesmoke;
}

.blog-list li p {
    text-align: left;
    font-size: large;
    padding: 0 1em;
}

.blog-list::-webkit-scrollbar {
  display: none;
}

.blog-list-end { padding-top: 2em; }

.blog-list-element {
    font-size: x-large;
    text-decoration: none;
    color: whitesmoke;
    display: block;
    padding: 0.5em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

a.blog-list-element:hover {
    color: hotpink;
}

.landing-page {
    background: slateblue;
    margin-top: 0;
    text-align: center;
    list-style-type: none;
    padding-left: 0;
    section:last-child {
        font-size: xx-large;
        height: 1lh;
        background: mediumslateblue;
    }
    section {
        hr {
            margin: 1ch 0;
            text-align: left;
            background: mediumslateblue;
            color: whitesmoke;
        }
        h1 {
            margin-top: 0;
            margin-bottom: 0;
            text-align: left;
            background: mediumslateblue;
            text-align: center;
            a {
                color: whitesmoke;
                text-decoration: none;
            }
            a:hover {
                color: hotpink;
                text-decoration: none;
            }
        }
    }
}

@media (min-width: 800px) { 
    .landing-page {
        margin-left: 4vw;
        margin-right: 4vw;
    }
}

.rss {
    align-self: center;
    color: lightpink;
    text-decoration: none;
    padding-bottom: 1em;
    padding-left: 4em;
    padding-right: 4em;
    padding-top: 0.25em;
}

/*.blog-list-element:link {
    color: lightpink;
}

.blog-list-element:visited {
    color: lightpink;
}*/




/*
.paw-pad {
    width : 45vmin;
    height: 55vmin;
    background: var(--paw-colour);
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-top:   -2vmin;
    border-radius: 100%;
    overflow: hidden;
}


.bean {
    width : var(--bean-width);
    height: var(--bean-height);
    background: var(--paw-colour);
    border-radius: var(--bean-width)/var(--bean-height);
}

.bean:hover {
    background: var(--paw-colour-hover);
    transition: transform 0.25s;
}

.bean:visited {
    color: var(--text-colour);
    text-decoration: none;
}

.bean:link {
    color: var(--text-colour);
    text-decoration: none;
}
.bean-text {
    margin: auto;
    text-align: center;
    vertical-align: baseline;
    margin-top: 10vmin;
}

.bean-nth-0 {
    margin-top: 15vmin;
    margin-left: auto;
    margin-right: 2vmin;
    float: left;
    transform: rotate(-15deg);
}

.bean-nth-0:hover {
    transform: scale(1.1) rotate(-15deg);
}

.bean-nth-1 {
    margin-top: 8vmin;
    margin-left: 1vmin;
    margin-right: 1vmin;
    transform: rotate(-5deg);
    float: left;
}

.bean-nth-1:hover {
    transform: scale(1.1) rotate(-5deg);
}

.bean-nth-2 {
    margin-top: 8vmin;
    margin-left: 1vmin;
    margin-right: 1vmin;
    transform: rotate(5deg);
    float: left;
}

.bean-nth-2:hover {
    transform: scale(1.1) rotate(5deg);
}

.bean-nth-3 {
    margin-top: 15vmin;
    margin-left: 2vmin;
    margin-right: auto;
    float: left;
    transform: rotate(15deg);
}

.bean-nth-3:hover {
    transform: scale(1.1) rotate(15deg);
}

@media (max-width: 480px) { 
    .screen-center { height: 100vh; }

    body {
        --bean-width:  22vmin;
        --bean-height: 30vmin;
        overflow: hidden;
    }

    .paw-pad {
        width : 75vmin;
        height: 80vmin;
        border-radius: 100%;
    }
    .blog-list-header {
        margin-top: 6vmin;
    }
}*/