* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--scrollbarcolor);
    scrollbar-width: thin;
    list-style: none;
}
body {
    max-height: 100vh;
    background-color: var(--bgcolor);
    background-image: var(--bgimage);
    background-size: var(--bgsize);
    background-attachment: var(--bgattach);
    background-repeat: var(--bgrepeat);
    background-blend-mode: var(--bgblendmode);
    background-position: var(--bgpos);
    font-family: var(--fontfamily);
    color: var(--fontcolor);
    overflow-x: hidden;
}
#container {
    position: relative;
    background-color: var(--containerbgcolor);
    background-image: var(--containerbgimg);
    background-blend-mode: var(--containerbgblendmode);
    background-position: var(--containerbgpos);
    background-attachment: cover;
    padding: 1.3rem;
    min-height: auto;
    width: 100%;
    max-width: 1150px;
    justify-self: center;
    outline: var(--outlinestyle);
    outline-offset: 5px;
    border-image: url(/images/webthemes/floral/flowerborder2.png) 42 round;
    border-image-width: 30px;
    box-shadow: 10px 15px 9px rgba(120, 20, 92, 0.333);
}
#content {
    background: var(--contentbg);
    background-blend-mode: var(--contentbgblendmode);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--bordercolor);
    display: grid;
    padding: .2rem;
    grid-template-rows: auto 250px auto;
    text-align: center;
    gap: 1.3rem;
}
.miniwindows {
    margin-left: .3rem;
    margin-right: .3rem;
    border: 2px solid var(--bordercolor);
    background: var(--windowbg);
    background-blend-mode: var(--windowbgblendmode);
    overflow: auto;
    border-radius: 10px;
    box-shadow: 5px 8px 15px rgba(29, 20, 120, 0.333);
}
header {
    border: 5px solid var(--tabborder);
    border-radius: 10px 10px 0 0;
    padding: 4rem 0;
    text-align: center;
    background: var(--headerbg);
    background-clip: padding-box;
}
h1{
    font-size: clamp(.5rem, 11vw, 4rem);
    -webkit-text-stroke: .035rem var(--h1color);
}
.sectiontab {
    font-size: 1.7rem;
    color: var(--h3color);
    background: var(--tabbg);
    border: 4px solid var(--tabborder);
    border-radius: 10px 10px 0 0;
    position: sticky;
    top: 0;
}
.theming {
    margin-top: 1.3rem;
}
select {
    margin: 1rem 0;
    padding: .4rem;
    max-width: 85%;
    font-size: .8rem;
    background-color: var(--buttoncolor);
    border-radius: 10px 10px 0 0;
    color: var(--fontcolor);
    outline: var(--outlinestyle);
    outline-offset: 3px;
}
nav {
    padding-bottom: .4rem;
}
nav ul {
    margin-top: .12rem;
    display: flex;
    row-gap: 3px;
    flex-direction: column;
}
nav a {
    margin: .12rem .3rem;
    background: var(--navbuttoncolor);
    border: 2px solid rgb(126, 39, 97);
    border-radius: 5px;
}
a{
    display: block;
    text-decoration: none;
    color: var(--linkcolor);
}
main {
    padding: .4rem;
}
main .divider {
    max-width: 100%;
}
article > :first-child {
    font-size: clamp(1.4rem, 3.5vw, 2.5rem);
    color: var(--mainheadercolor);
}
.storeAlbums {
    position: relative;
    margin: 2rem .5rem .2rem;
}
#currentalbum {
    width: max(80%, 11.5rem);
    border-radius: 5%;
    border: 5px solid var(--bordercolor)
}
#prev-album, #next-album {
    padding: 3%;
    background: var(--footercolor);
    border: 3px solid var(--bordercolor);
    border-radius: 25%;
    position: absolute;
}
#prev-album {
    top:50%;
    left: 0;
    transform: translateY(-50%);
}
#next-album {
    top:50%;
    right: 0;
    transform: translateY(-50%);
}
footer {
    background: var(--footercolor);
    border: 2px solid var(--bordercolor);
    border-radius: 0 0 10px 10px;
    text-align: center;
    margin: 0;
    padding: .3rem;
}
/* image positioning */
.webimages {
    width: 0;
    position: absolute;
    display: none;
    z-index: 1;
}
.contentimg {
    display: block;
}
@media only screen and (max-width: 910px) {
    h3 {
        font-size: 1.4rem;
    }
}
@media only screen and (min-width: 769px) {
    .webimages{
        display: block;
    }
    #container{
        width: 89%;
        margin: 1rem 0;
        border-radius: 25px;
    }
    #content{
        padding: 1.3rem .5rem;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 150px 100px 200px 150px;
        gap:.5rem;
    }
    .miniwindows {
        margin: 0;
    }
    .theming{
        margin-top: 0;
        grid-area: 1 / 1 / 2 / 2;
    }
    nav{
        grid-area: 2 / 1 / 5 / 2;
    }
    main {
        grid-area: 1 / 2 / 5 / 5;
    }
}