@use "vars" as *;

.section1 {
    padding: 1rem;
  
    &::before {
      background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
    }

    .content {
      text-align: left;
      max-width: 1024px;
      margin: 4rem auto auto;

      .portrait {
        text-align: right;
        margin-top: 0;
        //margin-right: -25rem;
    
        img {
          width: 350px;
          height: 350px;
          object-fit: cover;
          border-radius: 50%;
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
        }
      }
  
      h1 {
        font-size: 4rem;
        margin: -6rem 0 1rem;
        color: #5488bf;
        text-shadow: 0 0 9px #373737;
  
        .myname {
          font-style: normal;
          color: $text-color;
        }
      }
  
      .tagline {
        font-size: 1.7rem;
        text-align: left;
  
        .tagline-item {
          display: inline;
          margin-right: 0.7ch;

          .cursor {
            display: inline-block;
            animation: blink 1s steps(2, start) infinite;
            margin-left: 0.2ch;
          }
        }
      }
    }
  
    @media (max-width: 600px) {
      .content {
        margin: 0;
  
        .portrait {
          text-align: center;
          margin: 0;
  
          img {
            width: 200px;
            height: 200px;
          }
        }
  
        h1 {
          text-align: left;
          margin: 0 0 1ch 1.5rem;
          font-size: 2.7rem;
        }
  
        .tagline {
          display: block;
          margin-left: 1.5rem;
  
          .tagline-item {
            display: block;
            margin-bottom: 0.3rem;
          }
  
          .tagline-item:last-child {
            margin-bottom: 0;
            .cursor {
                margin-left: 0.4ch;
            }
          }
        }
      }
    }
  }
  
  // Blinking cursor animation
  @keyframes blink {
    0%, 100% { color: #fff0; }
    50% { color: #fff; }
  }