a{
    all: unset;
    cursor: pointer;
    display: block;
}
.site-header{
    background-color: #333;
    background-image: url('imgs/Wolf_header.png');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
}

.div-header{
    position: absolute;
    top: 463px;
    background-image: linear-gradient(to left, rgba(14,21,27,.99), transparent); /*#333*/
    width: 100%;
    height: 130px;
}
.div-header-base{
    width: 100%;
    height:13px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(46,53,29,0.2), transparent 50%),
        radial-gradient(circle at bottom right, rgba(1, 8, 2, 0.9), transparent 90%),
        radial-gradient(circle at center, rgba(152,152,139, 0.9), transparent 50%),
        #000;
}
.full-span-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header-text{
    position: absolute;
    font-family: "Audiowide", sans-serif;
    /*font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;*/
    font-weight: 500; /* 100 to 900*/
    font-style: normal;
    font-size:64px;
/*    font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "CTRS" 0;*/
    top: 23px;/*33px;*/
    right: 36px;
    color: rgba(255, 255, 245, .99);
    text-shadow: 0 0 13px rgba(112,213,255,.99);
}

/* ani section */
#scroll-container {
    position: relative;
    top: 0px;
    height: 800vh;
}
.video-wrapper {
    position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

video {
    width:100%;
    height:100%;
    object-fit: cover;
}
 .scroll-section{ /*for text that can display on top of video, pulled underneath by -100vh*/
    position: sticky; /*relative*/
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    margin-top:-100vh;

 }
.hero-text{
    position: absolute;
    font-family: "Audiowide", sans-serif;
    /*font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;*/
    font-weight: 500; /* 100 to 900*/
    font-style: normal;
    font-size:64px;
    letter-spacing: 32px;
/*    font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "CTRS" 0;*/
    text-align: center;
    color: rgba(255, 255, 245, .99);
    opacity: 0.0;
}
.gaia-text{
    position: absolute;
    width: 33%;
    font-family: "Audiowide", sans-serif;
    font-weight: 300; /* 100 to 900*/
    font-style: normal;
    font-size:36px;
    line-height:2.0;
    letter-spacing:13px;
    text-align: center;
    color: rgba(255, 255, 245, .99);
    opacity: 0.0;
    text-shadow: 3px 3px 5px rgba(237, 165, 88,0.99);
}
.div-hero-base{
    width: 100%;
    height:13px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(237,165,88,0.2), transparent 50%),
        radial-gradient(circle at bottom right, rgba(237, 165, 88, 0.8), transparent 30%),
        radial-gradient(circle at center, rgba(134,141,160, 0.5), transparent 50%),
        #000;
}
.div-bio-bak{
    background-color: rgba(134,141,160,.99);
    background-image: url('imgs/ice_planet.png');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}
.section-bio{
    display:flex;
    background-image: linear-gradient(to top, rgba(134,141,160,.99), rgba(134,141,160,.66));
    width: 100%;
    height:700px;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 16px 9px -13px rgba(14,21,27,.99);
}
.art-picholder{
    box-sizing: border-box;
    display:flex;
    width: 70%;
    height:100%;
    padding:5%;

    justify-content: center;
    align-items:center;
    background-image: radial-gradient(circle at center, rgba(14,21,27,.96), transparent);
}
.bio-image{
    float: left;
    height: 90%;
    border-radius: 50%;
    filter: drop-shadow(5px 5px 13px rgba(14,21,27,.99));
}
.div-bio-text{
    margin-left: 26px;
    float:right;
}
.div-bio-name{
    float: top;
    font-size: 48px;
    padding: 32px;
    color: rgba(14,21,27,.99);
    text-shadow: 2px 2px 3px rgba(194,213,228,0.6);
    /*background-color: rgba(164, 185, 201, 0.5);*/
    background-color: rgba(227,224,222,.27);
    font-family: "Audiowide", sans-serif;
    font-weight: 700;
    border-radius:30%;
    text-align: center;
    filter: drop-shadow(5px 5px 13px rgba(14,21,27,.9));
}
.div-bio-link{
    margin-top:28px;
    float: bottom;
    width:66%;
    font-family: 'Verdana';
    font-weight: bold;
    font-size: 38px;
    text-shadow: 2px 2px 3px rgba(194,213,228,0.6);
    padding: 32px;
    color: rgba(194,213,228,.79);
    background-color: rgba(1,1,1,0.60);/* rgba(49, 13, 13, 0.33);*/
    border-radius:30%;
    text-align:center;
    filter: drop-shadow(5px 5px 13px rgba(14,21,27,.9));
}
.div-bio-base{
    width: 100%;
    height:13px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(194,213,228,0.3), transparent 50%),
        radial-gradient(circle at bottom right, rgba(194, 213, 228, 0.3), transparent 30%),
        radial-gradient(circle at center, rgba(134,141,160, 0.5), transparent 50%),
        #000;
    box-shadow: 0 -1px 7px 3px rgba(14,21,27,.86);
}
.div-proj-bak{
    /*background-color: rgba(134,141,160,.99);*/
    background-image: url('imgs/ice_planet_rev.jpg');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}
.section-proj{
    display:flex;
    background-image: linear-gradient(to bottom, rgba(14,21,27,.7), rgba(0,0,0,.9));/*rgba(194,213,228,.3), rgba(0,0,0,.9));*/
    width: 100%;
    height:700px;
    justify-content: center;
    align-items: center;
    color: #fff;
    /*box-shadow: inset 0 13px 13px -13px rgba(194,213,228,.99);*/
}
.div-proj-grid{
    width: 90%;
    height: 85%;
    display:grid;
    grid-template-columns: auto auto auto;
    place-items: center;
    align-items:start;
}
.div-proj-cell{
    width: 80%;
    margin-top: 10%;
    /*height: 90%;*/
    /*border-radius: 30%;*/
}
.proj-image{
    width:90%;
    border-radius: 30%;
    filter: drop-shadow(9px 5px 13px rgba(194,213,228,.99));
}
.div-proj-h{
    margin-top: 42px;
    font-size:42px;
    font-family: "Audiowide", sans-serif;
}
.div-proj-text{
    box-shadow: inset 0 3px 3px -3px rgba(194,213,228,.99);
    margin-top:23px;
    padding-top:8px;
    font-size:24px;
    font-family: 'Verdana';

}
.div-footer-top{
    width: 100%;
    height:13px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(35,53,54,0.9), transparent 50%),
        radial-gradient(circle at bottom right, rgba(32,49,69, 0.9), transparent 30%),
        radial-gradient(circle at center, rgba(246, 251, 249, 0.9), transparent 50%),
        #000;
}
.site-footer{
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #000;
    background-image: url('imgs/Night_footer.png');
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
}

.div-footer{
    width: 90%;
    height: 500px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    place-items: center;
    gap:5px;
}
.div-footer-index{
    width: 100%;
}
.footer-image{
    float: top;
    /*width: 90%;*/
    height: 200px;
    border-radius: 50%;
    filter: drop-shadow(5px 5px 13px rgba(14,21,27,.9));
}
.div-footer-text-index{
    margin-top: 9px;
    font-size: 32px;
    font-family: "Audiowide", sans-serif;
    font-weight: 700;
    float:bottom;
    width:66%;
    color: #fff;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.9);
}
.div-footer-column{
    /*display: flex;
    justify-content: center;*/
    /*align-items: center;*/
    width: 360px;
    height: 90%;
    box-sizing:border-box;
    padding-top: 32px;
    padding-left: 48px;
    background-color: rgba(35,53,54,0.4);
    font-size:26px;
    font-family: 'Verdana';
    color: #fff;
}