@font-face {
  font-family: 'Orbitron';
  src: url('https://webdevspartan.com/manage/wp-content/themes/shadow_theme/assets/fonts/Orbitron-Regular.woff2') format('woff2'),
       url('https://webdevspartan.com/manage/wp-content/themes/shadow_theme/assets/fonts/Orbitron-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('https://webdevspartan.com/manage/wp-content/themes/shadow_theme/assets/fonts/Orbitron-Bold.woff2') format('woff2'),
       url('https://webdevspartan.com/manage/wp-content/themes/shadow_theme/assets/fonts/Orbitron-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #f4f4f4;
    scroll-behavior: smooth;
  }
  
  
  a {
    text-decoration: none;
    color: #27374D; 
    transition: color 0.3s;
  }

  .img-fluid {
    width: 100%;
  }

  .img-large {
    max-width: 500px;
  }

  /* FRONT PAGE */

  .l-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  .hero-container {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #1C1C1C;
    padding: 50px 25px 50px 25px;
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 50px 50px 50px 50px;
  }

  .hero-text1, .hero-text2 {
    text-align: left;
    font-size: 50px;
  }

  .hero-text2 {
    font-weight: bold;
    color: #DA1F26;
  }

  .hero-info-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #f4f4f4;
    font-family: 'Orbitron', sans-serif;
    font-size: 75px;
    padding: 25px;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
  }

  .portrait {
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .svg_frame {
    position: relative;
    z-index: 1;
  }
  .svg_frame img {
    width: 580px;
    height: 633px;  
  }
  
  .skill-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    font-weight: bold;
  }

  .skill-header__child {
    padding: 20px;
  }

  .skill-header img {
    height: 200px;
  }

  .skill-body {
    gap: 30px;
    font-size: 20px;
    font-weight: bold;
  }
    
  .skill-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 50px;
  }

  .skill-points-box {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 0 50px 0;
  }

  .skill-points__child {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 30px;
  }

  
  .circle {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: #DA1F26;
    border-radius: 50%;
    margin: 10px;
  }
    
  
  .my-works-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    padding: 50px 20px 100px 20px;
  }

  .my-works-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    font-weight: bold;
    text-wrap: nowrap;
  }

  .my-works-header__child {
    padding: 20px;
  }

  .my-works-header img {
    height: 100px;
  }

  .my-works-body {
    gap: 30px;
    font-size: 20px;
    font-weight: bold;
  }

  .my-works-box {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr); 
    /* grid-template-rows: repeat(3, 1fr);     */
    gap: 50px; 
    padding: 50px 0px 50px 0px;
  }

  .my-works__child {
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .works-title {
      font-weight: bold;
  }
  
  .works-info {
      font-style: italic;
      font-size: 14px;
  }
  
  .works-desc {
      text-decoration: underline;
  }
  
  .works-image {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 300px;
    
  }

  .works-image img {
    height: 100%;
  }
  
  .square {
      object-fit: contain;
  }

  .demo-reel-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    max-width: 700px;
  }

  .demo-reel__child {
    width: 100%;
  }
  
  .appeal-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 100px;
  }

  .appeal-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 75px;
    font-weight: bold;
    padding-bottom: 30px;
  }

  .appeal-header__child {
    padding: 20px;
  }

  .appeal-image {
    max-width: 500px;
    padding-bottom: 30px;
  }

  .appeal-header img {
    width: 100px;
    height: 100px;
  }

  .appeal-text {
    text-wrap: wrap;
    text-align: justify;
    font-size: 24px;
    max-width: 800px;
  }

  .appeal-text p {
    margin-bottom: 20px;
  }
  
  .contact-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    padding: 100px 100px 0px 100px;
  }

  .contact-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 75px;
    font-weight: bold;
  }

  .contact-header img {
    width: 100px;
    height: 100px;
  }

  .contact-body .name-container, .contact-body .email-container, .contact-body .input-body-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

  }

  .contact-body .name,  .contact-body .email, .contact-body .input-body{
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    
  }

  .contact-body .wpcf7-text {
    height: 30px;
    border: 5px solid #DA1F26;
    outline: none; 
    box-shadow: none; 
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none;
  }
  .contact-body .wpcf7-textarea {
    border: 5px solid #DA1F26;
  }

  .submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .submit-button .wpcf7-form-control{
    appearance: none;
  background-color: transparent;
  border: 5px solid #DA1F26;
  box-sizing: border-box;
  color: #DA1F26;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  max-width: 150px;
  transform: skew(20deg);
  outline: none;
  padding: 16px 24px;
  text-align: center;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
  }

  .submit-button .wpcf7-form-control:disabled {
    pointer-events: none;
  }
  
  .submit-button .wpcf7-form-control:hover {
    color: #DA1F26;
    background-color: #1C1C1C;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
    font-weight: bold;
  }
  
  .submit-button .wpcf7-form-control:active {
    box-shadow: none;
    transform: translateY(0);
  }
  
  .site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  


.hero-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.hero-button {
  appearance: none;
  background-color: transparent;
  border: 5px solid #DA1F26;
  box-sizing: border-box;
  color: #DA1F26;
  cursor: pointer;
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  max-width: 250px;
  transform: skew(20deg);
  outline: none;
  padding: 16px 24px;
  text-align: center;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
}

.hero-button:disabled {
  pointer-events: none;
}

.hero-button:hover {
  color: #DA1F26;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.hero-button:active {
  box-shadow: none;
  transform: translateY(0);
}

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.back-top-button {
  margin: 25px;
  max-width: 100px;
  width: 100%;
  transition: transform 0.3s ease-out;
}

.back-top-button:hover {
  transform: translateY(-5px);
}

/* Animations */

@keyframes pulse {
  0%, 100% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(1.2); /* Enlarges */
  }
}

.pulse {

  animation: pulse 1.5s ease-in-out infinite; /* Pulses every 1.5 seconds */
}

@keyframes slide {
  0%, 100% {
    transform: translateX(0); /* Original position */
  }
  50% {
    transform: translateX(50px); /* Moves to the right */
  }
}

.slide {
  animation: slide 2s ease-in-out infinite; /* Slides every 2 seconds */
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* Start and end at the original position */
  }
  50% {
    transform: translateY(-30px); /* Move upward */
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite; /* Bounces every 1 second */
}


#particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    




/* Media sizes */


@media (max-width: 1024px) {

  

  .skill-points-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .skill-points__child {
    justify-content: left;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-container {
    flex-direction: column-reverse;
  }

  .hero-buttons {
    flex-direction: row;
  }

  .hero-button {
    width: 200px;
  }


  .skill-header {
    flex-direction: column;
  }
  .skill-header img {
    width: 150px;
    height: 100%;
  }

  .my-works-header {
    flex-direction: column;
  }
  .my-works-header img {
    width: 150px;
  }

  .my-works-box {
    grid-template-columns: auto;
  }


  .appeal-header {
    flex-direction: column;
  }

  .appeal-container {
    padding: 20px 10px;
  }

  
}

@media (min-width: 350px) and (max-width: 767px) {

  .hero-container {
    flex-direction: column-reverse;
  }

  .hero-buttons {
    flex-direction: column;
  }
  .hero-text {
    margin: 0 auto;
    padding-bottom: 40px;
    text-align: center;
  }
  
  .hero-text1, .hero-text2 {
    text-align: center;
    font-size: 50px;
  }

  .hero-button {
    width: 200px;
  }
  .img-large {
    max-width: 350px;
  }

  .skill-header {
    flex-direction: column;
    font-size: 45px;
  }
  .skill-header img {
    width: 150px;
    height: 100%;
  }

  .skill-points-box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .my-works-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 45px;
  }
  .my-works-header img {
    width: 150px;
  }

  .my-works-box {
    grid-template-columns: auto;
  }
  
  .works-image {
      justify-content: center;
      height: auto;
  }
  
  .works-image img {
     max-width: 350px;
      height: auto;
  }
  
  .works-title, .works-info {
    width: 350px;
  }

  .appeal-header {
    flex-direction: column;
  }

  .appeal-header__child {
    font-size: 45px;
  }

  .appeal-container {
    padding: 20px 10px;
  }

  .contact-header {
    font-size: 45px;
  }

  .contact-body .name-container{
    padding: 10px;
  }
  
  .contact-body .email-container{ 
    padding: 10px;
  }

  .contact-body .input-body-container {
    padding: 10px;
  }
}