body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    background-color: white;
    min-width: 300px;
}

/* Nav bar */

#nav-bar {
    z-index: 200;

    position: fixed;
    left: 50%;
    bottom: 20px;
    border: none;
    margin: 0;
    font-size: 0;
    transform: translateX(-50%);
    padding: 0 1.5px;

    width: 100%;
    text-align: center;

    transition: 0.5s;
}

#rectangle {
    background-color: bla;
    z-index: -1;

    position: absolute;
    bottom: 29.5px; left: 50%;
    transform: translateX(-50%);
    height: 33px; width: 95px;

    transition: 0.5s;

    cursor: pointer;
}

#nav-bar-svg {
    display: block;
    z-index: -1;

    position: absolute;
    bottom: 0px; left: 50%;
    transform: translateX(-50%);
    height: 90px;

    transition: 0.5s;
}

#nav-bar input[type=radio] {
    appearance: none;

    width: 60px; height: 60px;
    padding: 0;
    margin: 0px -1.5px;
    margin-bottom: 15px;

    background-color: black;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    transition: all 0.5s, background-size 0.2s;
}

#nav-bar input[type=radio]:checked {
    width: 90px;
    height: 90px;
    margin-bottom: 0px;
    background-size: 100%;
}

#nav-bar input[type=radio]:active {
    background-size: 70%;
}

#nav-bar input[type=radio]:checked + img {
    height: 50px;
}

#nav-heart {
    background-image: url(skins/heart.svg);
} #nav-home {
    background-image: url(skins/home.svg);
} #nav-plus {
    background-image: url(skins/plus.svg);
}

/* Nav bubble */

#bubble_wrapper {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: 57px;
    transform: translateX(-50%);
    height: 90px;
    width: 90px;

    transition: 0.5s;
    display: none;

    cursor: pointer;
}

#bubble_wrapper > img, #bubble_wrapper > div {
    background-color: white;
    height: 30px;
    width: 30px;
    padding: 5px;
    border-radius: 100%;
    position: absolute;
}

#bubble_wrapper > img {
    object-fit: contain;
    overflow: visible;
    z-index: 3;
}

#bubble_wrapper > div {    
    border: solid 4px black;
    z-index: 2;
}

/* Library */

#library {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: 5px;
    padding: 5px;
}

#library > input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    
    margin: 0;
    padding: 0;

    background-color: #F0F0F0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 80%;
    aspect-ratio: 1 / 1;
}

#library > input:checked {
    box-shadow: inset 0 0 0 5px #4C9CF6;
}

#library > input:hover {
    background-color: rgb(225, 225, 225);
}

/* Main */

#main {
    width: 100%;
    height: 90%;
    min-height: 400px;
    margin-top: 20px;

    position: relative;
    top: 0px;
    right: 0px;

    transition: 0.5s;
    background-color: white;
}

#top {
    position: absolute;
    top: 0px; left: 50%;
    transform: translateX(-50%);

    width: 100%;
    height: 28%;
    object-fit: contain;
} #pant {
    position: absolute;
    top: 28%; left: 50%;
    transform: translateX(-50%);

    height: 48%;
    margin: 0 auto;
} #shoe {
    position: absolute;
    bottom: 0px; left: 50%;
    transform: translateX(-50%);

    height: 24%;
}

/* Favourites */

#favourites {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: 5px;
    padding: 0px 5px 5px 5px;
}

#favourites > div {
    aspect-ratio: 1 / 3;
    background-color: #F0F0F0;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 5px;
}

#favourites > div > div {
    width: 1fr; height: 1fr;

    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 80%;
}

#favourites > div:hover {
    background-color: rgb(225, 225, 225);
}

/* Responsive */

@media only screen and (max-width: 1000px) {
    #library {
        grid-template-columns: repeat(3, 1fr);
    }
    #favourites {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 800px) {
    #library {
        gap: 3px;
        padding: 3px;
    }
    #library > input:checked {
        box-shadow: inset 0 0 0 3px #4C9CF6;
    }
    #favourites {
        gap: 3px;
        padding: 3px;
        grid-template-columns: repeat(3, 1fr);
    }
}