:root
{
    box-sizing:border-box;
    --glowColor1:rgba(50, 52, 119, 0);
    --glowColor2:rgb(62, 132, 212);
    --glowColor3:rgba(255, 255, 255,1);

    user-select:none;

    overflow-x:hidden;
    overflow-y:hidden;
    padding:0;
    margin:0;

}

#container
{
    box-sizing:border-box;
    
    height:100%;
}

#headerArea
{
    box-sizing:border-box;
    height:25vh;
    width:100%;
}

#headerArea #contactInfoBox
{
    position:absolute;
    top:0;
    right:0;

    padding-top:20px;
    padding-bottom:20px;
    padding-right:92px;
    background-color:black;

    text-align:right;
    font-size:25px;
    white-space:nowrap;
    display:none;
}

@keyframes slideLeft
{
    0%{width:0;}
    100%{width:100%;}
}

#headerArea #contactInfoBox #contactInfoBoxBox
{
    border-bottom-color:white;
    border-bottom-style:solid;

    animation-name:slideInBorderRightWithWhiteBar;
    animation-delay:2.1s;
    animation-duration:6s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:both;
}

@keyframes slideInBorderRightWithWhiteBar
{
    0%
    {
        transform-origin:left;
        transform:scaleX(0);
    }
    15%
    {
        transform:scaleX(1); /* 15% of 6 seconds is 0.9s*/
    }
    80%
    {
        transform:scaleX(1);
        border-bottom-color:white;
        border-bottom-style:solid;
    }
    100%
    {
        border-bottom-color:transparent;
    
    }
}


@keyframes fadeTopBannerOut
{
    0%
    {
        color:white;
        background-color:black;
        border-bottom-color:white;
        border-bottom-style:solid;
    }


    100%
    {
        color:black;
        background-color:transparent;
        border-bottom-color:none;
        border-bottom-style:none;
    }
}

#headerArea #contactInfoBox a
{
    user-select:text;
    text-decoration:none;
    color:white;
}

#headerArea #contactInfoBox a:hover
{
    animation-name:glowText;
    animation-duration:2s;
    animation-delay:0s;
    animation-timing-function:ease;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
}

#centerContentArea
{
    box-sizing:border-box;
    height:50vh;
    width:100%;
    padding-left: 92px;
    padding-right: 92px;
    /*border:red dotted 3px; /**/
    z-index:1;
}

#subCenterContentArea
{


    box-sizing:border-box;
    /*border: green solid 5px;*/
    background-color:none;
    height:50vh;
}

#logo
{
    margin-top:-42px;
    margin-left: 0;
    margin-right:96px;
    height:600px;

    animation-name:slideRight;
    animation-delay:0;
    animation-duration:1s;
    animation-timing-function:ease;
}


@keyframes slideRight
{
    0%
    {
        opacity:0;
        transform: translateX(-50px);
    }
    
    100%
    {
        opacity:1;
        transform: translateX(0px);
    }
}



#logo img
{
    height:100%;
}
           
#personPhoto
{
 height:40vh;

 position:absolute;
 top:31vh;
 left:1175px;
}

#personPhoto img
{
    height:100%;

    animation-name:fadeIn;
    animation-duration:0.5s;
    animation-delay:0s;
    animation-timing-function:ease;

}

@keyframes fadeIn
{
    0%{opacity:0;}
    100%{opacity:1;}
}

#contactBoxArea
{
    box-sizing:border-box;
    position:absolute;
    top:33vh;
    left: 1450px;

    background-color:black;
    border-radius:20px;
    height:360px;
    width:360px;
    padding:20px;
    padding-top:50px;

    color:white;
    font-family:'Times New Roman', Times, serif;
    font-size: 4em;
    line-height:40px;
    text-align:center;

    user-select:none;
  

    animation-name:spinTransitionEntrance, glowText;
    animation-duration:2s, 2s;
    animation-delay:1s, 2.5s;
    animation-timing-function: ease-out, ease;
    animation-iteration-count:1, infinite;
    animation-fill-mode:backwards, forwards;
}

@keyframes spinTransitionEntrance
{
    0%
    {
        opacity:0;
        transform:rotateX(90deg) scale(0,0) translateX(200%);
    }

    10%
    {
        opacity:0;
    }
    50%
    {
        transform:rotateX(180deg);
    }

    100%
    {
        transform:rotateX(720deg) scale(1,1) translateX(0%);
        opacity:1;
        color:white;
    }
}





#contactBoxArea:hover
{
    animation-name:flashContent, spinTransitionEntrance;
    animation-delay:0s, 2s;
    animation-duration:2s, 0s;
    animation-timing-function:ease, ease;
    animation-iteration-count: infinite, 0;
    animation-fill-mode:backwards, backwards;
    cursor:pointer;
    border:none;
}


@keyframes flashContent
{
    0%{
        /* box-shadow:  20px 20px 40px 40px var(--glowColor1),  20px 20px 40px 40px var(--glowColor1); */
        background-color:black;
        color:white;
        text-shadow:none;
        
    }
    50%{
        /* box-shadow:  20px 20px 60px 40px var(--glowColor3),  20px 20px 60px 40px var(--glowColor2); */
  
        text-shadow: 0 0 20px white, 0 0 20px white;
    }
    100%{
        /* box-shadow:  20px 20px 40px 40px var(--glowColor1),  20px 20px 40px 10px var(--glowColor1); */
        background-color:black;
        color:white;
        text-shadow:none;
    
    }
}

@keyframes glowText
{
    0%
    {
        text-shadow:none;
    }
    50%
    {
        text-shadow: 0 0 4px lightgrey, 0 0 7px white;
    }
    100%
    {
        text-shadow:none;
    }
}

#blueWavyLine
{
    position:relative;
    bottom:45%;
    z-index:-1;
    opacity:0;
    
    height:250px;

    animation-play-state:running;

    animation-name:cyclingAnimation;
    animation-delay:2.5s;
    animation-duration:180s;
    animation-timing-function:ease;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
}

@keyframes cyclingAnimation
{
    0%
    {
        opacity:0; 
        transform:translateX(-80%);
        
    }

    5%
    {
        opacity:1;
    }

    95%
    {
        opacity:1;
    }
    100%
    {
        transform:translateX(0%);
        opacity:0;
    }
}




#footerArea
{
    box-sizing:border-box;
    /*border: goldenrod dotted 4px; /**/
    height:25vh;
    width:100%;
}