/* =====================================
   ACCOUNT PAGE
===================================== */

.account-page {
  width: 92%;
  max-width: 1000px;

  margin: 0 auto;

  padding: 65px 0 120px;

  position: relative;
}


/* =====================================
   PAGE HEADER
===================================== */

.account-header {
  text-align: center;

  margin-bottom: 55px;
}

.account-header h1 {
  margin-bottom: 12px;

  font-size: clamp(40px, 6vw, 62px);

  line-height: 0.95;

  letter-spacing: -3px;

  transform: rotate(1deg);
}

.account-header h1::after {
  content: " ✦";

  color: var(--pink);

  -webkit-text-stroke: 2px var(--black);
}

.account-header p {
  color: var(--gray);

  font-size: 15px;
}


/* =====================================
   WOODEN PROFILE BOARD
===================================== */

.profile-board {
  position: relative;

  padding: 38px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    #b97945;

  background-size: 18px 18px;

  border: 4px solid var(--black);

  border-radius: 8px;

  box-shadow:
    8px 8px 0 var(--black),
    14px 14px 0 rgba(0, 0, 0, 0.1);

  transform: rotate(-0.7deg);
}


/* Wood grain */

.profile-board::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.25;

  background:
    repeating-linear-gradient(
      5deg,
      transparent,
      transparent 18px,
      rgba(70, 35, 15, 0.25) 19px,
      transparent 21px
    );
}


/* Pin */

.board-pin {
  position: absolute;

  top: -13px;
  left: 50%;

  width: 23px;
  height: 23px;

  transform: translateX(-50%);

  background: var(--pink);

  border: 3px solid var(--black);

  border-radius: 50%;

  box-shadow: 2px 2px 0 var(--black);

  z-index: 3;
}

.board-pin::after {
  content: "";

  position: absolute;

  top: 3px;
  left: 4px;

  width: 5px;
  height: 5px;

  background: rgba(255, 255, 255, 0.7);

  border-radius: 50%;
}


/* =====================================
   PROFILE CONTENT
===================================== */

.profile-content {
  position: relative;

  display: grid;

  grid-template-columns: 220px minmax(0, 1fr);

  gap: 45px;

  align-items: center;

  padding: 30px;

  background: rgba(255, 250, 225, 0.95);

  border: 3px solid var(--black);

  border-radius: 5px;

  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}


/* =====================================
   PROFILE PICTURE
===================================== */

.profile-picture-section {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;
}

.profile-picture {
  width: 145px;
  height: 145px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--blue);

  border: 5px solid var(--black);

  border-radius: 50%;

  box-shadow: 6px 6px 0 var(--black);

  font-size: 48px;
  font-weight: bold;

  transform: rotate(-4deg);
}

.change-picture-button {
  padding: 9px 13px;

  background: var(--white);

  border: 3px solid var(--black);

  border-radius: 9px;

  font-family: inherit;

  font-size: 12px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 3px 3px 0 var(--black);

  transition: 0.15s;
}

.change-picture-button:hover {
  transform: translate(2px, 2px);

  box-shadow: 1px 1px 0 var(--black);
}


/* =====================================
   PROFILE INFO
===================================== */

.profile-info {
  min-width: 0;
}

.profile-heading {
  margin-bottom: 25px;
}

.profile-stamp {
  display: inline-block;

  margin-bottom: 8px;

  padding: 4px 8px;

  background: var(--pink);

  border: 2px solid var(--black);

  border-radius: 6px;

  font-size: 9px;
  font-weight: bold;

  transform: rotate(-2deg);
}

.profile-heading h2 {
  margin-bottom: 5px;

  font-size: 26px;

  letter-spacing: -1px;
}

.profile-heading p {
  color: var(--gray);

  font-size: 13px;

  line-height: 1.5;
}


/* =====================================
   PROFILE FORM
===================================== */

.profile-form {
  display: flex;

  flex-direction: column;

  gap: 17px;
}

.account-field {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.account-field label {
  font-size: 12px;

  font-weight: bold;
}

.account-field input {
  width: 100%;

  padding: 11px 13px;

  background: #ffffff;

  border: 3px solid var(--black);

  border-radius: 8px;

  color: var(--black);

  font-family: inherit;

  font-size: 13px;

  outline: none;

  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);

  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.account-field input::placeholder {
  color: #999;
}

.account-field input:focus {
  transform: translate(-1px, -1px);

  box-shadow: 5px 5px 0 var(--black);
}

.account-field input:disabled {
  background: #e8e4d8;

  color: #888;

  cursor: not-allowed;
}

.account-field small {
  color: #777;

  font-size: 10px;
}


/* =====================================
   SAVE PROFILE
===================================== */

.save-profile-button {
  align-self: flex-start;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 16px;

  background: var(--green);

  border: 3px solid var(--black);

  border-radius: 10px;

  font-family: inherit;

  font-size: 13px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 4px 4px 0 var(--black);

  transition: 0.15s;
}

.save-profile-button:hover {
  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--black);
}


/* =====================================
   CARDBOARD ACCOUNT FOLDER
===================================== */

.account-folder {
  position: relative;

  margin-top: 70px;

  padding-top: 20px;

  transform: rotate(0.7deg);
}


/* Folder tab */

.folder-tab {
  position: absolute;

  top: 0;
  left: 28px;

  padding: 9px 25px 13px;

  background: #c99761;

  border: 4px solid var(--black);

  border-bottom: none;

  border-radius: 10px 10px 0 0;

  font-size: 10px;
  font-weight: bold;

  letter-spacing: 1px;

  z-index: 2;
}


/* Folder */

.folder-content {
  position: relative;

  padding: 38px 38px 32px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 6px
    ),
    #d5a873;

  border: 4px solid var(--black);

  border-radius: 6px;

  box-shadow:
    8px 8px 0 var(--black),
    13px 13px 0 rgba(0, 0, 0, 0.1);
}


/* =====================================
   FOLDER SECTIONS
===================================== */

.folder-section {
  display: grid;

  grid-template-columns: 58px minmax(0, 1fr);

  gap: 20px;

  align-items: start;
}


/* Icons */

.folder-section-icon {
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--yellow);

  border: 3px solid var(--black);

  border-radius: 10px;

  box-shadow: 4px 4px 0 var(--black);

  font-size: 22px;

  transform: rotate(-3deg);
}


/* Text */

.folder-section-content {
  min-width: 0;
}

.folder-section-label {
  display: inline-block;

  margin-bottom: 6px;

  color: #705334;

  font-size: 9px;
  font-weight: bold;

  letter-spacing: 1.2px;
}

.folder-section-content h2 {
  margin-bottom: 7px;

  color: #3e2c1d;

  font-size: 22px;

  letter-spacing: -0.5px;
}

.folder-section-content p {
  max-width: 600px;

  margin-bottom: 20px;

  color: #66513a;

  font-size: 13px;

  line-height: 1.6;
}


/* =====================================
   FOLDER BUTTON
===================================== */

.folder-action-button {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 11px 15px;

  border: 3px solid var(--black);

  border-radius: 9px;

  font-family: inherit;

  font-size: 12px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 4px 4px 0 var(--black);

  transition: 0.15s;
}

.folder-action-button:hover {
  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--black);
}


/* Password */

.password-button {
  background: var(--blue);

  color: var(--black);
}


/* =====================================
   FOLDER DIVIDER
===================================== */

.folder-divider {
  display: flex;

  align-items: center;

  gap: 15px;

  margin: 35px 0;

  color: #8a6d4b;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.folder-divider::before,
.folder-divider::after {
  content: "";

  flex: 1;

  height: 2px;

  border-top: 2px dashed #a98760;
}

.folder-divider span {
  white-space: nowrap;
}


/* =====================================
   DELETE SECTION
===================================== */

.delete-section {
  padding: 20px;

  background: rgba(255, 239, 235, 0.72);

  border: 3px dashed #a93636;

  border-radius: 5px;
}

.delete-icon {
  background: #ff8a8a;

  color: #7f2929;

  transform: rotate(3deg);
}

.delete-label {
  color: #a93636;
}

.delete-section .folder-section-content h2 {
  color: #8c3030;
}

.delete-section .folder-section-content p {
  color: #805c5c;
}


/* Delete button */

.delete-button {
  background: #ffffff;

  border-color: #a93636;

  color: #a93636;

  box-shadow: 4px 4px 0 #a93636;
}

.delete-button:hover {
  background: #a93636;

  color: #ffffff;

  box-shadow: 2px 2px 0 #7f2929;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 900px) {

  .profile-content {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .profile-picture-section {
    flex-direction: row;

    justify-content: center;
  }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {

  .account-page {
    width: 94%;

    padding-top: 45px;
  }

  .account-header {
    margin-bottom: 40px;
  }

  .account-header h1 {
    letter-spacing: -2px;
  }


  /* Wooden board */

  .profile-board {
    padding: 20px;

    transform: rotate(0);
  }

  .profile-content {
    padding: 22px 18px;
  }

  .profile-picture-section {
    flex-direction: column;
  }

  .profile-picture {
    width: 120px;
    height: 120px;

    font-size: 40px;
  }


  /* Folder */

  .account-folder {
    margin-top: 55px;

    transform: rotate(0);
  }

  .folder-content {
    padding: 35px 18px 20px;
  }

  .folder-section {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .folder-section-icon {
    width: 46px;
    height: 46px;
  }

  .folder-section-content h2 {
    font-size: 19px;
  }

  .folder-action-button {
    width: 100%;

    justify-content: center;
  }

  .delete-section {
    padding: 17px;
  }

}


/* =====================================
   VERY SMALL SCREENS
===================================== */

@media (max-width: 400px) {

  .account-page {
    width: 95%;
  }

  .profile-content {
    padding: 18px 14px;
  }

  .folder-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .folder-tab {
    left: 15px;

    padding-left: 17px;
    padding-right: 17px;
  }

}