:root{
    --clr-primary: #fa4503;
    --clr-raisin: hsl(300, 6%, 20%);
    --clr-off-black: hsl(0, 0%, 90%);
    --clr-background: hsl(0, 0%, 0%);
    --clr-violet:#44355b;
    --orange: #fa4503;
    --rose: #ad5e6f;
    --yellow: #eca72c;
    --cobalt:#8703fa;
    --aqua:#03eafa;
    --plum: #87578b;
    --light-green: rgb(201, 233, 201);
    --blueish: #5e81ad;
    --header: #adacb5;/*#5a5a5a; */
    --clr-deep-purple: #31263e;

    --ball-Y: -webkit-calc(25% + 190px);
}
html{
    font-family: "Manrope", "serif";
    font-size: 2.2em;
    
}
body{  
      
    margin:0;
    /* background-color:#2d3142; */
    background-color: var(--clr-off-black);
    display: flex;
    flex-direction: column;
    
}
.smallText{
    font-size:.5rem;
}
.spacer{
    width: 100%;
    height: 2em;
    background-color: var(--plum)
    /* background-image: linear-gradient(var(--plum), rgb(83, 0, 83)); */
}
header{
    transform:translateY(-100%);
    
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    flex-grow: 1;
    background-color:#1a1a1a;
    /* background-image: linear-gradient(var(--light-green), white); */
    /* background-image: linear-gradient(var(--plum), rgb(83, 0, 83)); */
    height: clamp(55px, 10vw, 85px);
    justify-content:space-between;
    /* align-items: center; */
    padding-top:3px;
    color:var(--header);
    /* gap: 30%; */
    animation: introC 500ms 100ms forwards;
    /* transform: scale(0);
    animation: introFade 1500ms forwards; */
   
}
/* header section{
    height:50px;
} */

#header-left{
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    width: max(200px,85%);
    align-items:center;
    height: 100%;
}
#hamburger{
    margin:5px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    width:30px;
    height:auto;
    align-items: center;
    position: relative;
    
    font-size:.5rem;
    
    gap:5px;
    
    
}
.navBar{
    display:flex;
    
   height:3px;
   width:30px;
    

    border-radius: 3px;
    background-color: white;
    
    /* padding: 0 10px 0 10px; */
    cursor: pointer;
    
}
#headerContent{
    /* padding-left:1em; */
    /* margin:5px; */
    margin-left: 25px;
    display:flex;
    flex-direction: column;
    /* justify-content: center; */
    opacity:1;
    animation: introFade 400ms linear 5400ms forwards;    
       
        
  
   
}

.title {
    display:flex;
    font-family: "Quicksand" , serif;
    font-size:.65em;
    justify-content: right;
    width:100%;
    margin-top: -17px;
    color: var(--raisin);
    /* border-top: 1px solid var(--orange);*/
     
    padding-right: 20px;
}
#socialLinks{   
    display:flex; 
    
    height:50px;
    width:clamp(150px,50%,50vw);/*min(200px,80%);*/
    justify-content: left;
    align-items: center;
    padding: 3px;    
    font-size: 20px;  
    
    gap:1em
}
#socialLinks a{
    text-decoration: none;
    color:white;
    font-size: clamp(1em, 5vw, 1.7em);
}
@keyframes fadeOut {
    90%{opacity:1;}
    100%{opacity:0;}
}
@keyframes introFade{
   /* 95%{transform:scale(0);} */
    100%{opacity:1;}
}
@keyframes introB {
    11%{opacity:1;}
    100% { opacity:1;}
}
@keyframes introC {
    
        100% {transform:translateY(0%)}
  
}
@keyframes wobble {
    
}
@keyframes blinks {
    30%{height:0;}
    100%{height:3px;}
}
@keyframes flipLogo {
    95%{z-index:6;}
    99.99%{opacity:1;}
    100%{
        top: -7px;
        left:20px;
        transform:rotate(-320deg);
        opacity:0;
    }
}
@keyframes logo-fade-out {
    /* 80%{opacity: 1;} */
    100%{opacity:0;}
}
@keyframes showPage {
    /* 50%{opacity:0;} */
    100%{opacity:1;
    transform: translateY(65%)}
}
@keyframes bounce {
	0% {top: -7px;/*-7,20%*/
        left:20px;/*20px,-100px*/
        
		-webkit-animation-timing-function: ease-in;
	}
    
	30% {top: 50%;
		transform:rotate(-20deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {top: 30%; 
		-webkit-animation-timing-function: ease-in;}
	65% {top: 50%; 
		-webkit-animation-timing-function: ease-out;}
	75% {
		top: 40%;		
		-webkit-animation-timing-function: ease-in;
	}
    83% {
		top: 50%;		
		-webkit-animation-timing-function: ease-out;
	}
    92% {
		top: 45%;		
		-webkit-animation-timing-function: ease-in;
	}
    /* 96% {
		top: 50%;		
		-webkit-animation-timing-function: ease-out;
	}
    97% {
		top: 48%;		
		-webkit-animation-timing-function: ease-in;
	} */
	100% {top: 50.5%;
        left:25%;
        transform:rotate(340deg);
        /* border-width: 5em; */
		-webkit-animation-timing-function: ease-out;
	}
}

main{
    opacity: 1;
    display:flex;
    
    flex-direction:column;
    /* /* justify-content: center; */
    align-items: center; 
    border-radius: 7px;;
    /* height:auto; */
    /* animation: showPage 1000ms linear 3200ms forwards; */
    
    
   
}
.fa::before{
    font-size:clamp(.75rem,3vw,1rem);/*.8rem;*/
}
.headline{
    font-size: .6rem
}
#main-pic{
    display: flex;
    /* position: relative; */
    /* aspect-ratio: 20/10; */
    color:black;
    justify-content: center;
    align-items: center;
    
    width:100%;
    /* height: 50px; */
    height: clamp(20vw,30vw,40vw);
    background-color: var(--clr-off-black);
    /* background-image: linear-gradient(var(--clr-deep-purple), #44355b); */
     
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 2px 2px 1px var(--header);
    opacity: 0;
    /* transform: translateY(-100%); */
    animation: introFade 500ms linear 100ms forwards;
}
.speechBubble{
    
    display:flex;
    flex-direction: column;
    /* justify-content: space-around; */
    flex-grow:1;
    flex-shrink:1;
    /* align-items: left; */
    /* width:100px;
    height:100px; */
    margin-left:75px;
    margin-top:20px;
    gap:10px;
}

.firstTrail{
    
    width:15px;
    height: 10px;
    
    
    
}
.secondTrail{    
    width:30px;
    height: 20px;    
    margin-left:10px;
}
.words{
    padding: 10px;
    margin-left: 30px;
    width: clamp(10vw,200px,500px);
    height:auto;
   
}
.bubble{
    display:flex;
    background-color:whitesmoke;
    border-radius: 10px;
    
    box-shadow: 0px 1px 5px 1px var(--header);
    
    
}
#floating-banner{
    display:flex;
    flex-direction:column;
    aspect-ratio: 3/1;
    width: clamp(200px, 75%, 500px);
    padding:10px;
    /* height: 10em; */
    font-size: .5rem;
    box-shadow: 0px 0px 5px 1px var(--header);
    /* margin-top: -5em; */
    background-color: white;
    border-radius: 10px;;
}
#banner-section{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: min(15px);
    justify-content:space-around;
    width:100%;
    height:32vw;
    background-image: url("../img/audience.png");  
    background-repeat: no-repeat;
    background-size: contain;
}
.upright-banner{

    display: flex;
    aspect-ratio: 16/9;
    margin-top: 20px;
    width:clamp(220px, 27%, 350px);
    flex-wrap: wrap;
    border:7px solid white;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 1px var(--header);
    background-color: #E5E4E2;
}
.yellow{
    /* background-color: var(--yellow); */
    background-color:#5fb54c;
}
.primary{
    background-color: var(--orange);
}
.cobalt{
    background-color: var(--cobalt);
}
.raisin{
    background-color: var(--clr-raisin);
    
}

#banner1{
    
    background-image:url("workflow_app.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: var(--clr-violet); */
}

.balloon{
    animation: balloon 1000ms ease-in forwards;
}
@keyframes balloon {
    100%{width:100vw;}
}
@keyframes retract {
    
}
/* elements for splash animation */
#logo{
    position:fixed;
    top:-200px;
    left:50%px;
    display: flex;
    justify-content: center;
    align-items: center;
    width:auto;
    aspect-ratio: 1/1;
    color: var(--orange);
    font-size: 1.5em;
    font-weight:500;
    
    /* border: 2px solid; */
    padding: 20px;
    border-radius: 10px;
    /* transform:rotate(-20deg); */
    animation: 
    bounce 2s 500ms linear 1 forwards,
    flipLogo 400ms linear 2600ms 1 forwards,
    logo-fade-out 200ms linear 3000ms 1 forwards;
    /* animation: introC 3000ms forwards; */
}
#flipper{
    display:flex;
    position:fixed;
    top:50%;
    left:-webkit-calc(25% + 50px);
    width:200px;
    height:100px;
    
    animation: fadeMachine 500ms linear 3200ms forwards;
    
}
@keyframes fadeMachine {
    100%{opacity:0;}
}
#fulcrum{
    display:flex;
    position:absolute;
    top:50%;
    left:60px;
    aspect-ratio: 1/1.5;
    width: 100px;
    fill: var(--header);
    stroke: var(--header);
    stroke-width: 10;
    /* background-image:
    linear-gradient(to bottom right, transparent 50%, red 0),
    linear-gradient(to top right, red 50%, transparent 0);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
  transform: scale(.9999); */
  

}
#lever{
    position:absolute;
    top:50px;
    left:0;
    aspect-ratio: 50/1;
    width: 200px;
    background-color:var(--header);
    /* border: 2px solid var(--rose); */
    box-shadow: 0px 1px 2px 1px #1a1a1a;
    border-radius: 2px;
    transform: rotate(-30deg);
    animation: lever 200ms linear 2600ms 1 forwards;
}
#force{
    position:fixed;
    z-index: 5;
    top:-100px;
    left: -webkit-calc(25% + 219px);
    display: block;
	width: 50px;
	height: 50px;
	margin: 50px auto 0;
	border-radius: 50%;
    background-color: rgb(49, 145, 231);
	box-shadow: inset -25px -15px 40px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
    animation: force2 2600ms linear 1925ms forwards;

}
@keyframes lever {
    100%{transform:rotate(30deg);}
}
@keyframes force {
    15%{
        top: 40%;
        -webkit-animation-timing-function: ease-in;
    }
    20%{
        top:50%;
        left:-webkit-calc(25% + 219px);
        -webkit-animation-timing-function: ease-in;
    }
    40%{
        top:30%; 
        
        -webkit-animation-timing-function: ease-in;
    }
    60%{
        top:50%; 
        
        -webkit-animation-timing-function: ease-in;
    }
    80%{
        top:40%; 
        
        -webkit-animation-timing-function: ease-in;
    }
    90%{
        top:50%; 
        
        -webkit-animation-timing-function: ease-in;
    }
    
    100%{
        top:45%;
        left:110%;
        -webkit-animation-timing-function: ease-in;
    }
}

@keyframes force2 {
    0% {
        top:-100px;
        left: -webkit-calc(25% + 120px);
        
		-webkit-animation-timing-function: ease-in;
	}
    
	30% {top: 50%;
        left: -webkit-calc(25% + 219px);
		transform:rotate(20deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {top: 30%; 
		-webkit-animation-timing-function: ease-in;}
	65% {top: 50%; 
		-webkit-animation-timing-function: ease-out;}
	75% {
		top: 40%;		
		-webkit-animation-timing-function: ease-in;
	}
    83% {
		top: 50%;		
		-webkit-animation-timing-function: ease-out;
	}
    92% {
		top: 45%;		
		-webkit-animation-timing-function: ease-in;
	}
    /* 96% {
		top: 50%;		
		-webkit-animation-timing-function: ease-out;
	}
    97% {
		top: 48%;		
		-webkit-animation-timing-function: ease-in;
	} */
	100% {top: 50.5%;
        left:100%;
        transform:rotate(-380deg);
        /* border-width: 5em; */
		-webkit-animation-timing-function: ease-out;
	}
}
#css-word{
    font-size:100px;
}
#html-word{
    font-size:50px;
}
#javascript-word{
    font-size:25px;
}
.word{
    width:200px;
    display:flex;
    justify-content: center;
    /* position:absolute;
    top: calc(50% - 40px);
    left: calc(50% - 100px); */
    border: 1px solid black;
}
#web-word{
    font-size:10vw;
    font-weight:900;
}
#test{
    background-color: white;
    width: clamp(50px, 7vw, 75px);
    /*width: 10vw;50px;*/
    aspect-ratio: 1;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
#lastNameRotated{
    font-size: .75rem;
    font-weight: bold;
    writing-mode: vertical-rl;
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 0%);
    box-shadow: 0px 2px 2px 1px var(--header);
    transform-origin: 80% -20px;
    transform: rotate(-90deg);
    /* width:55px; */
    margin-top: -14px;
    margin-left: 3px;
}