@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --bg-color: rgba(238,238,238,1);
  --bg-color-5: rgba(238,238,238,.5);
  --bg-color-75: rgba(238,238,238,.8);
  --bg-color-75-i:rgba(13,13,13,.8);
  --color: rgba(13,13,13,1);
  --highlight: rgba(13,13,13,.1);


  --size-w:90dvh;
  --size-mw:90vw;
  --size-h:90dvh;
  --size-mh:90vw;

  --font-size: 20px;

  --box-shadow: 0 0 8em -4em rgba(0,0,0,.1);
}

html{ height:100%; }
body {
    background-color:var(--bg-color); /*rgba(0,0,0,1);*/
    font-size:var(--font-size);
    color:var(--color);
    min-height: 100%;
    padding:0;
    margin:0;

    font-family:"Aleo", serif;
    font-weight: 200;
    line-height: 1.5em;
}
@media (max-width:767px) {
    body {
        font-size:18px;
    }
}

a {
    text-decoration:none;
    color:inherit;
    border-bottom: dotted 1px;
}

button,a.button {
    font-family: inherit;
    font-size:inherit;
    font-weight: 300;
    border:1px solid;
    outline:none;
    padding:1em 2em;
    background-color: var(--color);
    color:var(--bg-color);
}
button[disabled],a.button[disabled] {
    opacity: .4;
}
button.large,a.button.large {
    font-size:1.6em;
    display: block;
    width:fit-content;
}

h1 {
    display: flex;
    gap:.5em;
    align-items: center;
    flex-wrap: wrap;
}
h2 {
    text-transform: uppercase;
}
h3 + p {
    margin-top:-.75em;
}
#description h3 + p {
    margin-top: inherit;
}

iframe {
    border:none;
    outline:none;
    /*width:calc(100vw - calc(100vw - calc(1200px + 4em)));
    height:calc(calc(100vw - calc(100vw - calc(1200px + 4em))) * .5625);
    height:calc(100vw - calc(100vw - calc(675px + 4em)));*/
    width:100vw;
    height:56.25vw;
}
@media (max-width:1200px) {
    iframe {
        width:100vw;
        height:56.25vw;
    }
}




.columns {
    display: grid;
    gap: 4em;
    align-items: flex-start;
}
.columns.two {
    grid-template-columns: 1fr 1fr;
}
.columns.three {
    grid-template-columns: 1fr 1fr 1fr;
}
.columns.leftBar {
    grid-template-columns: 1fr 2fr;
}
.columns.rightBar {
    grid-template-columns: 2fr 1fr;
}
.columns.mintInfo {
    grid-template-columns: auto minmax(0, 70ch);
    justify-content: flex-start;
    gap:6vw;
}
@media (max-width:767px) {
    .columns.two,.columns.three,.columns.leftBar,.columns.rightBar,.columns.mintInfo {
        grid-template-columns: 1fr;
    }
    /*.columns.two > div:nth-child(2) {
        
         grid-row-start: 1;
    }*/
}


.container {
    margin-left: auto;
    margin-right: auto;

    padding:2em 6vw;
    position: relative;
}
.container.fullWidth {
    width:calc(100vw - 12vw);
    max-width:inherit;
}

.icon {
    max-width:1em;
    display: block;
}


.five-images {
    width:530vw;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    /*filter:saturate(0);*/
    align-items:center;
}

.one-sixth {
    width:80vw;
    margin-right:10vw;
    position: relative;
}
.one-sixth:first-child {
    padding:6vw;
    width:68vw;
}
.one-sixth:last-child {
    margin-right:0;
}

.one-sixth__image {
    width:100%;
}

.one-sixth .timeLabel {
    position: absolute;
    left:-2vw;
    top:80%;
    transform:translate(-50%, -50%);
}
.one-sixth .timeLabel:after {
    content: "";
    position:absolute;
    left:75%;
    top:calc(50% - 1em);
    transform:translate(0%, -50%);
    color:white;
    padding:.3em .5em;
    border-radius:.25em;
    font-size:.75em;
    text-wrap: nowrap;
    
    font-style: italic;
    background-color:rgba(0,0,0,.7);

    line-height: 1.2em;
}
.one-sixth:nth-child(1) .timeLabel {
    left:4vw;
}
.one-sixth:nth-child(1) .timeLabel:after {
    content:"This is how the art looks today, " attr(data-date) "!\AIt changes slightly every day ⇢ ⇢";
    white-space: pre-wrap;
    min-width:280px;
    top:calc(50% - 2.5em);
}
.one-sixth:nth-child(2) .timeLabel:after {
    content:"January 1st";
}
.one-sixth:nth-child(3) .timeLabel:after {
    content:"March 1st";
}
.one-sixth:nth-child(4) .timeLabel:after {
    content:"June 1st";
}
.one-sixth:nth-child(5) .timeLabel:after {
    content:"September 1st";
}
.one-sixth:nth-child(6) .timeLabel:after {
    content:"December 1st";
}

.hidden-scrollbar {
  overflow: scroll; /* Ensures element is still scrollable */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.oe_callout {
    border:.5px dotted;
    padding:.5em 1em;
    display: grid;
    grid-template-columns:minmax(0, 100px) 1fr auto;
    gap:1em;
    align-items: center;
    margin-bottom:.5em;
    max-width:100%; /*calc(calc(100% - 12vw) - 1em);*/
    background-color: white;
}
.oe_callout .oe_callout__info {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap:.5em;
}
.oe_callout .oe_callout__image img {
    /*max-width: 300px;*/
}
@media (min-width:0px) {
    .oe_callout {
        grid-template-columns: 1fr;
    }
}

.modal {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background-color: white;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0);
    display:grid;
    place-items:center;
}
.modal #modalContent {
    /*position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);*/
    width:60ch;
    max-width:80vw;
    max-height:80vh;
    background-color: white;
    padding:5vw;
    overflow: auto;

    background-color: var(--bg-color-75-i);
    color:var(--bg-color);
    backdrop-filter: blur(24px) brightness(90%);
    box-shadow: var(--box-shadow);
}

.modalTrigger {
    cursor:pointer;
}

.tokenHeading {
    margin-left:6vw;
    text-transform: none;
    transform:translateY(6vw);
    font-style: italic;
}

.mintButton {
    cursor:pointer;
    white-space: nowrap;
}
.mintButton[disabled] {
    cursor:auto;
}

.oeMintButton {
    cursor: pointer;
    font-size:.8em;
}
.oeMintButton[disabled] {
    cursor:auto;
}

.oeInput {
    padding:1em;
    width:5ch;
    font-family: inherit;
    font-size:.8em;
    font-weight: 300;
    border:1px solid var(--color);
    background-color:var(--color);
    color:var(--bg-color);
}

.chip {
    background-color: var(--highlight);
    color: var(--color);
    font-size: .8em;
    padding:.1em;
    border-radius:4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:fit-content;
    gap:.5em;
    margin:0;
    margin-top:.5em;
}
.chip.inline {
    display: inline;
}
.chip.off {
    background-color: transparent;
}

#alert {
    background-color: var(--bg-color-5);
    position: fixed;
    transition: all .25s;
    width:100%;
    top:50%;
    left:0;
    z-index: 1000;
    transform-origin: top center;
    transform:translateY(-50%);
    backdrop-filter: blur(24px) brightness(110%);
    text-align: center;
    padding: 2em;
    box-shadow: var(--box-shadow);
}
#alert.hidden {
    transform:translateY(calc(-100% - 50vh));
}
#alert .flex {
    display: flex;
    flex-wrap: wrap;
    gap:.5em;
    place-items: center;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
}
#alert .closeMessage {
    font-size:.8em;
    cursor:pointer;
    background-color: var(--highlight);
    padding:.1em .5em;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
}

.contractInfo {
    text-align:center; padding-top:10vh; padding-bottom:10vh;
    max-width:100vw;
    overflow: auto;
}
.contractInfo h4 + p {
    margin-top:-1.25em;
}
.contractInfo h4 + p a {
    font-size:.6em;
}
.contractInfo img {
    max-width:2em;
    width:100%;
}
.contractInfo .logos {
    grid-template-columns: 2em 2em; justify-content: center;
}
.contractInfo a {
    border-bottom:none;
}

label.label {
    display: block;
    font-size:.75em;
    margin-bottom:-1em;
    font-weight: 400;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }