/* Really small screens */
@media (max-width: 400px) {
    .section.shop .title p {
        line-height: 13vi;
        font-size: 13vi;
    }

}

/* Tablet */
@media (min-width: 768px) {

    .section.shop .title p {
        line-height: 8vi;
        font-size: 8vi;
    }

    .fontlogo {
        font-size: 7vi;
    }

    .grid-item {
        width: 25%;
        height: 50%;
        align-items: center;
        justify-content: center;
    }            
}

/* Laptop */ 
@media (min-width: 1024px) { 

    .section.shop .title {
        padding-top: .8vi;
    }
    .section.shop .title p {
        line-height: 7vi;
        font-size: 7vi;
    }

    .fontlogo {
        font-size: 5vi;
    }
    
    body {
        cursor: none;
    }

    .grid-item {
    }

    /* Cursors */

    .cursor-circle {
        width: 0px;
        height: 0px;
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        user-select: none;
        font-size: 4em;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0em;
        z-index: 9999;
        mix-blend-mode: difference;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), font-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        animation: cursor-circle 5s linear infinite;
    }

    .cursor-dot {
        display: flex;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: white;
        position: fixed;
        pointer-events: none;
        user-select: none;
        z-index: 10000;
        transform-origin: 50% 50%;
        transform: scale(1) translate(-50%, -50%);
        mix-blend-mode: difference;
        transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), font-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .cursor-dot.clicked {
        width: 50px;
        height: 50px;
        font-size: 100px;
    }

    .cursor-circle.clicked {
        width: 10px;
        height: 10px;
        font-size: 30px;
    }

    .notspawned {
        opacity: 0;
    }

    /* Hovers */
            
    .grid-item.tbd:hover {
        border: solid 1px #F2f2f2;
    }

    .grid-item.tbd:hover ::after {
        content: '✦coming soon';
        top: 0;
        left: 0;
        font-family: "BebasNeue", Sans-Serif;
        text-transform: lowercase;
        font-size: 1.8vi;
        letter-spacing: .05vi;
        text-align: center;
        white-space: nowrap;
        font-style: italic;
        color: #EEE;
    }

    /* Hovers - Sections - Shop */

    .section.shop:hover {
        background-color: black; 
        transform: scale(1.05);
    }
    .section.shop:hover .title p {
        color: white;
        -webkit-text-stroke: 0em black;
        text-stroke: 0em black;
    }

    /* Hovers - Sections - Shop */

    .section.darkmode:hover {
        transform: scale(1);
        background-color: black;
    }

    .section.darkmode:hover .title {
        transform: scale(1.3);
    }

    .section.darkmode:hover .title .sun > p:nth-child(1),
    .section.darkmode:hover .title .sun > p:nth-child(2) {
        color: white;
        font-size: 0em;
    }

    .section.darkmode:hover .moon {
        transform: scale(1);
        transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .section.darkmode:hover .title .moon > p:nth-child(1) {
        color: white;
    }

    .section.darkmode:hover .title .moon > p:nth-child(2) {
        animation: section-darkmode-moon-effect 4s linear infinite;
        animation-delay: -.2s;
    }

    /* Desktop Only Animations */

    @keyframes section-text-slide {
        0% {
            transform: translate(0vw, 0);
        }
        50% {
            transform: translate(25vw, 0);
        }
        51% {
            transform: translate(-25vw, 0);
        }
        100% {
            transform: translate(0vw, 0);
        }
    }

}

@media (min-width: 1280px) { 
    /* Desktop */ 
    .section.shop .title p {
        line-height: 5.8vi;
        font-size: 5.8vi;
    }
}