/*============================
        Font Imports & Reset
 ============================= */

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

 
 * {
     padding: 0;
     margin: 0;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }
 
 html {
     scroll-behavior: smooth;
 }
 
 /*==============================
          Custom Variables
 ================================ */
 
 :root {
     
     --navbanner-background: #20232e; 
     --about-background: #282e47;
     --skills-background: #273057;
     --portfolio-background: #172046;
     --contact-background: #0b1947; 
     --title-color: white; 
     --footer-background: #161925;
 }
 
 
 /*==============================
              Nav
 ================================ */
 
 #nav-container {
     width: 100%;
     height: 5rem;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     background: var(--navbanner-background);
     position: fixed;
     z-index: 2;
 }
 
 .link-flex {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
         justify-content: space-around;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     list-style: none;
     width: 40rem;
 }
 
 .link-flex li a {
     text-decoration: none;
     color: var(--title-color);
     font-size: 1.1rem;
 }
 
 .link-flex li a:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
 }
 
 
 /*==============================
              Banner
 ================================ */
 
 #banner {
     width: 100%;
     min-height: 100vh;
     background: var(--navbanner-background);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     
 }
 
 #banner-text {
     margin-top: 100px;
     text-align: center;
     color: var(--title-color);
 }
 
 @-webkit-keyframes glow {
     0% {text-shadow: 0px 0px 4px var(--title-color)}
     25% {text-shadow: 0px 0px 5px var(--title-color)}
     40% {text-shadow: 0px 0px 6px var(--title-color)}
     50% {text-shadow: 0px 0px 7px var(--title-color)}
     60% {text-shadow: 0px 0px 6px var(--title-color)}
     75% {text-shadow: 0px 0px 5px var(--title-color)}
     100% {text-shadow: 0px 0px 4px var(--title-color)}
 
 }
 
 @keyframes glow {
     0% {text-shadow: 0px 0px 4px var(--title-color)}
     25% {text-shadow: 0px 0px 5px var(--title-color)}
     40% {text-shadow: 0px 0px 6px var(--title-color)}
     50% {text-shadow: 0px 0px 7px var(--title-color)}
     60% {text-shadow: 0px 0px 6px var(--title-color)}
     75% {text-shadow: 0px 0px 5px var(--title-color)}
     100% {text-shadow: 0px 0px 4px var(--title-color)}
 
 }
 
 #banner-text-row-1 {
     font-size: 1.2em;
     color: white;
 }
 #banner-text-row-1:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
     -webkit-transition: 0.7s;
     -o-transition: 0.7s;
     transition: 0.7s;
 }
 
 #banner-text-row-2 {
     font-size: 3em;  
 }
 
 #banner-text-row-2:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
     -webkit-transition: 0.7s;
     -o-transition: 0.7s;
     transition: 0.7s;
 }
 
 #banner-text-row-3 {
     font-size: 1.2em;
     color: white;
 }
 #banner-text-row-3:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
     -webkit-transition: 0.7s;
     -o-transition: 0.7s;
     transition: 0.7s;
 }
 
 #banner-text-row-4 {
     font-size: 2em;  
 }
 #banner-text-row-4:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
     -webkit-transition: 0.7s;
     -o-transition: 0.7s;
     transition: 0.7s;
 }
 
 
 #desk {
     -webkit-transform: scale(0.8);
         -ms-transform: scale(80%);
             transform: scale(80%);    
 }
 
 #Light, #light-bulb {
     -webkit-animation: lightFlicker 3s linear infinite;
             animation: lightFlicker 3s linear infinite;
 }
 
 @-webkit-keyframes lightFlicker {
     0% {opacity: 1;};
     10% {opacity: 0.6;};
     20% {opacity: 0.8;}
     30% {opacity: 1;}
     32% {opacity: 0.2;}
     34% {opacity: 0.1;}
     36% {opacity: 0.4;}
     38% {opacity: 0.6;}
     40% {opacity: 1;}
     45% {opacity: 0.5;}
     50% {opacity: 0.8;}
     60% {opacity: 0.5;}
     70% {opacity: 1;}
     80% {opacity: 0.4;}
     90% {opacity: 0.2;}
     100% {opacity: 1;}
 }
 
 @keyframes lightFlicker {
     0% {opacity: 1;};
     10% {opacity: 0.6;};
     20% {opacity: 0.8;}
     30% {opacity: 1;}
     32% {opacity: 0.2;}
     34% {opacity: 0.1;}
     36% {opacity: 0.4;}
     38% {opacity: 0.6;}
     40% {opacity: 1;}
     45% {opacity: 0.5;}
     50% {opacity: 0.8;}
     60% {opacity: 0.5;}
     70% {opacity: 1;}
     80% {opacity: 0.4;}
     90% {opacity: 0.2;}
     100% {opacity: 1;}
 }
 
 #responsive-laptop {
     display: none;
 }
 
 .fa-bars {
     color: white;
     -webkit-transform: scale(1.5);
         -ms-transform: scale(150%);
             transform: scale(150%);
     display: none !important;
 }
 .fa-bars:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
 }
 
 #hidden-nav {
     display: none;
     width: 100%;
     height: 100%;
     background: var(--navbanner-background);
     position: fixed;
     z-index: 3;
 }
 
 #hidden-nav-container {
     width: 90%;
     height: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
 }
 
 #cross-icon {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
     width: 100%;
 }
 
 #cross-icon i:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
 }
 
 .fa-times {
     color: white;
     -webkit-transform: scale(1.5);
         -ms-transform: scale(150%);
             transform: scale(150%);
 }
 
 .nav-in {
     -webkit-animation: navIn 0.2s ease-in-out forwards;
             animation: navIn 0.2s ease-in-out forwards;
 }
 
 .nav-out {
     -webkit-animation: navOut 0.2s ease-out forwards;
             animation: navOut 0.2s ease-out forwards;
 }
 
 .hidden-nav-flex {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     list-style: none;
     height: 20rem;
 }
 .hidden-nav-flex li a {
     text-decoration: none;
     color: var(--title-color);
     font-size: 1.1rem;
 }
 
 .hidden-nav-flex li a:hover {
     color: #39ffeb;
     text-shadow: 0px 0px 3px #78FFF1;
 }
 
 
 @-webkit-keyframes navIn {
     from {right: 100px; opacity: 0;}
     to {right: 0px; opacity: 1;}
 }
 
 
 @keyframes navIn {
     from {right: 100px; opacity: 0;}
     to {right: 0px; opacity: 1;}
 }
 
 @-webkit-keyframes navOut {
     from {right: 0px; opacity: 1;}
     to {right: 300px; opacity: 0;}
 }
 
 @keyframes navOut {
     from {right: 0px; opacity: 1;}
     to {right: 300px; opacity: 0;}
 }
 
 @media only screen and (max-width: 1300px) {
     #banner-text {
         margin-top: 0px;
     }
 }
 
 @media only screen and (max-width: 730px) {
     #desk {
         display: none;
     }
     #responsive-laptop {
         display: block;
         padding-top: 50px;
         -webkit-transform: scale(0.9);
             -ms-transform: scale(90%);
                 transform: scale(90%);
     }
     .link-flex li {
         display: none;
     }
     .link-flex {
         -webkit-box-pack: end;
             -ms-flex-pack: end;
                 justify-content: flex-end;
         width: 80vw;
     }
     .fa-bars {
         display: -webkit-box !important;
         display: -ms-flexbox !important;
         display: flex !important;
     }
     #banner {
         -webkit-box-pack: space-evenly;
             -ms-flex-pack: space-evenly;
                 justify-content: space-evenly;
     }
     #banner-text-row-1 {
         font-size: 1em;
     }
     
     #banner-text-row-2 {
         font-size: 2.5em;
     }
     
     #banner-text-row-3 {
         font-size: 1em;
     }
     
     #banner-text-row-4 {
         font-size: 1.7em;
     }
 }
 
 
 /*==============================
              About Section
 ================================ */
 
 #about-section {
     width: 100%;
     height: 100%;
     background: var(--about-background);    
     display: -webkit-box;    
     display: -ms-flexbox;    
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
 }
 
 #about-container {
     width: 80%;
     height: 100%;
     margin-top: 50px;
     margin-bottom: 50px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 } 
 
 #about-top {
     width: 100%;
     height: 25rem;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
             flex-direction: column-reverse;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
 }
 
 
 #about-top-left {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
 }
 
 #about-top-right {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     padding-top: 25px;
 }
 
 #profile-img img {
     width: 175px;
     height: 175px;
     border-radius: 50%;
     background-size: contain;
     -webkit-box-shadow: 0px 0px 1px;
             box-shadow: 0px 0px 1px;
 }
 
 #about-top h1 {
     color: var(--title-color);
     font-size: 60px;
     text-align: center;
     
 }
 #about-top h3 {
     color: var(--title-color);
     font-size: 20px;
     text-align: center;
     font-weight: 400;
     
 }
 
 #about-bottom {
     width: 100%;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
 
 #about-bottom p {
     color: black;
     font-size: 18px;
     background: whitesmoke;
     max-width: 850px;
     padding: 20px;
     border-radius: 20px;
     line-height: 24px;
     margin: 20px;
 }
 
 
 @media only screen and (max-width: 430px) {
    
     #about-top h1 {
         font-size: 50px;
     }
     #about-top h3 {
         font-size: 20px;
     }
     #profile-img img{
         width: 150px;
         height: 150px;
     }
     #about-bottom p {
         font-size: 16px;
         width: 90%;
     }
 }
 
 
 /*==============================
              Skill Section
 ================================ */
 
 
 #skills-section { 
     width: 100%;
     height: 100%;
     background: var(--skills-background);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
 }
 
 #skills-title {
     color: var(--title-color);
     font-size: 60px;
     text-align: center;
     margin: 50px;
     
 }
 
 #skills-container {
     width: 80%;
     height: 100%;
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 0.18fr 10px 0.18fr 10px 0.18fr 10px 0.18fr;
     grid-template-columns: repeat(5, 0.18fr);
     -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
             column-gap: 10px;
    -webkit-row-gap: 20px;
        -moz-row-gap: 20px;
             row-gap: 20px;
     margin-bottom: 85px;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -ms-flex-line-pack: center;
         align-content: center;
 }
 
 .skills-card {
     width: 10rem;
     height: 14rem;
     background: whitesmoke;
     border-radius: 20px;
     -webkit-box-shadow: 0px 0px 5px 0px;
             box-shadow: 0px 0px 5px 0px;
     -ms-grid-column-align: center;
         justify-self: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
}
 
 .skills-top {
     width: 100%;
     height: 100%;
 }
 
 .skills-bottom {
     font-size: 1.2rem;
 }
 
 .html-card {
     background: url(./Images/HTML.png);
    
 }
 .css-card {
     background: url(./Images/CSS.png);
     
 }
 .js-card {
     background: url(./Images/JS.png)
 }
 .ps-card {
     background: url(./Images/PS.png)
 }
 .sass-card {
    background: url(./Images/Sass.png);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}

 .html-card, .css-card, .js-card, .ps-card {
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
 }

 @media only screen and (max-width: 855px) {
     #skills-container {
         grid-template-columns: repeat(4, 1fr);
     }
 }
 
 
 @media only screen and (max-width: 690px) {
     #skills-container {
         -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
         grid-template-columns: repeat(3, 1fr);
         height: 100%;
         gap: 20px;
        }
        #skills-title {
            font-size: 50px;
            width: 100%;
        }
 }

 @media only screen and (max-width: 530px) {
     #skills-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media only screen and (max-width: 370px) {
    .skills-card {
        -webkit-transform: scale(0.8);
            -ms-transform: scale(80%);
                transform: scale(80%);
    }
    #skills-title {
        font-size: 40px;
        width: 100%;
    }
 }

 @media only screen and (max-width: 315px) {
     #skills-container {
         grid-template-columns: repeat(1, 1fr);
     }
     #skills-title {
        font-size: 20px;
        width: 100%;
    }
 }

 
 /*==============================
         Portfolio Section
 ================================ */
 
 
 #portfolio-section {
     width: 100%;
     height: 100%;
     background: var(--portfolio-background);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
 }
 
 #portfolio-title {
     margin-top: 50px;
     margin-bottom: 100px;
 }
 
 #portfolio-title h1 {
     color: var(--title-color);
     font-size: 60px;
     text-align: center;
     
 }
 
 #portfolio-container {
     margin-bottom: 100px;
     width: 80%;
     height: 100%;
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 0.4fr 10px 0.4fr;
     grid-template-columns: repeat(2, 0.4fr);
     gap: 10px;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
 }
 
 .portfolio-card {
     width: 25rem;
     height: 18.75rem;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -ms-grid-column-align: center;
         justify-self: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     border-radius: 20px;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-shadow: 0px 0px 5px 0px;
             box-shadow: 0px 0px 5px 0px;
 }
 
 .portfolio-top {
     width: 100%;
     height: 15%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     border-radius: 20px 20px 0 0;
     background: whitesmoke;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
 }
 
 .portfolio-top h2 {
     font-size: 1.3rem;
     font-weight: 400;
 }
 
 .portfolio-bottom {
     width: 100%;
     height: 85%;
     border-radius: 0px 0px 20px 20px;
 }
 
 
 #weather-app, #filter-shop {
     width: 100%;
     height: 100%;
     border-radius: 0px 0px 20px 20px;
 }
 
 #weather-app {
     background: url(./Images/weather_app.png);
     background-size: 130%;
     background-position: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
 
 #filter-shop {
     background: url(./Images/filter_shop.png);
     background-size: 110%;
     background-position: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
 
 #weather-app:hover, #filter-shop:hover {
     background-image: -o-linear-gradient(left bottom, #b15fff, #9d74ff, #8d84ff, #8391fd, #7f9cf5, #71a9f9, #69b4fa, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
     background-image: -webkit-gradient(linear, left bottom, right top, from(#b15fff), color-stop(#9d74ff), color-stop(#8d84ff), color-stop(#8391fd), color-stop(#7f9cf5), color-stop(#71a9f9), color-stop(#69b4fa), color-stop(#69bff8), color-stop(#52cffe), color-stop(#41dfff), color-stop(#46eefa), to(#5ffbf1));
     background-image: linear-gradient(to right top, #b15fff, #9d74ff, #8d84ff, #8391fd, #7f9cf5, #71a9f9, #69b4fa, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
 
 }
 
 #weather-app p, #filter-shop p {
     visibility: hidden;
     width: 22rem;
     color: white;
     text-align: center;
     font-size: 1.2rem;
     font-family: 'Roboto Condensed', sans-serif;
 }
 
 .app-btn {
     visibility: hidden;
     width: 7rem;
     height: 2rem;
     font-size: 1rem;
     background: rgb(13, 226, 84);
     color: white;
     font-family: 'Fira Code', monospace;

  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 2px black;
          box-shadow: 0px 0px 2px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
 }
 
 #weather-app:hover > a, #weather-app:hover > p {
     visibility: visible;
     
 }
 
 #filter-shop:hover > a, #filter-shop:hover > p {
     visibility: visible;
     
 }



 @media only screen and (max-width: 830px) {
     #portfolio-container {
        grid-template-columns: repeat(1, 1fr);
     }
     #portfolio-title h1{
         font-size: 50px;
     }
 }

 @media only screen and (max-width: 413px) {
    #portfolio-container {
        width: 100%;
        -webkit-column-gap: 50px;
           -moz-column-gap: 50px;
                column-gap: 50px;
    }
     .portfolio-card {
        width: 18.75rem;
        height: 15.625rem;
     }
     #weather-app p, #filter-shop p {
        width: 100%;
        color: white;
        text-align: center;
        font-size: 1rem;
        font-family: 'Roboto Condensed', sans-serif;
    }
    #portfolio-title h1 {
        font-size: 40px;
    }
 }

 @media only screen and (max-width: 338px) {
     #portfolio-title h1 {
         font-size: 25px;
     }
 }

 @media only screen and (max-width: 338px) {
    .portfolio-card {
        width: 100%;
    }
}
 
 /*==============================
         Contact Section
 ================================ */
 
 #contact-title {
     margin: 50px;
     width: 100%;
 }
 
 #contact-title h1 {
     color: var(--title-color);
     font-size: 60px;
     text-align: center;
 }
 
 
 #contact-section {
     width: 100%;
     height: 100%;
     background: var(--contact-background);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
 
 #contact-container {
     margin-top: 25px;
     margin-bottom: 100px;
     width: 40rem;
     height: 27rem;
     border-radius: 20px;
     background-image: -o-linear-gradient(left bottom, #b15fff, #9d74ff, #8d84ff, #8391fd, #7f9cf5, #71a9f9, #69b4fa, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
     background-image: -webkit-gradient(linear, left bottom, right top, from(#b15fff), color-stop(#9d74ff), color-stop(#8d84ff), color-stop(#8391fd), color-stop(#7f9cf5), color-stop(#71a9f9), color-stop(#69b4fa), color-stop(#69bff8), color-stop(#52cffe), color-stop(#41dfff), color-stop(#46eefa), to(#5ffbf1));
     background-image: linear-gradient(to right top, #b15fff, #9d74ff, #8d84ff, #8391fd, #7f9cf5, #71a9f9, #69b4fa, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
     font-family: 'Roboto Condensed', sans-serif;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     text-align: center;
     color: white;
     text-shadow: 0px 0px 1px black;
     position: relative;
     overflow: hidden;
     
 }

#contact-container-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 40%
    
}

 
 #contact-container-title h1 {
     font-size: 2.5rem;
 
 }
 
 #contact-container-title p {
     font-size: 1.2rem;
     width: 60%;
    

 }
 
 #contact-links {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-evenly;
         -ms-flex-pack: space-evenly;
             justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 60%;
    height: 5rem;
    
}

#linkedin a, #email a, #github a {
    color: white;
}

.fa-linkedin, .fa-envelope-square, .fa-github-square {
    -webkit-transform: scale(2.75);
        -ms-transform: scale(275%);
            transform: scale(275%);
}

.fa-linkedin:hover, .fa-envelope-square:hover, .fa-github-square:hover {
    color: #39ffeb;
     text-shadow: 0px 0px 1px #78FFF1;
}



 
 .particles {
     position: absolute;
     width: 100px;
     height: 100px;
     border-radius: 10px;
     border: solid white;
     -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
             transform: rotate(45deg);
     background: white;
     opacity: 0.2;
 }
 
 
 .particles:nth-child(1) {
     right: 40px;
     top: -120px;
     -webkit-animation: 25s particles1 linear infinite;
             animation: 25s particles1 linear infinite;
 }
 
 .particles:nth-child(2) {
     width: 75px;
     height: 75px;
     left: 60px;
     top: -95px;
     z-index: 0;
     -webkit-animation: 25s particles2 5s linear infinite;
             animation: 25s particles2 5s linear infinite;
 }
 
 .particles:nth-child(3) {
     width: 150px;
     height: 150px;
     top: -245px;
     left: 250px;
     -webkit-animation: 25s particles3 12s linear infinite;
             animation: 25s particles3 12s linear infinite;
 }
 
 .particles:nth-child(4) {
     width: 110px;
     height: 110px;
     left: 100px;
     top: -185px;
     -webkit-animation: 25s particles4 17s linear infinite;
             animation: 25s particles4 17s linear infinite;
 }
 
 @-webkit-keyframes particles1 {
     from {right: 40px; top: -120px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {right: 40px; top: 670px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @keyframes particles1 {
     from {right: 40px; top: -120px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {right: 40px; top: 670px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @-webkit-keyframes particles2 {
     from {left: 60px; top: -95px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {left: 60px; top: 670px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @keyframes particles2 {
     from {left: 60px; top: -95px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {left: 60px; top: 670px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @-webkit-keyframes particles3 {
     from {left: 250px; top: -245px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {left: 250px; top: 680px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @keyframes particles3 {
     from {left: 250px; top: -245px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to {left: 250px; top: 680px; -webkit-transform: rotate(405deg); transform: rotate(405deg);}
 }
 
 @-webkit-keyframes particles4 {
     from {left: 100px; top: -185px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to { left: 100px; top: 675px; -webkit-transform: rotate(405deg); transform: rotate(405deg); }
 }
 
 @keyframes particles4 {
     from {left: 100px; top: -185px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
     to { left: 100px; top: 675px; -webkit-transform: rotate(405deg); transform: rotate(405deg); }
 }


@media only screen and (max-width: 655px) {
    #contact-container {
        width: 90%;
    }
    #contact-title h1 {
        font-size: 50px;
    }
}

@media only screen and (max-width: 480px) {
    #contact-container-title h1 {
        font-size: 1.8rem;
    
    }
    
    #contact-container-title p {
        font-size: 1rem;
        width: 80%;
    }

    #contact-links {
        width: 80%;
    }
    #contact-title h1 {
        font-size: 40px;
    }
}

@media only screen and (max-width: 299px) {
    #contact-title h1 {
        font-size: 25px;
    }
}
 
 /*==============================
         Footer Section
 ================================ */
 
 footer {
     width: 100%;
     height: 5rem;
     background: var(--footer-background);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
 }
 footer p {
     color: white;
 }