@import url("./common.css");
@import url("./fonts.css");

main {
  .contact {
    width: 100%;
    height: calc(100vh - 320px);
    min-height: 400px;
    background-image: url(../imgs/contact/message-bottle.jpg);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .scroll-container {
      position: relative;
      width: 60%;
      height: 80%;
    }
    .scroll {
      cursor: url("../imgs/contact/feather.png") 0 0, pointer;
      position: relative;
      width: 100%;
      height: 100%;
      background-image: url("../imgs/contact/rolled-parchment-paper-right-part.png");
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h2 {
        margin-bottom: 12px;
        font-family: var(--font-rye);
        color: black;
        position: relative;
      }
      .form-container {
        width: 60%;
        height: 64%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: url("../imgs/contact/feather.png") 0 0, pointer;
        position: relative;
        textarea {
          cursor: url("../imgs/contact/feather.png") 0 0, pointer;
          background-color: transparent;
          border: none;
          margin-left: 2%;
          width: 120%;
          height: 100%;
          resize: none;
          padding: 12px;
          font-family: var(--font-special);
          font-size: 40px;
          color: #575655;
          &:focus {
            outline: none;
            border: none;
          }
          &::placeholder {
            font-family: var(--font-special);
            /* text-align: center; */
            font-size: 40px;
          }
        }
        button {
          font-family: var(--font-rye);
          font-size: 16px;
          border: 2px solid var(--color-yellow);
          border-radius: 5px;
          padding: 8px;
          background-color: var(--color-brown);
          margin-top: 12px;
          cursor: pointer;
          color: var(--color-yellow);
          &:hover {
            color: #fffb01;
          }
        }
      }
    }
    .left-roll {
      cursor: url("../imgs/contact/feather.png") 0 0, pointer;
      position: absolute;
      top: 0;
      left: 0;
      height: 103%;
      width: 15%;
      background-image: url("../imgs/contact/left-roll.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      /* filter: drop-shadow(50px 0px 20px rgba(0, 0, 0, 0.8)); */
      /* Keep this value for shadow */
    }
    /* Temp button for tests */
    .roll-btn {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 10px;
      cursor: pointer;
    }
  }
}

.center-placeholder {
  text-align: center;
}

@media (max-width: 768px) {
  main {
    .contact {
      width: 100%;
      height: calc( 100vh - 260px);
      .scroll-container {
        width: 80%;
      }
      .scroll {
        h2 {
          font-size: 16px;
        }
        .form-container {
          textarea {
            font-size: 24px;
            &::placeholder {
              font-size: 24px;
            }
          }
          button {
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media (max-width: 380px) {
  main {
    .contact {
      margin-top: 80px;
      width: 100%;
      height: calc(100vh - 80px);
      .scroll-container {
        position: relative;
        width: 100%;
        height: 80%;
      }
      .scroll {
        background-image: url("../imgs/contact/rolled-parchment-paper.png");
        h2 {
          margin-top: 20px;
          font-size: 18px;
        }
        .form-container {
          textarea {
            font-size: 24px;
          }
          &::placeholder {
            text-align: center;
            font-size: 24px;
          }
        }
        button {
          max-width: 180px;
          font-size: 14px !important;
        }
      }
    }
    .left-roll {
      display: none;
    }
  }
}