body {
    --paw-colour:       slateblue;
    --paw-colour-hover: hotpink;
    --text-colour:      white;
    --bean-width:  15vmin;
    --bean-height: 23vmin;
    background-color: whitesmoke;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

.paw-holder {
    transform: rotate(45deg);
    transition: transform .5s;
    margin-right: 0.5em;
    margin-left:  5px;
    margin-top:   0.5em;
    > img {
        width: 35px;
        height: 35px;
    }
}

.paw-holder:hover {
    transform: rotate(0deg);
}

.paw-pad {
    width: 20px;
    height: 20px;
    background: hotpink;
    display: block;
    border-radius: 100%;
    padding: 0;
    margin-left: 11.5px;
    margin-top: -5px;
}

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

.bean {
    width: 10px;
    height: 10px;
    background: hotpink;
    border-radius: 100%;
    padding: 0;
}

.bean-nth-0 {
    margin: 0;
    float: left;
    transform: rotate(-15deg);
    margin-top: 10px;
}

.bean-nth-1 {
    margin: 0;
    transform: rotate(-5deg);
    float: left;
    margin-right: 3px;
}

.bean-nth-2 {
    margin: 0;
    transform: rotate(5deg);
    float: left;
}

.bean-nth-3 {
    margin: 0;
    float: left;
    transform: rotate(15deg);
    margin-top: 10px;
}



.nav-bar {
    width: 100%;
    background: #2C98FB;
    height: 40pt;
    text-align: left;
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

.nav-bar section {
    align-self: center;
    padding: 0;
    display: flex;
}

.nav-with-title {
    display: flex; 
    flex-direction: row;
    align-self: normal !important;
}

.nav-with-title h1 {
    margin-left: 1em;
    font-size: x-large;
    margin-top: 0.5em;
}


.nav-phone-dropdown-button {
    display: block;
    margin-right: 0.5em;
    font-size: xx-large;
    border: none;
    background: none;
}
.nav-list {
    display: none;
}

.nav-phone-dropdown.on {
    list-style-type: none;
    display: block;
    text-align: center;
    align-items: center;
    background: slateblue;
    margin: 0;
    padding: 0;
}

.nav-phone-dropdown.off {
    display: none !important;
}
.nav-phone-dropdown li {
    font-size: x-large;
    padding-right: 1em;
    padding-bottom: 0.5em;
}

.nav-phone-dropdown li a {
    color: whitesmoke;
    text-decoration: none;
}
.nav-phone-dropdown li a:hover {
    color: hotpink;
    text-decoration: none;
}

@media (min-width: 800px) { 
    .nav-phone-dropdown-button {
        display: none;
    }
    .nav-phone-dropdown {
        display: none;
    }

    .nav-list {
        list-style-type: none;
        display: flex;
        text-align: center;
        align-items: center;
    }
    
    .nav-list li {
        font-size: x-large;
        padding-right: 1em;
    }

    .nav-list li a {
        color: whitesmoke;
        text-decoration: none;
    }
    
    .nav-list li a:hover {
        color: hotpink;
        text-decoration: none;
    }
}