:root {
    --red: #ff9cab;
    --orange: #ffc99d;
    --yellow: #fff281;
    --green: #9cffac;
    --blue: #8de5fc;
    --purple: #c2a5ff;
}

* {
    box-sizing: border-box;
}

html, body {
    box-sizing: border-box;
    /*background-color: #000;*/
    background: #162e40;
    color: rgb(145, 169, 180);
    margin: 0;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

body {
    min-height: 100vh;
    padding: 0 0 5em 0;
    
    background: rgb(22,46,64);
    background: linear-gradient(133deg, rgba(22,46,64,1) 0%, rgba(55,39,69,1) 100%);
}

header {
    padding: 2rem 0;
    width: 100%;
    height: 60vh;
    /*border: 1px solid red;*/
    /*font-size: 2rem;*/
    font-size: min(2rem, 3vw);
    
    /*background: rgb(22,46,64);
    background: linear-gradient(133deg, rgba(22,46,64,1) 0%, rgba(55,39,69,1) 100%);*/
    
}

.logo {
    margin: auto;
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    /* border: 1px solid red; */
    max-width: 27em;
    
    position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.logo h1 {
    margin: 0;
    font-weight: normal;
    line-height: 1em;
}

.logo h2 {
    margin: 0 0.25em 0 0.2em;
    color: var(--purple);
    font-size: 0.64em;
    font-weight: normal;
    line-height: 1.5em;
}

.logo img {
    width: 7.4em;
    float: right;
    margin-top: -0.38em;
}

.rainbow-dots {
    margin-left: 0.2em;
    margin-right: 0.27em;
    line-height: 0;
    margin-top: 0.22em;
}

.rainbow-dots .dot {
    display: inline-block;
    margin-right: 0.35em;
    background-color: var(--purple);
    border-radius: 50%;
    width: 0.25em;
    height: 0.25em;
}

.rainbow-dots .dot + .dot {
    background-color: var(--blue);
}

.rainbow-dots .dot + .dot + .dot {
    background-color: var(--green);
}

.rainbow-dots .dot + .dot + .dot + .dot {
    background-color: var(--yellow);
}

.rainbow-dots .dot + .dot + .dot + .dot + .dot {
    background-color: var(--orange);
}

.rainbow-dots .dot + .dot + .dot + .dot + .dot + .dot {
    background-color: var(--red);
    margin-right: 0;
}

@media screen and (max-width: 580px) {
    header {
        padding: 16vw 0;
        height: auto;
        font-size: min(2rem, 4.3vw);
    }

    .logo {
        max-width: 18.7em;
        transform: none;
    }

    .logo img {
        float: none;
        display: block;
        margin: 0 auto 2em auto;
        width: 12em;
        /* -webkit-transform: scaleX(-1);
        transform: scaleX(-1); */
        /* position: absolute;
        right: -1.2em;
        top: -4.15em; */
    }
    .logo h1,
    .logo h2,
    .rainbow-dots {
        /* text-align: right; */
        text-align: center;
    }
}

section h2 {
    position: relative;
    margin-bottom: 1em;
    color: var(--orange);
    /* font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal; */
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;
    z-index: 1;
}

section.insta-feed h2 {
    margin-bottom: -1.2em;
}

@media screen and (max-width: 580px) {
    section h2 {
        font-size: 1.2em;
    }

    section.insta-feed h2 {
        margin-bottom: 0;
    }

    .insta-feed .juicer-feed h1.referral {
        text-align: left;
    }
}

section {
    margin: auto auto 5em;
    width: 100%;
    max-width: min(80vw, 864px);
    /* max-width: 27em; */
}

.collections {
    display: flex;
    gap: 1em 2em;
    flex-direction: row;
}

.collections .collection {
    position: relative;
    /* margin-right: 1em; */
    margin-bottom: 3.5em;
    padding: 0;
    width: calc(33.33% - 1em);
    height: 20em;
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 2em;
    transition: 0.3s;
} 

.collections a.collection {
    font-size: 0.7rem;
}

.collections .collection:hover,
.collections .collection:focus {
    transform: translateY(-0.5em);
    box-shadow: 0 0.5em 2em rgba(0,0,0,0.25), 0 0.15em 0.15em rgba(0,0,0,0.25);
}

.collections .collection .hover-overlay {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 2em;
    opacity: 0;
    transition: 0.3s;
}

.collections .collection span {    
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.4em;
    width: 10.5em;
    background-color: rgba(0,0,0,0.5);
    font-size: 1.6em;
    font-weight: 700;
    /* font-size: 1em; */
    /* font-family: "Rubik Mono One", monospace; */
    text-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    border-radius: 0.3em;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.collections .collection:hover .hover-overlay,
.collections .collection:focus .hover-overlay {
    opacity: 1;
}

/* .collection:before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background-color: rgba(255,255,255,0.25);
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.collection:focus:before,
.collection:hover:before {
    animation: shiny 0.6s;
}

@keyframes shiny {
    0%   {opacity: 1; left: -50%;}
    50%  {opacity: 1; left: 100%;}
    51%  {opacity: 0;}
    100%  {opacity: 0; left: 0;}
} */

/* @media screen and (max-width: 740px) { */
@media screen and (max-width: 880px) {
    .collections {
        flex-wrap: wrap;
    }

    .collections .collection {
        width: calc(50% - 1.5em);
        /* width: 50%; */
    }
}

@media screen and (max-width: 580px) {
    .collections {
        flex-direction: column;
    }

    .collections .collection {
        width: 100%;
    }
}

.collections .collection.collection-cupcakes {
    background-image: url("./images/collection-cupcakes.png");
} 

.collections .collection.collection-planets {
    background-image: url("./images/collection-planets.png");
}

.collections .collection.collection-rainbows {
    background-image: url("./images/collection-rainbows.png");
} 

.collections .collection label {
    display: block;
    position: absolute;
    bottom: -2.6em;
    left: 0;
    width: 100%;
    font-size: 1.4em;
    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-align: left;
    line-height: 2.6em;
}

.insta-feed .juicer-feed.modern .j-poster,
.insta-feed .juicer-feed.modern .j-message {
    display: none;
}


.insta-feed .juicer-feed.modern li.feed-item {
    border: none;
    border-style: unset;
    background: none;
}

.insta-feed .juicer-feed.modern .j-image img {
    border-radius: 20px;
}

.insta-feed .juicer-feed.modern .j-text {
    padding: 0;
}

.insta-feed .juicer-feed .j-meta {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.insta-feed .juicer-feed h1.referral a::after {
    width: 94px;
    margin-right: 0;
}

.shop-link {

}

.shop-redbubble {

}

.shop-teepublic {

}