html {
      scroll-behavior: smooth;
    }
    
    

    
    .back {
          /* stay fixed like a background */
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-fit: cover; /* scale without stretching */
      z-index: -1;
      background-image: url("../img/finally.jpg");   
      background-size: cover;
    }

    .boreal {
      width: 100%;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
    }

    .snow {
      width: 100%;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
    }
    body {
      margin: 0;
      padding: 0;
      height: 300vh;
      background-color: black;
    }

    body img {
      margin-bottom: 2px;
      margin-top: 2px;
    }

    p {
        color: white;
        font-family: "Prince";
    }
    
    .home-title {
      position: absolute;
      top: 200px;
      left: 50px;
      color: rgb(173, 38, 38);
      font-family: "Prince";
      text-shadow: 0 0 5px rgb(160, 43, 43);
    }

    .home-text {
      margin-bottom: 0;
      font-family: "Prince";
      font-weight: 500;
      font-size: 100px;
      color: rgb(173, 38, 38);
      text-shadow: 0 0 5px rgb(160, 43, 43);
    }

    .desc {
      font-family: "Prince";
      margin-top: 0;
      font-size: 50px;
      margin-bottom: 0;
    }

      .desc1 {
      font-family: "Prince";
      margin-top: 0;
      font-size: 50px;
    }

    .aboutme-section {
      height: 100vh;
      width: 100%;
      background-image: url("../img/boreal.png");
      background-size: cover;
    }

    .about-me {
        position: absolute;
        right: 50%;
        margin-top: 50px;
        font-size: 100px;
        transform: translateX(50%);
    }

    .square1 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        width: 800px;
        height: 500px;
        right: 50%;
        top: 125vh;
        transform: translateX(50%);

    }

    .square1-desc {
      font-size: 30px;
      margin-left: 20px;
      margin-left: 20px;
      line-height: 35px;
    }


    .grid-projects {
      width: 100%;
      height: 100vh;
      background-image: url("../img/araindel.png");
      background-size: cover;
      background-color: rgba(240, 128, 128, 0.6);
      background-repeat: no-repeat;
      display: grid;
      grid-template-columns: 20% 20% 20% 20% 20%;
      grid-template-rows: 20% 20% 20% 20% 20%;
      align-items: center;
    }

    .sketch-tag {
      color: rgb(51, 111, 241);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .sketch-tag:visited {
      color: #3767cc;
    }
    .sketch-tag:hover {
      color: #242f91;
    }
    .sketch-tag:active {
      color: #205497aa;     
    }

        .projekt1{
      width: 100%;
      height: 100%;
      grid-row: 2 / 3;
      grid-column: 2/3;
      background-color: aliceblue;
      display:flex;
      justify-content: space-around;
      align-items: center;
    }


        .projekt2{
      width: 100%;
      height: 100%;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      background-color: aliceblue;
      display:flex;
      justify-content: space-around;
      align-items: center;
    }

            .projekt3{
      width: 100%;
      height: 100%;
      grid-row: 2 / 3;
      grid-column: 4 / 5;
      background-color: aliceblue;
      display:flex;
      justify-content: space-around;
      align-items: center;
    }

            .projekt4{
      width: 100%;
      height: 100%;
      grid-row: 4 / 5;
      grid-column: 4 / 5;
      background-color: aliceblue;
      display:flex;
      justify-content: space-around;
      align-items: center;
    }

    .contacts-section {

      width: 100%;
      height: 100vh;
      background-image: url("../img/end.png");
      background-size: cover;
      background-color: rgba(240, 128, 128, 0.6);
      background-repeat: no-repeat;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: 1fr auto 1fr;
      align-items: center;
    }

    .projekt1, .projekt2, .projekt3, .projekt4 {
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: transform 0.3s;
      cursor: pointer;
    }


    .projekt1:hover, .projekt2:hover, .projekt3:hover, .projekt4:hover {
      transform: scale(1.2);
    }

    .contacts {
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-evenly;
      width: 750px;
      height: 550px;
            grid-column: 2/3;
      grid-row: 2/3;
    }



    input {
      border-style: solid;
      font-size: 20px;
      border-radius: 5px;
      color: white;
      margin: 10px 10px 10px 10px;
      width: 80%;
      background-color: rgba(0, 0, 0, 0.5);
    }


    textarea {
      margin-left: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 50px;
      text-align: left;
      vertical-align: top;
      box-sizing: border-box;
      line-height: normal;
      height: 200px;
    }

    .send {
      padding: 15px 50px;
      border-radius: 5px;
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
      border: none;
      cursor: pointer;
      margin-left: 200px;
      transition: background-color 1s;
}

  .send:hover {
    background-color: rgb(22, 20, 20);
  }

@media (max-width: 712px) {




          .projekt1{
      width: 100%;
      height: 60%;

    }


        .projekt2{
      width: 100%;
      height: 60%;

    }

            .projekt3{
      width: 100%;
      height: 60%;

    }

            .projekt4{
      width: 100%;
      height: 60%;

    }


      .home-text {

      font-size: 40px;

    }

    .square1-desc {
      font-size: 25px;
    }

    .contacts {
      grid-row: 2 / 3;
      grid-column: 3 / 4;
    }


    p {
      font-size: 20px;
    }

    form {
      width: 100%;
      height: 100%;
    }

    input {
      width: 200px;
    }

        .desc {

      font-size: 20px;
    }

      .desc1 {
      font-size: 20px;
    }


    textarea {
      width: 100%;
      height: 100%;
    }

      .square1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        width: 80%;
        height: 80%;
        right: 50%;
        top: 125vh;
        transform: translateX(50%);

      }

        .about-me {
        position: absolute;
        right: 50%;
        white-space: nowrap;
        margin-top: 50px;
        font-size: 60px;
        transform: translateX(50%);
    }

        .contacts {
          width: 50%;
          height: 50%;
        }


    }