/* FONTS */
@font-face {
    font-family: 'sunset-gothic-light-trial-webfont';
    src: url('Fonts/sunset-gothic-light-trial-webfont.woff2') format('woff2'),
        url('Fonts/sunset-gothic-light-trial-webfont.woff') format('woff');
        font-style: normal;
        font-weight: normal;
        font-display: swap;
}

@font-face {
    font-family: 'sunset-gothic-regular-trial-webfont';
    src: url('Fonts/sunset-gothic-regular-trial-webfont.woff2') format('woff2'),
        url('Fonts/sunset-gothic-regular-trial-webfont.woff') format('woff');
        font-style: normal;
        font-weight: normal;
        font-display: swap;
}

@font-face {
    font-family: 'sunset-gothic-medium-trial-webfont';
    src: url('Fonts/sunset-gothic-medium-trial-webfont.woff2') format('woff2'),
        url('Fonts/sunset-gothic-medium-trial-webfont.woff') format('woff');
        font-style: normal;
        font-display: swap;
}

@font-face {
    font-family: 'sunset-gothic-heavy-trial-webfont';
    src: url('Fonts/sunset-gothic-heavy-trial-webfont.woff2') format('woff2'),
        url('Fonts/sunset-gothic-heavy-trial-webfont.woff') format('woff');
        font-style: normal;
        font-weight: normal;
        font-display: swap;
}

@font-face {
    font-family: 'NeueMontreal-Regular';
    src: url('fonts/NeueMontreal-Regular.woff2') format('woff2'),
        url('NeueMontreal-Regular.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* VARIABLES */
:root {
    --h1Font: 'sunset-gothic-regular-trial-webfont', 'NeueMontreal-Regular', 'Inter', sans-serif;
    --font: 'sunset-gothic-light-trial-webfont', 'NeueMontreal-Regular', 'Inter', sans-serif;
    --fontSize: 1rem;
    /* --gradient1: linear-gradient(90deg, #00703a, #436cff, #ABC600);
    --gradient2: linear-gradient(90deg, #436cff, #CAFFD2, #EA6CFF);
    --gradient3: linear-gradient(90deg, #ABC600, #D1ACFF, #00703a);
    --gradient4: linear-gradient(90deg, #D1ACFF, #00703a, #EA6CFF);
    --gradient5: linear-gradient(90deg, #00703a, #EA6CFF, #CAFFD2);
    --gradient6: linear-gradient(90deg, #CAFFD2, #ABC600, #436cff); */

}

/* MOBILE: 375px */
html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font);
    font-size: var(--fontSize);
    background-color: #000000;
    color: white;
    display: flex;
    flex-direction: column;
}

svg {
    height: 0px;
}

#set:before,
#set:after {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100vw;
height: 100vh;
z-index: 10001;
opacity: 75%;
mix-blend-mode: overlay;
pointer-events: none;
}

#set:before {
background: #000000;
filter: url(#grainy);
pointer-events: none;
}

#set {
    width: 100vw;
    margin-top: 50px;
    position: relative;
}

.topBar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em;
    text-transform: uppercase;
    font-family: var(--h1Font);
    background-color: #0b0b0b;
    position: fixed;
    width: 100vw;
    z-index: 10002;
    color: white;
    align-items: center;
} 

.empty {
    display: none;
    /* background: var(--gradient4); */
}

#set {
    display: flex;
    flex-direction: column;
    align-items: left;
    color:white;
    background-color: #000000;
    margin-top: 76px;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative; 
    z-index: 9999;
}

button {
    cursor: pointer;
    border-radius: 3em;
    background-color: white;
    color: #000000;
    padding: 0.8em 1.2em;
}

button:hover {
    padding: 1.2em 1.6em;
    transition: 60ms ease-in-out;
}

#grainy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10003;
}

.animate-row {
    animation: oscillate 6s ease-in-out infinite;
    animation-delay: calc(var(--delay) * 1ms);
}

.animate-row:hover {
    animation-play-state: paused;
    cursor: pointer;
    left: 0;
}

@keyframes oscillate {
        0% {
          left: 400vw;
        }
        50% {
            left: 0vw;
          }
        100% {
            left: -400vw;
          }
    }

.rowText {
    /* display: none; */
    color: white;
    font-size: var(--fontSize);
    position: absolute;
    z-index: 9998;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* animation: opacity 3s ease-in; */
}

@keyframes opacity {
    0% {
      opacity: 0%;
    }
    50% {
        opacity: 0%;
      }
    100% {
        opacity: 100%;
      }
}

/* .rowText p {
    background-color: rgba(54, 54, 54, 0.653);
    border-radius: 1em;
    padding: 0.5em;
} */

.row p {
    margin: 1em;
}

footer {
    font-size: 16px;
    text-align: center;
    font-weight: 200;
}

.all {
    background:var(--gradient1);
}

.rented {
    background:var(--gradient6);
    height:100%;
    display: flex;
    align-items: center;
}

.owned{
    background:var(--gradient3);
    height:100%;
    display: flex;
    align-items: center;
}

#bio {
    padding: 2em;
    line-height: 25px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    cursor: alias;
}

.ghost {
    background-image: linear-gradient(90deg, #242424, #a2a2a2);
}
/* 
.row:hover::after {
    content: '';
    position: absolute;
    left: 0;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
} */

/* DESKTOP: 768px */
@media(min-width:768px) {
    :root {
        --fontSize: 120%;
    }

    #set {
        margin-top: 80px;
    }
    
    .topBar {
        font-size: var(--fontSize);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.4em;
        text-transform: uppercase;
        font-family: var(--h1Font);
        background-color: #0b0b0b;
        position: fixed;
        width: 100vw;
        z-index: 10002;
        color: white;
    }
}