/* 
    Created on : Mar 21, 2021, 11:14:09 PM
    Author     : jeff
*/
:root{

}
*{
    box-sizing: border-box;
    padding:0;
    margin:0;

}
body{
    font-family: Tahoma, sans-serif;
    font-family: Consolas, monaco, monospace;
    font-weight: 400;
    background:#333333; /* #111 url(/images/bg_.jpg); */
    background-size:cover;
    background-attachment: fixed;
    display:flex;
    align-content: center;
    justify-content: center;
    min-width:320px;
    color:#cc9900;
}
body > div{
    display:flex;
    justify-content:center;
    align-items:center;
    color:#000;
    height:100vh;
    width:100vw;
}
#main_wrap{
    max-width:980px;
    padding:0 2em;
    align-content: center;
    text-align:left;
}
header{

    text-align: center;
}
#logo{
    font-weight: 600;
    position:relative;
    color:#b80;
    text-shadow:0 0 7px #000;
    font-size:50px;
    white-space: nowrap;
    font-variant:small-caps;

}

#logo i{
    font-style: normal;
    display:inline-block;
    transform-origin: center -30px;
    padding-top:10px;
    position:relative;
    z-index:3;
    
    animation: logo 3.3s ease-in-out infinite alternate;
    font-weight:400;

}
#logo i:hover{
  

}
#logo i:nth-child(1),
#logo i:nth-child(5)
{
    font-weight:800;
    font-size:1.2em;
    top:10px;
    left:0;
    color:#c90;

}
#logo i:nth-child(2)
{
    animation-duration: 3.2s;
}
#logo i:nth-child(3)
{
    animation-duration: 3.05s;
}
#logo i:nth-child(4)
{
    animation-duration: 3.4s;
}
#logo i:nth-child(5)
{
    animation-duration: 3.1s;
}
#logo i:nth-child(6)
{
    animation-duration: 3.18s;
}
#logo i:nth-child(7)
{
    animation-duration: 3.3s;
}
#logo i:nth-child(8)
{
    animation-duration: 3.21s;
}
#logo i:nth-child(9)
{
    animation-duration: 3.15s;
}
#logo i:nth-child(10)
{
    animation-duration: 3.25s;
}

#logo i:before{
    content:'';
    width:1px;
    height:40px;
    background:rgba(255,255,255,.1);
    position:absolute;
    margin:0 50%;
    margin-top:0px;
    top:-10px;
    z-index:-1;
    

}
#logo i.double:after

{
    content:'';
    width:1px;
    height:38px;
    background:rgba(255,255,255,.1);
    position:absolute;
    margin:0 50%;
    margin-top:0px;
    top:-10px;
    z-index:-1;
    transform:translateX(-18px);

}
#logo i.left:before

{
    transform:translateX(-7px);


}

#logo i.double:before

{
    transform:translateX(-9px);


}
#logo i.left:after{

    transform:translateX(0px);



}
@keyframes logo {
    0% {  transform: rotate(-1.5deg) translateY(0em) }
    25% {  translateY(-.02em) }
    50% {  transform: rotate(1.5deg) translateY(0em) }
    75% {  translateY(.03em) }
    100% {  transform: rotate(-1.5deg) translateY(0)};

}
@keyframes logo-hover {

  

}
section{
    margin:2em 0 ;
    background-color:;
    background: rgba(17,17,17,.2) linear-gradient(40deg,  rgba(17,17,17,.4),rgba(217,217,217,.2));
    border-radius:.5rem;
    padding:0 0  2em 0;
   border:1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 box-shadow:0 0 5px 0 #000;
}
section:hover,section:active {
    box-shadow:0 0 30px 0 #000;
}
section p{
    font-size:1.5rem;
    letter-spacing:2px;
    margin:0 1.5rem;
    max-width:60rem;
    line-height:1.75rem;
    font-variant:small-caps;
    text-shadow:0 0 5px  #000;
}
section h2{
    color:rgba(255,255,255,.4);
    position: -webkit-sticky;
    position: sticky;
    top:0;
     border-radius:.5rem .5rem 0 0;
    margin:0 0 .5em 0;
    padding:.5rem 1rem;
    background:rgba(17,17,17,.4);
    z-index:1;
    font-size:30px;
    font-family: 'Nova Round', cursive;
   text-shadow:0 0 5px  #000;
    transition: all ease-in-out .3s;
}
section:hover > h2,section:active > h2{
    color:rgba(255,255,255,.8);
    border-color:rgba(4,217,255,.42);
    /*    text-shadow:0 0 3px rgba(4,217,255,.9), 0 0 6px rgba(4,217,255,.7);
	animation:neon 3s ease-in-out infinite;*/
}

@keyframes neon {
    0% {   text-shadow:0 0 5px rgba(4,217,255,.9), 0 0 10px rgba(4,217,255,.7);}

    50% { text-shadow:0 0 5px rgba(4,217,255,.5), 0 0 15px rgba(4,217,255,.7);}

    100% {   text-shadow:0 0 5px rgba(4,217,255,.7), 0 0 10px rgba(4,217,255,.7);};

}
nav{
    display:flex;
}
.skills_list,.skills_list_2{
    display:flex;
    text-align:center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    z-index:1;

    width:100%;
}
.skills_list div{

    margin:1em 1em;
    font-weight:800;

    font-size:1em;
    color:rgba(255,255,255,.8);
    height:122px;
    width:122px;
    background-image:url(/images/logos.png);
    background-repeat: no-repeat;
    background-position-y:bottom;

    position:relative;

}
.skills_list div:after{
    content:"";
    position:absolute;
    top:1.25em;
    transform:translateX(-50%);
    z-index:-1;
    transition: all ease-in-out .3s;
    white-space:nowrap;
}

.skills_list div:hover:after,.skills_list div:active:after{
    top:-1.35em;



}
.skills_list div.php{
    background-position-x:-422px;
}
.skills_list div.php:after{
    content:"PHP"
}
.skills_list div.css{
    background-position-x:-138px;
}
.skills_list div.css:after{
    content:"CSS 3"
}
.skills_list div.wp{
    background-position-x:right;
}
.skills_list div.wp:after{
    content:"Wordpress"
}
.skills_list div.js{
    background-position-x:center;
}
.skills_list div.js:after{
    content:"Javascript"
}
.skills_list div.html{
    background-position-x:5px;
}
.skills_list div.html:after{
    content:"HTML 5"
}

.skills_list_2 div{
    margin:1em 1em;
    display:inline-flex;
    height:122px;
    position:relative;

}

.skills_list_2 div img{
    max-height:122px;
    filter: saturate(20%);
    transition: all ease-in-out .3s;
}

.skills_list_2 div img:hover{
    filter: saturate(100%);

}