/* IMPORT RESOURCES */

@font-face {
    font-family: 'braile'; /*a name to be used later*/
    src: url("fonts/braile.ttf"); /*URL to font*/
}

@font-face {
    font-family: 'carlito'; /*a name to be used later*/
    src: url("fonts/Carlito-Regular.ttf"); /*URL to font*/
}

/* HOME BG IMAGE & OTHER MISC FORMATTING */

body{ /* remove any default margins from elts added, add background */
    margin:0;
    background-color: black;
}

#bgvideo{
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%; 
    min-height: 100%;
    z-index:-999;
    pointer-events: none;
}

#bgfallback{
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%; 
    min-height: 100%;
    z-index:-999;
    pointer-events: none;
}

.groupicon{
    z-index: 0;
}

a { /*remove underline from urls*/
    text-decoration: none;
    color: inherit;
}

.pinkstreaks{
    user-select: none;
    pointer-events: none;

}

.bluestreaks{
    user-select: none;
}

/* TOP NAV BAR */
#navblock{
    position: sticky;
    width: 100%;
    height: 4rem;
    background-color: black;
    z-index: 2;
}

.navLinks{
    font-family: "carlito";
}

#navaccent{
     width: 100%;
     height: .4em;
     background-color: #71F4FF;
     position:absolute;
     z-index: 2;
     top: 3.2em;
     z-index: 3;
}

#navtext{
    font-size: 35px;
    color:white;
    font-family: "carlito";
    letter-spacing: .02em;
    padding-left: 1%;
    padding-right:1%;
    z-index: 4;
}

.navLinks{
    font-family: "carlito";
}

#homepagebutton{
    float: left;
    padding-left: 1%;
    padding-right:1%;
    padding-top: .1em;
    text-decoration: underline;
    z-index: 6;
}

@media only screen and (min-width: 771px) {
    #navgrouped{
        visibility: visible;
        right:.2em;
        position: absolute;
        padding-left: 1%;
        padding-right:1%;
        padding-top: .1em;
        a{
            text-decoration: underline;
            padding:.5em;
        };
        z-index: 6;
    }
    #hamburgermenu{
        visibility: hidden;
        display: inline-block;
    }

    #hamburgerLinksHolder{
        visibility: hidden;
        display: inline-block;
    }

    .hamburgercontained{
        visibility: hidden;
    }

}

#hamburgermenu{
     position:absolute;
        top:.5rem;
        right:.5rem;
        width: 2rem;
}

/* hamburgerify */
@media only screen and (max-width: 770px) {
    #navgrouped{
        visibility: hidden;
    }
    #hamburgermenu{
        visibility: visible;
    }

    #hamburgerLinksHolder{
        visibility: hidden;
        display:flex;
        flex-direction: column;
        width: 8rem;
        height:10rem;
        position: absolute;
        top: 4rem;
        right:0rem;
        padding-right:.7rem;
        background-color: black;
    }

    .hamburgercontained{
        color:white;
        width:100%;
        font-size: 2rem;
        text-decoration: underline;
        padding-top: .6rem;
        text-align: right;
    }

}

/* BRAILE DECO */
.brailedeco{ /*h2 corresponds to the braile on the index page*/
    font-family: "braile";
    color: #C52C62;
    paint-order: stroke fill;
    -webkit-text-stroke: .5rem #71F4FF;
    font-size: clamp(0rem, 10vw, 5rem);
    letter-spacing: .15em;
    line-height: 90%;
    user-select: none;
    font-weight:lighter;
    z-index: -5;
    display: inline-block;
    vertical-align: bottom;
    clear:both;
    
    margin:0;
}

#braile1{
    position:absolute;
    text-align: right;
    top: 5rem;
    right:3.5%;
    height: 5%;
    aspect-ratio:4/1;
}

#braile2{
    left:.1em;
    text-align: left;
    position:absolute;
    bottom:2%;
    width:3rem;
    aspect-ratio: 380/144;
}

#bottombrailetext{
    position:absolute;
    bottom:2%;
}

/* "RAINBO IS A" BLOCK */

#rainbotextbackground{
    background-color: black;
    height:clamp(10rem, 40%, 18rem);
    width:clamp(0rem, 55%, 20em);
    aspect-ratio: 320/288;
    position:absolute;
    left:4.5%;
    top: 5rem;
    z-index: -1;
}

#rainbohomepagetext{
    font-family: 'Times New Roman', Times, serif;
    text-decoration: underline;
    color:white;
    font-size:3.5em;
    font-weight: bold;
    margin-right:.3em;

    position:relative;
    left:.2em;
    top:.1em;
}

#rainboisa-textcontainer{
    position:relative;
     width:100%;
     height:50%;
}


@media screen and (max-width:500px){
    #isahomepagetext{
    font-family: "carlito";
    color:white;
    font-size:2.5rem;
    vertical-align: bottom;
    position:absolute;
    left:5%;
    top:3.8rem;
    }  

    #skillslist{
    font-family: 'Times New Roman', Times, serif;
    color:white;
    font-style: italic;
    text-align: right;
    font-size:clamp(1.7rem,5.5vw,2.4rem);;
    line-height: 90%;
    position: absolute;
    right:5%;
    top: clamp(4rem, 16vh,6.5rem);
    margin:0;
}

#pinkstreaks2{
    position:absolute;
    width:2.5em;
    height:100%;
    right:-2.8em;
    bottom:1em;
}
}

@media screen and (min-width:501px){
  #isahomepagetext{
    font-family: "carlito";
    color:white;
    font-size: 3.2rem;
    vertical-align: bottom;
    position:absolute;
    padding-left:7%;
    top:.6rem;
    }  

    #skillslist{
        font-family: 'Times New Roman', Times, serif;
        color:white;
        font-style: italic;
        text-align: right;
        font-size:clamp(1.2rem,5.5vh,2.8rem);;
        line-height: 90%;
        position: absolute;
        right:5%;
        top: clamp(4rem, 16vh,6.5rem);
        margin:0;
    }

    #pinkstreaks2{
    position:absolute;
    width:3em;
    height:100%;
    right:-3.3em;
    bottom:1em;
    }
}

#pinkstreaks1{
    position:absolute;
    width:3em;
    height:100%;
    right:-3.3em;
    bottom:1em;
}

#bluestreak1{
    position:absolute;
    background-color: #71F4FF;
    height:.6em;
    width:90%;
    bottom:-.6em;
    left:-1em;
}

/* CLICKABLE GROUPS ICONS */

@media screen and (max-height:500px){
    #groupsbackground{
    background-color: black;
    width: clamp(0rem, 50%, 36em);
    aspect-ratio: 576/132;
    float:right;
    position:relative;
    right:10%;
    top:50%;
    }
}

@media screen and (min-height:501px){
#groupsbackground{
    background-color: black;
    width: clamp(0rem, 80%, 36em);
    aspect-ratio: 576/132;
    float:right;
    position:relative;
    right:12%;
    top:55vh;
}
}



#bluestreak2{
    position:absolute;
    background-color: #71F4FF;
    height:.6em;
    width:80%;
    bottom:-.6em;
    left:-1em;
}

#grouplogosholder{
    display: flex;
    a{
        z-index:100;
        padding-top:.2em;
        padding-left: .5em;
        padding-right: .5em;
        width:8em;
        img{
            z-index:100;
            width:100%;
        }
    }
    
}