body {
    --MainBackground: linear-gradient(145deg, #ffffff, #b6d2ca);
}


.dark-theme {
    --MainBackground: linear-gradient(145deg, #6a6a6a, #303030);
}


@media only screen and (max-width: 768px) and (orientation: portrait) {
    body main {
        overflow: visible;
        scrollbar-width: auto;
    }
}


main {
    background: var(--MainBackground);
}


@media (max-width: 600px) {
    main {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.album {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
    padding: 1em;
    margin: 0;
    width: 60%;
    box-sizing: border-box;
    list-style-type: none;
    z-index: 2;
}

.album li {
    min-width: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    background-color: var(--liOverlay);
    border: 0.0625rem solid var(--border);
    border-radius: 2.5em;
    box-shadow: 0.125rem 0.1875rem 0.25rem var(--shadow),
    inset 0.0625rem 0.0625rem var(--shadow);
    text-align: center;
    pointer-events: auto;
}

.album[data-page="1"] li:nth-of-type(1) {
    background-image: url(../fotos/ACHHD.png);
    background-position: center;
    background-size: cover;
    background-color: aqua;
}

.album[data-page="1"] li:nth-of-type(2) {
    background-image: url(../fotos/SS3.png);
    background-position: center;
    background-size: cover;
    background-color: coral;
}

.album[data-page="1"] li:nth-of-type(3) {
    background-image: url(../fotos/TL.jpg);
    background-position: center;
    background-size: cover;
    background-color: darkseagreen;
}

.album[data-page="1"] li:nth-of-type(4) {
    background-image: url(../fotos/AA.jpeg);
    background-position: center;
    background-size: cover;
    background-color: hotpink;
}

.album[data-page="2"] li:nth-of-type(1) {
    background-image: url(../fotos/RhythmHeaven.png);
    background-position: center;
    background-size: cover;
    background-color: aqua;
}

.album[data-page="2"] li:nth-of-type(2) {
    background-image: url(../fotos/dogs.jpg);
    background-position: center;
    background-size: cover;
    background-color: coral;
}

.album[data-page="2"] li:nth-of-type(3) {
    background-image: url(../fotos/PB2.jpg);
    background-position: center;
    background-size: cover;
    background-color: darkseagreen;
}

.album[data-page="2"] li:nth-of-type(4) {
    background-image: url(../fotos/DQ9.png);
    background-position: center;
    background-size: cover;
    background-color: hotpink;
}


.album a {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    pointer-events: auto;
    font-size: 0;
    text-decoration: none;
}

aside {
    position: absolute;
    top: 8%;
    right: 4%;
    z-index: 5;
    pointer-events: auto;
    width: 35%;
    max-height: 84%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    color: var(--tekst);
    background: var(--bar);
    border: 0.0625rem solid var(--border);
    border-radius: 1em;
    box-shadow: 0.125rem 0.1875rem 0.25rem var(--shadow);
    font-size: clamp(12px, 1.5cqi, 18px);
    overflow-wrap: anywhere;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.album[hidden],
aside[hidden] {
    display: none !important;
}

aside h1 {
    margin: 0 0 0.5em;
    font-size: 1.25em;
}

aside p {
    margin: 0;
}

.divider {
    text-align: center;
    margin: 1em;

}

img {
    position: absolute;
    width: 60%;
    height: auto;
    right: -25%;
    bottom: -1%;
    animation: spin 3s linear infinite;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 4;
}

aside::-webkit-scrollbar {
    display: none;
}