style.css

:root {





    /*Greys and Shades*/
    --primary_origin: rgb(40, 39, 37);
    
    
    --grey_darker: #212f3c;
    --grey_dark: #2e4053;
    --grey_origin: #34495e;
    --grey_light: rgb(96, 96, 107); /*--kinetic_motif_color */
    --grey_lighter: #ebedef;
    
    
    
    



    /*Primary Color and Shades*/
    --static_motif_darker: #b7950b;
    --static_motif_dark:#d4ac0d;
    --static_motif: #f1c40f; /*#fa7921;*/
    --static_motif_light:#f7dc6f;
    --static_motif_lighter:#f9e79f; 

     
    

    /*Accent Colors and Shades*/
        --box_shadow_color: #6b6a69;

   
}


* {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: var(--grey_lighter);

}


main {

    /*border-radius: 10px;
    border-style: solid;
    border-color: black;*/
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    min-height: 10vh;
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--grey_lighter); 

    
}

#intro_text {
    flex-basis: 70%;
    /*border-radius: 10px;
    border-style: solid;
    border-color: black;*/
    font-size: 2vh;
    align-content: center;
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--grey_lighter); 

    display: flex;
    flex-flow: row, wrap;
    


}

h1 {
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--grey_lighter); 
    align-self: center;
    align-content: baseline;
    


    

}

#developer {
    margin-left: 1vh;
    align-self: center;
    align-content: baseline;

    animation-name: developer;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    
}



#navbar {
    flex-basis: 20%;
    /*border-radius: 10px;
    border-style: solid;
    border-color: black;*/
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--static_motif); 

    align-self: center;

    
}

#navbar ul {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 5vh;
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--grey_lighter); 

 
    

}

li {
    /*background-color:rgb(253, 202, 136);*/
    background-color: var(--grey_lighter); 


}

.navitem {

    background-color: var(--grey_lighter);
    /*border-radius: 1px;
    border-style: solid;
    border-color: black;*/
    font-weight: bolder;
    color: black;
}

.navitem:hover {
    color: var(--static_motif_darker);
    font-weight: bolder;
}

/*#navactive {
    text-decoration: underline var(--static_motif_darker) double 0.2vh;
}*/


section {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
   /* border-radius: 10px;
    border-style: solid;
    border-color: black;*/
    column-gap: 5vh;

    /*animation-name: paneljump;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;*/

    animation-name: panelswing;
    animation-duration: 2.7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;


}



article {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-bottom: 5vh;
    margin-top: 20vh;
    row-gap: 5vh;

    animation-name: paneljump;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -2s;

   
        
}

.panels_top {
    margin-top: 0vh;
    animation-name: toppanelsjump;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -2s;
}


a {
    text-decoration: none;
    background-color: none;
}


.panels {
    background-color:var(--grey_lighter);
    color: var(--grey_darker);

    /*background-color: var(--static_motif_dark); 
    color: var(--grey_lighter);*/


    padding: 5vh 15vh 5vh 15vh;
    /*border-radius: 10px;
    border-style: solid;
    border-color: black;*/
    /*border: 1vh solid rgb(40, 39, 37);*/
    border: 1vh solid hidden;
   /* transition: background-color 0.2s;
    transition-timing-function: linear;*/
    border: 0.1vh solid var(--box_shadow_color) ;
    border-radius: 1.5vh;
    box-shadow: 0vh 2vh 6vh -3vh var(--grey_dark);


    /*animation-name: panelatrest;
    animation-duration: 0.1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;*/

    /*animation-name: paneljump;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;*/

    transition: background-color 1s;
    transition-timing-function: ease-out;





    

   
    

}



.panels:hover {


   /* box-shadow: 0vh 0.2vh 5vh -1vh rgb(0, 166, 255);*/
   /*background-color: aqua; for transition*/
   /*animation-name: slide;
   animation-duration: 0.1s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   animation-iteration-count: 1; remove this for that flickering effect!
   */

    /*animation-name: card_lift;
    animation-duration: 0.1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;*/
    box-shadow: 0vh 4vh 6vh -3vh var(--grey_dark);
    background-color: var(--static_motif_dark);
    /*color: var(--grey_light);*/

    




   
}



#statusbarcontainer {
    display: flex;
    flex-flow: row, wrap;
    justify-content: flex-start;
    min-height: 3vh;
    background-color: var(--grey_light); 


}

#statusbar {
    background-color: var(--kinetic_motif_color); 
    color: whitesmoke;
    align-content: center;
    animation-name: statusbarupdate;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; 
    animation-direction: alternate;
    position: relative;
    
}

#contact-section {
    color: var(--grey_darker);
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    margin-top: 4vh;
    

   /* border: 2px solid black;*/


    /*jump across goes here

    animation-name: contact_form_jump_across;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: forwards;
   */


}

#contact-panels {
    border: 2px solid black;
    display: inline-flex;
    flex-flow: column wrap;
    align-content: center;
   
    

}




form {

    margin: 2vh 2vh 2vh 2vh;
    box-shadow: 0vh 2vh 6vh -2vh var(--grey_dark);
    background-color: var(--static_motif_lighter); 
    animation-name: contact_form_movement;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: forwards;
    animation-delay: -2s;
    




}


.user-text {
    color: black;
    background-color: var(--static_motif_light); /*lightslategray;*/
    padding: 0.5vh;
    width: 50vh;
    outline: none;
    font-size: large;
    border: none;




}

.user-text:focus {
    border: none;

}


#text-box {
    padding-bottom: 50vh;
    outline: none;

}

#text-box:focus {
    border: none;

}

#flex-form {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    justify-content: center;
    gap: 0.5vh;



}

#message-type {
    color: black;
    background-color: var(--static_motif_light);
    outline: none;
    border: none;

    

    
}

#select-heading {
    background-color: var(--static_motif_lighter); 

}
#email_input {
    margin-top: 1vh;
    margin-bottom: 1vh;
    box-shadow: 0vh 2vh 6vh -3vh var(--grey_dark);

}

option {
    background-color: whitesmoke;
}

#submit-button {
    align-self: flex-end;
    background-color: aquamarine;
    margin-top: 2vh;
    width: 6vh;
    transition: width 0.2s;
    transition-timing-function: ease;

}

#submit-button:hover {
    width: 50vh;
}



#hire-me-background {

    display: flex;
    flex-flow: row, wrap;
    justify-content: center;
    /*border: solid 2px blue;*/

}


#hire-me-background > ul {

    font-size: 10vh;
    color: var(--grey_light);
    list-style: none;
    z-index: 1;


    

    


}

#hire-me-background > ul > li {

    display: flex;
    flex-flow: row, wrap;
    justify-content: center;

}


.hire {

    opacity: 5%;

}


.me {

    opacity: 5%;

}


#resume-container {
    position: absolute;
    border: solid 0.5px black;
    scale: 5;
    z-index: 3;
    margin-left: 90vh;
    margin-top: 90vh;
}







@keyframes slide {
    from {background-color: rgb(33, 33, 31) }
    to {/*background-color: var(--kinetic_motif_color);*/ 
        border-color: var(--static_motif);
        color: var(--static_motif); 
        background-color: rgb(33, 33, 31) ;}
}

@keyframes card_life {

    from {box-shadow: none;}
    to {box-shadow: 5vh 2vh 4vh -3vh var(--grey_dark);}
}

@keyframes developer {
    from {color: black;}
    to {color: var(--static_motif_darker);}

    
}

@keyframes trans {
    from {background-color: var(--static_motif);}
    to {background-color: none; transform: translate( 200px 100px);}
}

@keyframes panelatrest {
    from {box-shadow: none;}
    to {box-shadow: 0vh 2vh 4vh -3vh var(--grey_dark);}
    
}

@keyframes statusbarupdate {
    0%   {left: 0vh;}
    
    100% {left:192vh; }
}

@keyframes paneljump {

    from {row-gap:5vh; column-gap:5vh;}
    to {row-gap:5.5vh;column-gap:5.5vh;}
}

@keyframes panelswing {

    from {column-gap:5vh;}
    to {column-gap:6vh;}
}
@keyframes toppanelsjump {

    from {margin-top: 0vh;}
    to {margin-top: 5vh;}
}

@keyframes panel_orange {
    from {background-color: var(--grey_lighter);color:var(--grey_darker) ;}
    to {background-color: var(--static_motif_dark);color: var(--grey_lighter);}
}

@keyframes contact_form_movement {

    0% {margin-right:2vh};
    50% {margin-top:4vh;}
    100% {margin-right:2vh;margin-top:2vh}
}

@keyframes contact_form_jump_across {
    0% {transform: translate(25%);}
    100% {transform: translate(0);}
}
    


/*have "developer" cycle thru the other color and black. That other color will be the same motif for kinetic energy throughout the site 
(on button press, on hover,    etc)

possible kinetic motif colors (hex)


9649cb
AFBBF2
19647E



*/