/*
Theme Name: Portfolio
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body {
    background-color: #333333;
    position: relative;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
}

h2 {
    font-size: 50px;
}

#main {
    /* max-width: 1173px;
    margin-left: auto;
    margin-right: auto; */
    text-align: center;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.content h2:hover {
    color: #fff;
    text-shadow: 
    0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 100px white;
}

  .hero {
    position: relative;
    background: #333333;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: -5px;
    margin-right: -5px;
}

  .hero h2 {
    position: relative;
    z-index: 1;
    font-size: 4.5rem;
    margin: 0 0 10px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}
  
  .hero p {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    color: #A9A9A9;
    line-height: 1.4;
}
  
  /* ========================= */
  
  .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 500px;
    background-color: white;
    background-image: linear-gradient(#454545, #333333);
    /* box-shadow: inset 0 0 50px #333333; */
    transition: 500ms;
    margin-left: -5px;
}
  
  .waves::before,
  .waves::after {
    content: '';
    position: absolute;
    width: 300vw;
    height: 300vw;
    top: -65vw;
    left: 50%;
    transform: translate(-50%, -75%);
}
  
  .waves::before {
    border-radius: 44%;
    background: #9c9c9c;
    animation: waves 8s linear infinite;
}
  
  .waves::after {
    border-radius: 44%;
    background: #333333;
    animation: waves 15s linear infinite;
}
  
  @keyframes waves {
    0% {
      transform: translate(-50%, -75%) rotate(0deg);
    }
    
    100% {
      transform: translate(-50%, -75%) rotate(360deg);
    }
}
  

.primary-nav ul {
    list-style: none;
    /* display: flex;
    gap: 30px; */
}

.primary-nav a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    color: white;
    box-shadow: inset 0 0 0 0 white;
    margin: 0 -.25rem;
    padding: 0 .25rem;
    /* -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: black; */
}

.primary-nav li {
    padding-bottom: 7px;
}

.primary-nav a:hover {
    /* transition: color .3s ease-in-out, box-shadow;
    box-shadow: inset 140px 0 0 0 white;   
    color: #333333; */

    /* text-shadow:
    white 0.006em 0.006em 0.007em,
    #A9A9A9 1px 1px 1px,
    #A9A9A9 1px 2px 1px,
    #A9A9A9 1px 3px 1px,
    #A9A9A9 1px 4px 1px,
    #A9A9A9 1px 5px 1px,
    #A9A9A9 1px 6px 1px,
    #A9A9A9 1px 7px 1px,
    #A9A9A9 1px 8px 1px,
    #A9A9A9 1px 9px 1px,
    #A9A9A9 1px 10px 1px,
    #A9A9A9 1px 11px 1px,
    #A9A9A9 1px 12px 1px,
    white -0.15em -0.1em 100px; */
    color: #fff;
    text-shadow: 
    0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 100px white;
}

.primary-nav {
    margin-left: -25px;
    margin-right: -10px;
    margin-top: -25px;
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: oblique;
}


/* @media (max-width: 1000px)  {
    .primary-nav {
        display: none;
    }  
} */

.hamburger {
    display: none;
    max-width: 25px;
    padding-top: 10px;
    padding-right: 10px;
    position: fixed;
    top: 0;
    right: 0;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}



/* .show-nav {
    position: absolute;
    right: 0;
    top: 0;
}

.primary-nav.show{
    display: inline-block;
} */

.navigation-footer ul {
    list-style: none;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.navigation-footer a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    color: white;
}

.navigation-footer a:hover {
    color:#333333;
}

.navigation-footer {
    background-color: #333333;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: oblique;
    margin-left: -10px;
    margin-right: -10px;
}

.navigation-footer h3 {
    text-align: center;
    color: white;
}

.navigation-footer i {
    color: white;
    margin-bottom: 10px;
    box-shadow: inset 0 0 0 0 white;
    margin: 0 -.25rem;
    padding: 0 .25rem;
}

.navigation-footer i:hover {
    color: #fff;
    text-shadow: 
    0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 100px white;
}

#fluentform_1 {
    max-width: 1123px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

textarea {
    font-family: sans-serif;
}

#about {
    margin-top: 200px;
    margin-bottom: 220px;
    line-height: 1.7;
}

#experience {
    margin-bottom: 250px;
}

#work {
    margin-bottom: 220px;
}

#contact {
    margin-bottom: 200px;
}

.work-info a {
    text-decoration: none;
    color: white;
}

.work-info p {
    color: #9c9c9c;
    font-style: oblique;
}

.work-info h4 {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#contact p {
    font-size: 15px;
    font-style: italic;
}

#about p {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

#about h2 {
margin-bottom: -10px;
}

.resume-link a {
    text-decoration: underline;
    color: white;
}

#experience h2 {
    padding-bottom: 40px;
}

.experience-section {
    font-style: oblique;
}

.experience-area {
    display: flex;
    justify-content: center;
}

@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.html {
    transform: rotate(10deg);
    margin-top: -50px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.html:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.css {
    padding-left: 60px;
    margin-bottom: 30px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.css:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.php {
    padding-left: 70px;
    transform: rotate(5deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.php:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.javascript {
    padding-left: 100px;
    transform: rotate(-10deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.javascript:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.experience-area2 {
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.wordpress {
    transform: rotate(-17deg);
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.wordpress:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.csharp {
    padding-left: 60px;
    transform: rotate(5deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.csharp:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.sass {
    padding-left: 75px;
    transform: rotate(20deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.sass:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.sql {
    padding-left: 70px;
    transform: rotate(-25deg);
    margin-top: -10px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.sql:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.mongodb {
    padding-left: 50px;
    transform: rotate(20deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.mongodb:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.experience-area3 {
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.git {
    transform: rotate(20deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.git:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.docker {
    padding-left: 60px;
    transform: rotate(-8deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.docker:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.familiar {
    padding-top: 20px;
    display: flex;
    justify-content: center;
}

#experience h3 {
    padding-top: 40px;
    padding-bottom: 30px;
    font-style: normal;
    font-weight: 600;
}

.node {
    transform: rotate(10deg);
    margin-top: 1px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.node:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.react {
    padding-left: 60px;
    transform: rotate(-10deg);
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.react:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.express {
    padding-left: 70px;
    transform: rotate(10deg);
    margin-top: -5px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.express:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.python {
    padding-left: 70px;
    transform: rotate(-20deg);
    margin-top: -20px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.python:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.familiar2 {
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.vb {
    transform: rotate(10deg);
    margin-top: 5px;
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.vb:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.podman {
    padding-left: 35px;
    transform: rotate(-5deg);
    text-shadow:
    white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 38px 26px,
    rgba(16, 16, 16, 0.2) 1px 42px 30px,
    rgba(16, 16, 16, 0.2) 1px 46px 65px,
    rgba(16, 16, 16, 0.4) 1px 50px 95px,
    white -0.15em -0.1em 100px;
}

.podman:hover {
    animation: tilt-shaking 0.7s linear infinite;
}

.about-image-gallery {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    /* display: grid; */
    display: flex;
    width: 100%;
    height: auto;
    /* gap: 10px; */
    /* padding-left: 10px;
    padding-right: 10px; */
}

.about-image-gallery img {
    width: 98%;
    border: 4px double #9c9c9c;
}


/* .grace {
    font-size: 20px;
    text-shadow:
    #9c9c9c 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    white 1px 3px 1px,
    white 1px 4px 1px,
    #9c9c9c -0.15em -0.1em 100px;
}  

.ithreads {
    font-size: 20px;
    background: #FA0000;
    background: linear-gradient(to right, #FA0000 45%, #636363 80%, #FFFFFF 120%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
    #FA0000 0.006em 0.006em 0.007em,
    #636363 1px 1px 1px,
    #FFFFFF 1px 2px 1px,
    white 1px 3px 1px,
    white 1px 4px 1px,
    #9c9c9c -0.15em -0.1em 100px;
}

.bahama {
    font-size: 20px;
    background: #26A2A6;
    background: linear-gradient(to right, #26A2A6 39%, #FF6536 75%, #FF5E24 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.buffalo {
    font-size: 20px;
    background: #FF7518;
    background: linear-gradient(to right, #FF7518 50%, #FFFFFF 90%, #FF7518 54%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bluefrog {
    font-size: 20px;
    background: #4281FF;
    background: linear-gradient(to right, #4281FF 44%, #1BB32A 65%, #FFFFFF 120%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.a-z {
    font-size: 20px;
    background: #FF0000;
    background: linear-gradient(to right, #FF0000 28%, #FFFFFF 50%, #FF0000 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */

.portfolio-container img {
    max-width: 1024px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    filter: blur(7px);
}

.portfolio-container {
    position: relative;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 40px;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-container a {
    text-decoration: none;
    color: white;

}

.portfolio-container a:visited {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: #333333 5px 5px 5px;
    padding: 0%; 
}

.portfolio-container:hover h4 {
    opacity: 0;
    text-decoration: none;
}

.portfolio-container:hover img{
    filter: blur(0);
}

.portfolio-container .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: black;
    text-shadow: #333333 5px 5px 5px;
    padding: 0%;
}

.text h4 {
    font-size: 40px;
    margin: 0%;
}

.single-page {
    background-color: #333333;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 190px;
    margin-bottom: 100px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.single-page h1 {
    color: white;
    padding-bottom: 25px;
    font-size: 45px;
    text-shadow:
    #9c9c9c 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c -0.15em -0.1em 100px;
}

.single-page p {
    color: white;
    font-size: 18px;
}

.single-page img {
    border: 4px double #9c9c9c;
}

.grace-button {
    padding-top: 10px;
    padding-bottom: 20px;
}

.grace-button:hover {
    color: #fff;
    text-shadow: 
    0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 100px white;
}

.back-button {
    padding-top: 10px;
    padding-bottom: 20px;
}

.back-button:hover {
    color: #fff;
    text-shadow: 
    0 0 5px white,
    0 0 25px white,
    0 0 50px white,
    0 0 100px white;
}


.title-section {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.title-section h1 {
    font-size: 30px;
}

.basic-info-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.basic-info a{
    text-decoration: none;
    color: white;
}


.pipe {
    margin-top: 20px;
}


.objective {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.objective h1 {
    border-bottom:1px solid white;
    font-size: 25px;
}

.objective p {
    margin-top: -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.grad-date-mobile {
    display: none;
}

.education {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.education h1 {
    border-bottom:1px solid white;
    font-size: 25px;
}

.education-row {
    display: flex;
    text-align: left;
    padding-left: 10px;
}

.experience {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.experience h1 {
    border-bottom:1px solid white;
    font-size: 25px;
}

.experience-row {
    display: flex;
    text-align: left;
    padding-left: 10px;
}


.school-major {
    width: 75%;
}

.school-major .major {
    margin-top: -20px;
}

.two-col {
    margin-top: -30px;
}

.worked-with {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.worked-with h1 {
    border-bottom:1px solid white;
    font-size: 25px;
}

.worked-with ul {
    text-align: left;
    margin-top: -10px;
    word-wrap: break-word;
}

.two-col-worked-with {
    display: flex;
    justify-content: center;    
}

.left-col-worked-with {
    padding-right: clamp(1.5625rem, -4.8295rem + 18.9394vw, 9.375rem);
}

.right-col-worked-with {
    padding-left: clamp(1.5625rem, -4.8295rem + 18.9394vw, 9.375rem);
}

.length-worked-mobile {
    display: none;
}

.professional-experience {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 160px;
}

.professional-experience h1{
    border-bottom: 1px solid white;
    font-size: 25px;
    margin-bottom: 35px;
}

.work-experience {
    display: flex;
    text-align: left;
    padding-left: 10px;
    flex-wrap: wrap;
}

.length-worked {
    margin-left: 110px;
}

.job-position-learned {
    width: 70%;
}

.job-position-learned h4 {
    margin: 0;
}

.job-position-learned ul {
    margin: 10px;
}

.button-section {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.print-button {
    background-color: #e7e7e7;
    color: black;
    border: 2px solid #e7e7e7;
    font-size: 16px;
    font-style: oblique;
    padding: 5px 28px;
}

.print-button:hover {
    background-color: white;
}

@media (max-width: 1700px) {
    .waves {
        height: 330px;
    }
}


@media only screen and (max-width: 1330px) {
    .primary-nav {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #545454;
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
        0 10px 27px rgba(0, 0, 0, 0.05);
    }
    .primary-nav.active {
        left: 0;
    }
    .menu-item {
        margin:2.5rem 0;
    }
    .hamburger {
        display: block;
        cursor: pointer;
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media (max-width: 1230px) {
    .waves {
        height: 250px;
    }
}

@media (max-width: 750px) {
    .experience-row {
        display: block;
    }
    .length-worked-mobile {
        display: block;
    }
    .length-worked {
        display: none;
    }
    .job-position-learned {
        width: 100%;
    }
    .grad-date-mobile {
        display: block;
    }
    .grad-date {
        display: none;
    }
    .school-major .major {
        margin-top: 0px;
    }
    .school-major {
        width: 100%;
    }
    .print-button {
        font-size: 12px;
        padding: 2px 10px;
    }
}

@media (max-width: 680px) {
    .work-experience {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .basic-info-row {
        gap: 10px;
    }
    .experience-area p {
        padding-left: 8%;
    }
    .experience-area2 p {
        padding-left: 8%;
    }
    .experience-area3 p {
        padding-left: 8%;
    }
    .familiar p {
        padding-left: 8%;
    }
    .familiar2 p {
        padding-left: 8%;
    }
    #experience {
        margin-bottom: 150px;
    }
    #about {
        margin-bottom: 150px;
    }
    .waves {
        height: 200px;
    }
    .single-page p {
        font-size: 16px;
    }
    .single-page h1 {
        padding-bottom: 0px;
    }
}


@media (max-width: 500px) {
    .portfolio-container a {
        font-size: 30px;
    }
    .portfolio-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #about {
        margin-top: 150px;
    }
    .about-image-gallery {
        gap: 7px;
    }
    .box3 {
        margin-top: -16px;
    }
}

@media (max-width: 496px) {
    .basic-info-row {
        display: block;
        font-size: 13px;
        margin-bottom: 40px;
    }
    .pipe {
        display: none;
    }
    .right-col-worked-with {
        padding-left: 0;
        margin-right: 10px;
    }
    .left-col-worked-with {
        padding-right: 0;
    }
}

@media (max-width: 420px) {
    .experience-area p {
        padding-left: 3%;
    }
    .experience-area2 p {
        padding-left: 3%;
    }
    .familiar p {
        padding-left: 3%;
    }
    .familiar2 p {
        padding-left: 3%;
    }
    .javascript {
        margin-left: 10px;
    }
    .sql {
        margin-top: -60px;
    }
    .mongodb {
        margin-left: -20px;
    }
    .sass {
        margin-top: 5px;
    }
    .python {
        margin-top: 20px;
    }
    .react {
        margin-top: 25px;
    }
    .podman {
        margin-top: -20px;
    }
}

@media (max-width: 400px) {
    .content h2 {
        font-size: 2.5rem;
    }
    .content p {
        font-size: .9rem;
    }
    #about p {
        font-size: 90%;
    }
    #about {
        margin-bottom: 120px;
    }
    #contact {
        margin-bottom: 120px;
    }
    #work {
        margin-bottom: 120px;
    }
}

@media (max-width: 399px) {
    .portfolio-container a {
        font-size: 25px;
        -webkit-text-stroke-width: 1px;
    }
}

@media (max-width: 335px) {
    .portfolio-container a {
        font-size: 20px;
        -webkit-text-stroke-width: 1px;
    }
}

@media print {
    header, footer, .print-button{
        display: none;
    }
    body {
        color: black;
    }
    .professional-experience h1, .objective h1, .education h1, .worked-with h1 {
        border-bottom: 1px solid black;
    }
}