body{
    font-family: 'Instrument Serif', serif;
    color: #A34617;
    --dark-blue: #1F2532;
    --primary-color: var(--dark-blue);
    --med-gray-values: 189, 189, 189;
    --medium-gray:rgba(var(--med-gray-values));
    --secondary-color: var(--medium-gray);
    --cream-values: 237, 232, 227;
    --cream: rgb(var(--cream-values));
    --yellow-values: 206, 138, 57;
    --yellow: rgb(var(--yellow-values));
    font-size: 20px;
    background: var(--cream);
    margin: 0;
    padding: 0;
}
.instrument-serif-regular {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-style: normal;
}

.instrument-serif-regular-italic {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-style: italic;
}
.page-header h2 {
    color: var(--yellow);
}
@media screen and (min-width: 1350px) {
    .page-header h2 {
        color: #A34617;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.hidden {
    display: none !important;
}

.spin {
    animation-name: spin, spin;
    animation-duration: 3s, 1.8s;
    animation-timing-function: ease-in, linear;
    animation-iteration-count: 1, infinite;
    animation-delay: 0ms, 3s;
}

.vinyl-box {

    display: block;
    z-index: 0;

    .label h1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
}

.footer {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    text-align: center;
    .social-icon {
        display: inline-block;
        margin-right: 6px;
       
    }
}

.header {
    z-index: 10;
    position: fixed;
    top: 1rem;
    right: 1rem;
    #hamburger-menu {
        position: relative;
        z-index: 10;
    }
    .hamburger {
        background-color: rgba(var(--cream-values), 0.6);
        padding: 16px;
        position: relative;
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        border-radius: 4px;
        width: 24px;

        &:hover {
            background: var(--cream);
        }

        .bar {
            height: 1px;
            border:1px solid black;
            background: black;
            max-width: 100%;
            display: block;
            &:not(:last-child) {
                margin-bottom: 6px;
            }
        }
    }
    #hamburger-menu ul {
        
        clear: both;
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 0;
        float: right;
        li {
            display: block;
            padding: 1rem;
            background: var(--secondary-color);
            color: var(--primary-color);
            width: 100%;
            box-shadow: 0 0 2px 1px rgba(255,255,255,0.5);
            margin-bottom: 1rem;

            &:hover {
                background: var(--primary-color);
                a, a:visited, a:link {
                    color: var(--cream);
                }
            }
        }
        a, a:visited, a:link {
            color: var(--primary-color);
            text-decoration: none;
            display: block;
            text-align: center;
            width: clamp(8rem, 10vw, 20rem);
        }
    }
}

@media screen and (min-width: 860px) {
    .header {
        #hamburger-menu {
            .hamburger {
                background-color: rgba(var(--med-gray-values), 0.6);
                &:hover {
                    background: var(--medium-gray);
                }
            }
        }
    }
    .footer {
        text-align: left;
    }
}