@import url('https://fonts.cdnfonts.com/css/virgo-01');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css2?family=Days+One');


.logo-container {
    width: min(80vw, 70vh);
    height: min(80vw, 70vh);
    margin: auto;
    transition: 100ms;
}

.vertical-center {
    display: grid;
    grid-template-rows: 100vh;
}

.vertical-center-element {
    margin-top: auto;
    margin-bottom: auto;
}

.hero-background {
    position: absolute;
    width: inherit;
    box-shadow: aquamarine;
}

.logo-container:hover {
    transform: scale(1.05);
}

/*set z-index of parallax hero section images based on child number*/
.hero-background:nth-child(1)
{
    z-index: 1;
}

.hero-background:nth-child(2)
{
    z-index: 2;
}

.hero-background:nth-child(3)
{
    z-index: 3;
}

.hero-background:nth-child(4)
{
    z-index: 4;
}

.hero-background:nth-child(5)
{
    z-index: 5;
}

.her-background:nth-child(6){
    z-index: 3;
}

.hero-background:nth-child(7){
    z-index: -1;
}

.hero-background:nth-child(8){
    z-index: 99;
}

/*auto-fit parallax hero images*/
.hero-autofit-img {
    object-fit: cover;
    height: min(120%, 100vh);
    width: auto;
}

/*set max-width of objects*/
.width-box {
    width: min(60vw, 660px);
    margin-left: auto;
    margin-right: auto;
}

/*center object horizontally*/
.center {
    margin-left: auto;
    margin-right: auto;
}

/* link buttons*/
.button-design {
    width: 250px; 
    background: linear-gradient(90deg, #ed8041 0%, rgba(237,22,79,1) 100%);
    border-radius: 80px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px; 
    display:block;
}

.button-content {
  font-family: "Days One", sans-serif;
  font-weight: 400;
  text-align: center;
  font-style: normal;
  color: rgb(118,11,66);
  text-decoration: none;
}

.button-design:hover, .button-design:active{
    transform: scale(1.125);
    filter: invert(100);
    z-index: 99;
    transition-delay: 0ms;
    transition-duration: 100ms;
}

a:link {
  text-decoration: none;
  color: rgb(118,11,66);
}

a:visited {
  text-decoration: none;
  color: rgb(118,11,66); 
}

/*hexagon grid section settings*/
.hex-grid {
    display:flex;
    align-content: center;
    --s: min(100px, calc(54vw/6));  /* size  */
    --m: min(5px, 0.5vw);    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
  }

/*hexagon grid container*/
.hex-container {
    font-size: 0; /*disable white space between inline block element */
}

/*each div in the container is rendered as a hexagon*/
.hex-container div {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547); 
    display: inline-block;
    font-size: initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: linear-gradient(90deg, #ed8041 0%, rgba(237,22,79,1) 100%);
    outline-width: 1px;
    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}

/*stagger hexagons in grid*/
.hex-container::before {
    content: "";
    width: calc(var(--s)/2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(     
                     #0000 0 calc(var(--f) - 3px),      
                     #000  0 var(--f));
}

.hex-obj {
    transition-delay: 1000ms;
}

/*delay hex appear animations from child number*/
.hex-obj:nth-child(2){
    transition-delay: 50ms;
}

.hex-obj:nth-child(3){
    transition-delay: 100ms;
}

.hex-obj:nth-child(4){
    transition-delay: 150ms;
}

.hex-obj:nth-child(5){
    transition-delay: 200ms;
}

.hex-obj:nth-child(6){
    transition-delay: 250ms;
}

.hex-obj:nth-child(7){
    transition-delay: 300ms;
}

.hex-obj:nth-child(8){
    transition-delay: 350ms;
}

.hex-obj:nth-child(9){
    transition-delay: 400ms;
}

/*hexagon hover and focus state*/
.hex-obj:hover, .hex-obj:active{
    transform: scale(1.125);
    filter: invert(100);
    z-index: 99;
    transition-delay: 0ms;
    transition-duration: 100ms;
}

/*hexagonal game thumbnail*/
.autofit-hex-img {
    position: fixed;
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547);
    margin: 0;
    padding: 0;
}

.links {
    background: linear-gradient(90deg, rgba(0,0,54,1) 0%, rgba(0,0,11,1) 100%);
    padding-bottom: min(90px, 8vw);
    padding-top: min(50px, 4vw);
    border-radius: 80px;
}

/*tag that marks elements for the fade-in and slide animations. Elements MUST have this class to have any of these animation effects apply.*/
.anim-hidden {
    opacity: 0;
    filter: blur(10px);
    filter: drop-shadow(0px 0px 10px #65F9AC);
    transition: all 1s;
}

/*transform info for having elements slide in to the right*/
.anim-slide-right {
    transform: translateX(-10%);
}

/*transform info for having elements slide in to the left*/
.anim-slide-left {
    transform: translateX(10%);
}

/*transform info for having elements slide down*/
.anim-slide-down {
    transform: translateY(-10%);
}

/*transform info for having elements slide up*/
.anim-slide-up {
    transform: translateY(10%);
}

.anim-slide-up-left {
    transform: translateX(10%) translateY(10%);
}

.anim-slide-up-right {
    transform: translateX(-10%) translateY(10%);
}

.anim-slide-down-left {
    transform: translateX(10%) translateY(-10%);
}

.anim-slide-down-right {
    transform: translateX(-10%) translateY(-10%);
}

.anim-scale-up {
    transform: scale(.5);
}

.anim-scale-down {
    transform: scale(1.5);
}

/*final show state after animations are complete; makes things opaque, 0% translation, and 0% blur*/
.anim-show {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0%) translateY(0%);
    filter: drop-shadow(0px 0px 100px #ffffff00);
}

/*add delays to slide-in if they're in the headset list in the Info section*/
.img-delay:nth-child(2) {
    transition-delay: 100ms;
}

.img-delay:nth-child(3) {
    transition-delay: 250ms;
}

.img-delay:nth-child(4) {
    transition-delay: 350ms;
}

.img-delay:nth-child(5) {
    transition-delay: 500ms;
}

.img-delay:nth-child(6) {
    transition-delay: 600ms;
}

.img-delay:nth-child(7) {
    transition-delay: 800ms;
}

.img-delay:nth-child(8) {
    transition-delay: 100ms;
}

/*paragraph style*/
p {
    font-size: 12pt;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.199);
    line-height: 150%;
}

/*padding for paragraphs and text chunks*/
.par-padding {
    padding-top: 20px;
    padding-bottom: 40px;
}

/*padding for headers*/
.header-padding {
    padding-top: 150px;
    padding-bottom: 40px;
}

/*center alignment for text*/
.center-align {
    text-align: center;
}

/*applies to whole page*/
body {
    background: rgb(0,0,54);
    background: linear-gradient(90deg, rgba(0,0,11,1) 0%, rgba(0,0,54,1) 100%);
    overflow-x: hidden;
    overflow-y: auto
    margin: 0;
}

/*set minimum font sizes, grid columns, and object sizes based on screen width or no cursor*/
@media (pointer:none), (pointer:coarse), screen and (max-width: 1250px) {

    .justify-container {
        display: grid;
        justify-content: center;
        justify-items: center;
    }

    p {
        font-size: 1.5vw;
    }

    .width-clamp {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }

    .hex-grid {
        display:flex;
        align-content: center;
        justify-content: center;
        --s: calc(74vw/6);  /* size (take the size of the container, divide by desired maximum row length, subtract gaps) */
        --m: 0.5vw;    /* margin */
        --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
    }

}

/*set animations to off if settings are enabled*/
@media (prefers-reduced-motion) {
    
    .anim-hidden {
        transition: none;
    }
  }