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

html {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    height: 100%;
}

html, body {
    width: 100%;
    /* height: 100%; */
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

nav {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #5D4954;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    top: 0;
    z-index: 99;
    overflow: hidden;
    transition: 0.6s;
    padding: 50px 10px;
    max-height: 140px;
}

.navbar {
    
    width: 100vw; /* WIDTH */
    display: flex;
    flex-wrap: wrap;
}

#logo {
    font-size: 25px;
    transition: 0.6s;
    letter-spacing: 0.1em;
    color: inherit;
    text-decoration: none;
}

.intro {
    padding-top: 50px;
    position: relative;
    max-height: 100vh;
    overflow: hidden;
}

.imgFS4P {
    width: 30vw;
    min-width:260px;
    /* height: auto; */
    box-shadow: 10px -10px 0px 0px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(4em) rotate(-5deg);
    transition: transform .6s,
                opacity .6s;
    will-change: transform, opacity;  
}

.imgFS4P.is-visible {
    opacity: 1;
    transform: rotateZ(0deg);
}

@media screen and (max-width: 600px), screen and (max-height: 500px) {
    nav {
        padding: 15px 10px !important;
    }
    .inner {
        flex-wrap: wrap;
    }
    .imgDiv {
        display: none;
        /* max-width: 8em;
        max-height: 8em;
        margin-left: 2em; */
    }
    .divFS4P {
        flex-wrap: wrap;
    }
    .imgFS4P {
        margin-top: 1em;
        width: 100%;
    }
}

.buffer {
   display: block;
   height: 80px;
   margin-top: -80px;
   visibility: hidden; 
}

.intro img {
    width: 100%;
    height: auto;
    
}



.inner {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid black; */
    width: 80%;
    padding: 2.5em;
    background-color:rgba(60,179,113, 0.5);
    display: flex;
    justify-content: space-between;
}

.textDiv {
    margin-left: 2em;
    font-family: 'Poppins', sans-serif; 
}

.imgDiv {
    border: 1px solid black;
    width: 35vw;
    max-width: 250px;
    max-height: auto;
    
}

.line1 {
    font-size: 4em;
    transition: 0.4s;
}

/* @media screen and (max-width: 700px) {
    .line1 {
        font-size: 2em;
    } 
} */

.line2 {
    font-size: 2em;
    transition: 0.4s;
}

.line3 {
    font-size: 1.5em;
    transition: 0.4s;

}

@media screen and (max-width: 800px) {
    .line1 {
        font-size: 2em;
    }
    .line2 {
        font-size: 1em;
    } 
    .line3 {
        font-size: 1em;
    }
    /* .navbar {
        flex-direction: column;
    } */
}

.FS4P {
    margin-left: 1em;
    margin-right: 1em;
}

.divFS4P {
    display: flex;
    margin: 3em;
}



.link {
    color: darkblue;
    text-decoration: none;
    border-bottom: 1px solid;
}

.animatedLink {
    color: inherit;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    /* border-bottom: 1px solid; */
}

.animatedLink:after {
    
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto;
    width: 0px;
    padding-top: 0px;
    
    /* border-bottom: 1px solid black; */
    
    border-bottom: 1px solid white; 
    
    transition: 0.5s;
}

.animatedLink:hover::after {
    width: 100%;
}

.links {
    display: flex;

}

.svgVB {
    display: block;
    margin: auto;
    width: 8em;
    margin-top: 0.75em;
}

.svgPorter {
    height: 100px;
    margin-top: 5px;
}

.styles {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.stylesCards {
    margin: auto;
    padding-top: 3em;
    padding-bottom: 3em;
    /* border: 1px gray solid; */
    flex: 1 1 0px;
    
}

.regular-wrapper {
    display: grid;
    grid-template-columns: 10% auto 10%;
}

.left-panel {

}

.content-panel {

}

.right-panel {

}

.profile {
    
    font-size: 2em;
}

.leftFeature {
    display: flex;
    flex-wrap: wrap;
}

.rightFeature {
    display: flex;
    flex-wrap: wrap-reverse;
}

.vertflex {
    margin: 1em;
    padding: 0.25em;
    flex: 1 1 0;
    width: 0;
    min-width: 200px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    
}



.rightjustify {
    text-align: right;
    margin-right: 1em;
}
.leftjustify {
    margin-left: 1em;
}

.green {
    background: linear-gradient(135deg, rgba(148,166,108,1) 0%, rgba(229,239,207,1) 100%);
}

.blue {
    background: linear-gradient(135deg, rgba(123,151,211,1) 0%, rgba(216,226,248,1) 100%); 
}

.orange {
    background: linear-gradient(135deg, rgba(254,145,58,1) 0%, rgba(255,189,136,1) 100%);
}

.yellow {
    background: linear-gradient(135deg, rgba(248,177,61,1) 0%, rgba(255,211,140,1) 100%);
}

.skills {
    background: rgb(148,166,108);
    
}
.slide-right {
    opacity: 0;
    transform: translateX(-50%);
    transition: transform 1s, opacity 0.6s;
    will-change: tranform, opacity;
}

.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0em);
}

.slide-left {
    opacity: 0;
    transform: translateX(50%);
    transition: transform 1s, opacity 0.6s;
    will-change: tranform, opacity;
}

.slide-left.is-visible {
    opacity: 1;
    transform: translateX(0em);
}

.skillsBeer {
    background: rgb(204,216,176);

}

.personality {
    background: rgb(123,151,211);
}

.personalityBeer {
    background: rgb(188,204,237);
/* 188,204,237 */
}

.interests {
    background: rgb(254,145,58);
}

.interestsBeer {
    background: rgb(255,176,113);
/* 255,176,113 */
}

.values {
    background: rgb(248,177,61)
}

.valuesBeer {
    background: rgb(253,201,119);
/* 253,201,119 */
}

nav {
    background-color: black;
}

#logo {
    color: white;
}

.animatedLink {
    color: white;
}

.footerIcon {
    width: 35px;
    height: 35px;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding-top: 0.5em;
    /* padding-bottom: 1em; */
}
.btn {
    box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:inherit;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}
.cta {
    padding: 2em;
    text-align: center;
}
.ready {
    font-size: large;
}

.wiggle:hover{ 
    animation: wiggle 200ms;
    animation-timing-function: linear;   
}
  
@keyframes wiggle {
    0% { transform: translate(2px, 0); }
    10% { transform: translate(-2px, 0); }
    20% { transform: translate(2px, 0); }
    30% { transform: translate(-2px, 0); }
    40% { transform: translate(2px, 0); }
    50% { transform: translate(-2px, 0); }
    60% { transform: translate(2px, 0); }
    70% { transform: translate(-2px, 0); }
    80% { transform: translate(2px, 0); }
    90% { transform: translate(-2px, 0); }
    100% { transform: translate(2px, 0); }
    
}