/* styles of slider (Header) */
 @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;500;700&family=Montserrat:wght@500&family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     background-color: #1b1b22;
     overflow-x: hidden;
 }

 #header {
     display: flex;
     overflow: hidden;
     padding: 0 20px 5px 20px;
     margin-top: 0;
 }

 #header ul {
     display: flex;
     justify-content: space-around;
 }

 #header ul li {
     list-style: none;
     padding: 15px 15px;
 }

 #header ul li a {
     text-decoration: none;
     font-size: 16px;
     transition: 0.3s ease-in-out;
     color: #f4f4f4;
     font-weight: 400;
 }

 #header ul li a:hover {
     border-bottom: 4px solid #FF0266;
 }

 #header ul li img {
     margin-right: 30px;
 }

 .toggle {
     display: none;
 }

 @media (max-width: 749px) {
     #header ul {
         position: absolute;
         top: -100%;
         left: 0;
         width: 100%;
         height: calc(100vh- 80px);
         padding: 50px 100px;
         text-align: center;
         overflow: auto;
         background-color: #1e1f26;
         flex-direction: column;
         opacity: 0;
     }

     .logo {
         color: #fff;
     }

     #header {
         background-color: #1e1f26;
     }

     #header.active1 ul {
         opacity: 1;
         top: 75px;
     }

     #header ul li a {
         margin: 5px 0;
         font-size: 24px;
         color: #fff;
     }

     .toggle {
         display: block;
         position: relative;
         width: 40px;
         height: 40px;
         background-image: url(https://img.icons8.com/material-outlined/48/ffffff/menu--v1.png);
         cursor: pointer;
     }

     #header.active1 .toggle {
         background-image: url(https://img.icons8.com/material-rounded/48/ffffff/multiply--v1.png);
         background-repeat: no-repeat;
     }
 }


 h3 {
     position: absolute;
     letter-spacing: 2px;
     text-align: left;
     color: #dcdcdc;
     background-color: #1b1b22;
     padding: 0.3em 3em 0.3em 1em;
     font-size: 16px;
     bottom: 20px;
     left: 10px;
     opacity: 0;
 }

 h3:hover {
     color: #fff;
 }

 .container {
     width: 100%;
     display: flex;
     padding: 0 20px;
     margin: 0;
 }

 .slide {
     height: 80vh;
     border-radius: 12px;
     margin: 10px;
     cursor: pointer;
     color: #fff;
     flex: 1;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
     transition: all 500ms ease-in-out;
     box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
 }

 .active {
     flex: 10;
 }

 .slide.active h3 {
     opacity: 1;
     transition: opacity 0.3s ease-in 0.4s;
 }

 a {
     text-decoration: none;
     color: #f4f4f4;
 }

 a:hover {
     color: #FF0266;
 }

 .container-header {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     margin: 0;
     padding: 0;
     background-color: #1b1b22;
     color: #f4f4f4;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     position: relative;
     top: 0;
     font-family: "Space Mono", monospace;
     overflow: hidden;
     color: #f4f4f4;
 }

 /* Black Middle Cards Styles: */
 .black-middle-card-container {
     width: 100vw;
     margin: 0;
     padding: 0;
     min-height: 130vh;
     background: #333;
     /* background-color: #1b1b22; */
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: consolas;
 }

 .container-cards {
     width: 1000px;
     position: relative;
     display: flex;
     justify-content: space-between;
 }

 .container-cards .card {
     position: relative;
     cursor: pointer;
 }

 .container-cards .card .face {
     width: 300px;
     height: 200px;
     transition: 0.5s;
 }

 .container-cards .card .face.face1 {
     position: relative;
     background: #333;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1;
     transform: translateY(100px);
 }

 .container-cards .card:hover .face.face1 {
     background: #ff0057;
     transform: translateY(0);
 }

 .container-cards .card .face.face1 .content {
     opacity: 0.2;
     transition: 0.5s;
 }

 .container-cards .card:hover .face.face1 .content {
     opacity: 1;
 }

 .container-cards .card .face.face1 .content img {
     max-width: 100px;
 }

 .container-cards .card .face.face1 .content h3 {
     margin: 10px 0 0;
     padding: 0;
     color: #fff;
     text-align: center;
     font-size: 1.5em;
 }

 .container-cards .card .face.face2 {
     position: relative;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
     box-sizing: border-box;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
     transform: translateY(-100px);
 }

 .container-cards .card:hover .face.face2 {
     transform: translateY(0);
 }

 .container-cards .card .face.face2 .content p {
     margin: 0;
     padding: 0;
 }

 .container-cards .card .face.face2 .content a {
     margin: 15px 0 0;
     display: inline-block;
     text-decoration: none;
     font-weight: 900;
     color: #333;
     padding: 5px;
     border: 1px solid #333;
 }

 .container-cards .card .face.face2 .content a:hover {
     background: #333;
     color: #fff;
 }

 /* The 3rd Content - Blurred cards */

 .blurredCard-container {
     width: 100vw;
     height: 110vh;
     font-family: 'Montserrat', sans-serif;
     font-size: 14px;
 }

 :root {
     --background-dark: #2d3548;
     --text-light: rgba(255, 255, 255, 0.6);
     --text-lighter: rgba(255, 255, 255, 0.9);
     --spacing-s: 8px;
     --spacing-m: 16px;
     --spacing-l: 24px;
     --spacing-xl: 32px;
     --spacing-xxl: 64px;
     --width-container: 1200px;
 }

 .hero-section {
     align-items: flex-start;
     background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
     display: flex;
     min-height: 100%;
     justify-content: center;
     padding: var(--spacing-xxl) var(--spacing-l);
 }

 .card-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-column-gap: var(--spacing-l);
     grid-row-gap: var(--spacing-l);
     max-width: var(--width-container);
     width: 100%;
 }

 @media(min-width: 540px) {
     .card-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(min-width: 960px) {
     .card-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .card-blur {
     list-style: none;
     position: relative;
 }

 .card-blur:before {
     content: '';
     display: block;
     padding-bottom: 150%;
     width: 100%;
 }

 .card__background {
     background-size: cover;
     background-position: center;
     border-radius: var(--spacing-l);
     bottom: 0;
     filter: brightness(0.75) saturate(1.2) contrast(0.85);
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transform-origin: center;
     transform: scale(1) translateZ(0);
     transition:
         filter 200ms linear,
         transform 200ms linear;
 }

 .card-blur:hover .card__background {
     transform: scale(1.05) translateZ(0);
 }

 .card-grid:hover>.card-blur:not(:hover) .card__background {
     filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
 }

 .card__content {
     left: 0;
     padding: var(--spacing-l);
     position: absolute;
     top: 0;
 }

 .card__category {
     color: var(--text-light);
     font-size: 0.9rem;
     margin-bottom: var(--spacing-s);
     text-transform: uppercase;
 }

 .card__heading {
     /* color: var(--text-lighter); */
     color: white;
     font-size: 1.9rem;
     text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
     line-height: 1.4;
     word-spacing: 100vw;
 }

 /* --------------------------- */
 /* Contact Info Section */

 .contact-info-container {
     width: 100vw;
     height: 40vh;
     background: linear-gradient(315deg, #ffffff, #d7e1ec);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .contact-info {
     width: 70%;
     height: 30vh;
     box-shadow: 0 0 10px black;
     border-radius: 50px;
     display: grid;
     font-family: "Poppins", sans-serif;
     place-items: center;
     align-content: center;
     justify-content: center;
     justify-items: center;
 }

 .wrapper {
     display: inline-flex;
     list-style: none;
 }

 .wrapper .icon {
     position: relative;
     background: #ffffff;
     border-radius: 50%;
     padding: 15px;
     margin: 10px;
     width: 50px;
     height: 50px;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 .wrapper .tooltip {
     position: absolute;
     top: 0;
     font-size: 14px;
     background: #ffffff;
     color: #ffffff;
     padding: 5px 8px;
     border-radius: 5px;
     box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
     opacity: 0;
     pointer-events: none;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 .wrapper .tooltip::before {
     position: absolute;
     content: "";
     height: 8px;
     width: 8px;
     background: #ffffff;
     bottom: -3px;
     left: 50%;
     transform: translate(-50%) rotate(45deg);
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 .wrapper .icon:hover .tooltip {
     top: -45px;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }

 .wrapper .icon:hover span,
 .wrapper .icon:hover .tooltip {
     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
 }

 .wrapper .facebook:hover,
 .wrapper .facebook:hover .tooltip,
 .wrapper .facebook:hover .tooltip::before {
     background: #1877F2;
     color: #ffffff;
 }

 .wrapper .twitter:hover,
 .wrapper .twitter:hover .tooltip,
 .wrapper .twitter:hover .tooltip::before {
     background: #1DA1F2;
     color: #ffffff;
 }

 .wrapper .instagram:hover,
 .wrapper .instagram:hover .tooltip,
 .wrapper .instagram:hover .tooltip::before {
     background: #E4405F;
     color: #ffffff;
 }

 .wrapper .github:hover,
 .wrapper .github:hover .tooltip,
 .wrapper .github:hover .tooltip::before {
     background: #333333;
     color: #ffffff;
 }

 .wrapper .youtube:hover,
 .wrapper .youtube:hover .tooltip,
 .wrapper .youtube:hover .tooltip::before {
     background: #CD201F;
     color: #ffffff;
 }

 #icons {
     color: inherit;
 }

 /* --------------------------- */
 /* The Universe Part */
 .universe-container {
     overflow: hidden;
 }

 .star0 {
     height: 1px;
     width: 1px;
     opacity: 1;
     position: absolute;
 }

 .star1 {
     height: 2px;
     width: 2px;
     border-radius: 50%;
     opacity: 1;
     position: absolute;
 }

 .star2 {
     height: 3px;
     width: 3px;
     border-radius: 50%;
     opacity: 1;
     position: absolute;
 }

 .star3 {
     height: 4px;
     width: 4px;
     border-radius: 50%;
     opacity: 1;
     position: absolute;
 }