/* style_index.css */

#indexbg{
    background-image: url('../assets/img/index/indexbg.gif');
    background-size: 100vw;
}

#indexbgfilter{
    background-color: black;
    opacity: 0.6;
}

.indexgrid{
    display: grid;
    grid-template-columns: 1fr 70vw 1fr;
    grid-template-rows: minmax(160px, 1fr) auto 1fr;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

#indexarea{
    grid-area: 2 / 2 / 3 / 3;
    width: 100%;
    height: 100%;
    

}

.indextextbox{
    position: relative;
    background-color: #1e0f1dde;;
    border-image-source: url('../assets/img/global/border2d.png');
    border-image-repeat: round;
    border-image-slice: 183;
    border-image-width: 10vw;
    border-image-outset: 2.5vw;
    
}

@media screen and (max-width: 900px) {
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
    #indexbg{
        background-size: cover;
        background-position: center;
    }
}

@media screen and (min-width: 901px) {
    .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }
}

#mobiletext{
    width: 100%;
    height: 100%; 
    font-size: 3.5em;
    color: #E3C1A0;
}

#titlecontainer{
    font-family: 'pixelary';
    font-size: 21.5vw;
    color: #f5fbff;
    width: 100vw;

}

#titlecontainermobile{
    position: fixed;
    font-family: 'pixelary';
    font-size: 21.5vw;
    color: #f5fbff;
    width: 100vw;

}

#titleindex{
    position: absolute;
    text-shadow: #585c56 10px 1px 2px;
    
}



#square{
    position: absolute;
    width: 10vw;
    height: 10vw;
    background: #40EB1A;
    background: radial-gradient(circle, rgba(64, 235, 26, 1) 10%, rgba(0, 0, 0, 1) 110%);
    left: 58vw;
    top: 26vw;
    color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 4vw;

}

#square:hover{
    box-shadow: rgb(64, 235, 26, 0.56) 0px 0px 36px 20px;
    color: #f5fbff;

}

#desktoptextbox{
    position: absolute;
    font-size: 1.5vw;
    line-height: 1.05;
    font-family: 'merchantcopy';
    top: 15vw;
    left: 10vw;
    color: #E3C1A0;
    background-color: #553c53c1;
    border-image-source: url('../assets/img/global/border2d.png');
    border-image-repeat: round;
    border-image-slice: 100;
    border-image-width: 3vw;
    border-image-outset: 1.5vw;

    width: 20vw;
    padding: 2vw;
    transform:  skew(170deg, 0deg);
}

#desktopdisclaimer{
    position: fixed;
    background-color: #d7dfd3ce ;
    font-family:'coralpixels';
    font-size: 1vw;
    width: 76.8vw;
    bottom: 1vw;
    left: 0.6vw;
    border: 0.2vw dotted;
    border-color: #73396f;
    animation: disclaimeranim 15s ease-in-out infinite;
}
@keyframes disclaimeranim{
    0% {left: 0.6vw; }
    50% {left: 22vw;}
    100% {left: 0.6vw; }
}

.minitext{
    font-family:'merchantcopy';
    position:absolute;
    border: 0.2vw dotted;
    border-color: #73396f;
    padding: 0.2vw;
}

#blogpromo{
    font-size: 1.1vw;
    background-color: #0a0a0ab0;
    top: 37vw;
    left: 5vw;
    width: 6vw;
    color: #40eb1abe
}

#researchpromo{
    font-size: 1.1vw;
    background-color: #0a0a0ab0;
    top: 41vw;
    left: 10.5vw;
    width: 8vw;
    color: #40eb1a8d
}

#collabpromo{
    font-size: 1.1vw;
    background-color: #0a0a0ab0;
    top: 44.8vw;
    left: 6vw;
    width: 25vw;
    color: #40eb1abe
}

#mousedeco{
    position: absolute;
    width: 11vw;
    left: 29vw;
    top: 20vw;
    pointer-events: none;
    filter: brightness(0.9);
    animation: mousedecoanim 5s ease-in-out infinite;
}

@keyframes mousedecoanim{
    0% { transform: rotate(5deg) ; 
        transform-origin: bottom;}
    50% { transform: rotate(29deg);
          transform-origin: bottom;}
    100% { transform: rotate(5deg);
        transform-origin: bottom;}
}

#tabdeco{
    position: absolute;
    width: 70vw;
    height: 47vw;
    left: 30vw;
    top: 8.5vw;
    opacity: 0.5;
}

#borderdeco{
    position: absolute;
    width: 50vw;
    height: 58vw;
    top: -0.5vw;
    left: -3.5vw;
    opacity: 0.8;

}

#borderdeco2{
    position: absolute;
    width: 40vw;
    top: 13vw;
    left: 50vw;
}