:root {
  --primary-color: #be9568;
  --secondary-color: #EED8B7;
  --additional-color: #7D512B;
  --text-primary-color: #F7E4C8;
  --text-secondary-color: #673C1F;
  --text-additional-color: #46270D;

  --skill-width: 75px;

  --modal-bg: #fff; 
  --modal-fg: #1f2937; 
  --modal-ok: #10b981; 
  --modal-err: #ef4444;
  --modal-ring: rgba(0,0,0,.06);
}

* {
  margin: 0;
  padding: 0;
}

h2 {
  color: var(--text-additional-color);
  font-size: 30px;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

input, textarea {
  width: 400px;
}

textarea {
  resize: none;
}

textarea::placeholder{
  color: black;
  font-size: 0.8em;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px linear-gradient(to right, var(--additional-color), var(--text-additional-color)) inset;
  -webkit-text-fill-color: var(--text-primary-color);
  transition: background-color 9999s ease-in-out 0s;
}



button {
  cursor: pointer;
  align-self: center;
  font-size: 18px;
  font-weight: 650;
  transition: all 0.1s ease-in-out;
  border-radius: 10px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5);   
}

button:active {
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, 0.5);   
  transform: translateY(1px);        
}

button:hover {
  filter: brightness(80%);
}

/* Header */

.header {
  background-color: var(--primary-color);
}

.header__wrap {
  max-width: 1040px;
  margin: 0 auto;
}

.header__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: end;
}

.header__item {
  margin-right: 30px
}

.header__link {
  font-size: 21px;
  font-weight: 24px;
  color: var(--text-primary-color);
}

.header__link:focus,
.header__link:active,
.header__link:hover {
  opacity: 0.75;
}

.intro {
  display: flex;
  justify-content: space-between;
}

.intro__wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 32px;
  color: var(--text-primary-color);
}

.intro__title {
  color: var(--text-secondary-color);
  font-weight: 800;
  margin-bottom: 20px;
}

.name {
  color: var(--text-primary-color);
  font-size: 48px;
}

.intro__subtitle {
  font-size: 0.7em;
  font-family: Montserrat;
}

.speciality__wrap {
  display: inline-block;
  background-color: var(--text-secondary-color);
  border: solid 5px var(--text-secondary-color);
  border-radius: 20px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5); 
  margin-left: 10px;
}

.speciality {
  color: var(--text-primary-color);
    font-size: 0.5em;
}

.intro {
  margin-right: 10%;
}

.img-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}

.intro__pic {
  position: absolute;
  top: 60px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:top;
  border-radius: 50%;
  border: 5px solid var(--primary-color);
}

/* Portfolio */

.portfolio {
  padding-top: 30px;
  background-color: var(--secondary-color);
}

.portfolio__header {
  margin-bottom: 30px;
}

.portfolio__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
  min-height: 500px;
  color: var(--text-additional-color);
}

.overview {
  position: relative;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
}

.overview__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.overview__background::before,
.overview__background::after {
  content: '';
  height: 100%;
}

.overview__background::before {
  flex: 6;
  background-color: var(--primary-color);
}

.overview__background::after {
  flex: 4;
  background: linear-gradient(to right, var(--primary-color), var(--additional-color));
}

.overview__wrap {
  padding-top: 20px;
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  margin-bottom: 50px;
  display: flex;
}

.carousel {
  position: relative;
  left: 100px;
  top: 50px;
  display: flex;
  justify-content: center;
  width: 80%;
  height: 500px;
  perspective: 1200px;
}

.card {
  width: 70%
}

.card-item {
  position: absolute;
  width: 150px;
  /*transition: transform 1s, ease, box-shadow 0.5s ease;*/
  transition: 1s ease;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;

  /*transition: 
    transform 0.5s cubic-bezier(.77,0,.18,1),
    opacity 0.5s cubic-bezier(.77,0,.18,1),
    box-shadow 0.4s;*/
}

.card_center {
  width: 550px;
  border: var(--primary-color) solid 2px;
  border-radius: 15px;
  /*transition: transform 0.3s, z-index 0.3s;
  transform: translateX(0);
  z-index: 2;*/
  background-color: var(--primary-color);

  /*transition: transform 1s, z-index 1s;*/
  transition: 1s ease;
  transform: scale(1.12) rotateY(0deg) translateX(0) translateY(-10px);
  z-index: 3;
  opacity: 1;
}

.card_center:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card_left {
  left: 50px;
  /*transform: translateX(-220px) scale(0.75);
  z-index: 1;*/

  transition: transform 2s ease;
  transform: scale(0.93) rotateY(30deg) translateX(-30px) translateY(30px);
  opacity: 0.65;
  z-index: 2;
}

.card_right {
  right: 50px;
  /*transform: translateX(220px) scale(0.75);
  z-index: 1;*/
  transition: 1s ease;
  transform: scale(0.93) rotateY(-30deg) translateX(30px) translateY(30px);
  opacity: 0.65;
  z-index: 2;
}

.card_right:hover,
.card_left:hover {
  z-index: 10;
}

.card_right .card__img, 
.card_left .card__img {
  width: 300px;  
}

.card_right .card__link,
.card_left .card__link {
  pointer-events: none;
}

.card_right .card__img:hover, 
.card_left .card__img:hover{
  transform: scale(1.1);
}

.card_right .card,
.card_left .card {
  display: none;
}

.card__wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;  
}

.card__wrap:hover {
  cursor: pointer;
  opacity: 150%;
}

.card {
  padding-right: 30px;
  padding-left: 20px;
  padding-bottom: 30px;
}

.card__header {
  font-size: 20px;
  font-weight: 800;
  padding-top: 10px;
  padding-bottom: 20px;
}

.card__description {
  padding-bottom: 20px;
}

.card__buttons {
  display: flex;
  gap: 20px;
}

.card__button {
  width: 100px;
  border: var(--additional-color) solid 2px;
  background-color: var(--additional-color);
}

.card__img__wrap {
  padding-right: 20px;
}

.card__img {
  width: 100%;
  position: relative;
  transition: transform 0.3s, z-index 0.3s; 
  z-index: 1;
}

.card_center .card__img {
  z-index: 1;
}

.about__wrap {
  padding-top: 20px;
  padding-bottom: 40px;
  width: 70%;
  font-size: 32px;
  color: var(--text-primary-color);
}

.about__description {
  font-size: 0.6em;
  font-family: Montserrat;
  padding-top: 15px;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: calc(80% - 16px);
  justify-content: space-evenly;
}

.skills-img {
  width: var(--skill-width);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skills-img:hover {
  transform: translateY(-5px); 
}


.skills__header {
  color: var(--text-primary-color);
}

/* Footer*/
.footer {
  background-color: var(--additional-color);
  padding-bottom: 30px;
}

.footer__wrap {
  max-width: 1040px;
  margin: 0 auto;
}

.contacts {
  padding-top: 20px;
}

.contacts__header {
  color: var(--text-primary-color);
  margin-bottom: 20px;

}

.contacts__wrap {
  max-width: 1040px;
  display: flex;
  gap: 50px
}

.input__wrap {
  position: relative;
  width: max-content;
  display: inline-block;
  border-radius: 4px;
}

.input__wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right, var(--additional-color), var(--text-additional-color));
  pointer-events: none;
  border-radius: 4px;
}

.input__wrap input,
.input__wrap textarea {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--text-primary-color);
  font-size: 18px;
  font-weight: 500;
}

.input__wrap input:focus,
.input__wrap textarea:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}

.input__wrap input:hover,
.input__wrap textarea:hover {
  cursor: pointer;
}

.form-contacts__email {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  border: none;
}

.form-contacts__info {
  margin-bottom: 20px;
}

.form-contacts__field {
  border: none;
}

.contacts__label {
width: 80px;
display: inline-block;
font-size: 18px;
font-weight: 500;
color: var(--text-primary-color);
}

.contacts__button {
  width: 200px;  
  background-color: var(--primary-color);
  border: solid 5px var(--primary-color);
  color: var(--text-additional-color);    
}

/*.contacts__button:active {
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, 0.5);   
  transform: translateY(1px);        
}

.contacts__button:hover {
  filter: brightness(95%);
}*/

.contacts-media {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.social-media {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.media-link {
  color: var(--text-primary-color);
  font-size: 1.2em;
}

.media-icon {
  width: 40px;
}

.media-icon:hover,
.media-link:hover {
  opacity: 75%;
}

/* Modal */
.dialog {
  width: min(92vw, 480px); 
  padding: 0; 
  border: 0;
  border-radius: 16px; 
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  background: var(--modal-bg); 
  color: var(--modal-fg);
}

.dialog::backdrop { 
  background: rgba(0,0,0,.45); 
  animation: fade .18s both; 
}

.dialog-body { 
  padding: 24px 24px 16px; 
  text-align: center; 
}

.icon { 
  width: 64px; 
  height: 64px; 
  margin: 8px auto 12px; 
  border-radius: 50%;
  display: grid; 
  place-items: center; 
  background: var(--modal-ring); 
}

.dialog.success .icon { 
  background: color-mix(in srgb, var(--modal-ok) 12%, #fff); 
}

.dialog.error .icon { 
  background: color-mix(in srgb, var(--modal-err) 12%, #fff); 
}
.icon::before { 
  content: ""; 
  width: 28px; 
  height: 28px; 
  display: block; 
}

.dialog.success .icon::before {
  /* tick */
  box-shadow: inset 0 0 0 9999px var(--modal-ok);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
}
.dialog.error .icon::before{
  /*cross */
  box-shadow: inset 0 0 0 9999px var(--modal-err);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>') center/contain no-repeat;
}

.modal__header { 
  margin: 0 0 6px; 
  font-size: 20px; 
}

.modal__status { 
  margin: 0 0 14px; 
  opacity: .85 
}

.actions { 
  display: flex; 
  gap: 8px; 
  justify-content: center; 
  padding: 8px 0 10px; 
}

.modal__btn { 
  padding: 10px 16px; 
  border-radius: 12px; 
  border: 0; 
  cursor: pointer; 
  background: #111827; 
  color: #fff; 
}

.modal__btn:focus { 
  outline: 2px solid transparent; 
  box-shadow: 0 0 0 4px var(--modal-ring); 
}

@keyframes fade { 
  from{opacity:0} to{opacity:1} 
}

@media (prefers-reduced-motion: reduce) {
  .dialog::backdrop { animation: none }
}

dialog[open] {
  margin: 0;                
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

@media (max-width: 1024px){
  .intro__wrap {
    padding: 15px 5px;
  }
  
  .overview__wrap {
    padding: 0 10px;
  }

  .skills__wrap {
    display: flex;
    flex-direction: column;
  }

  .skills-list {
    width: 100%;
    max-width: none;
    padding: 0 10px;
  }

  .footer__wrap {
    padding: 0 10px;
  }

  .contacts__label {
    padding-bottom: 10px;
  }
}

@media (max-width: 768px){
  .portfolio__wrap {
    padding-bottom: 0;
    min-height: 400px;
  }

  .carousel {
    position: static;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    max-height: 300px;
    perspective: none;
  }

  .card_center {
    width: 80%;
    transition: none;
    transform: none;
    z-index: auto;
    opacity: 1;
  }  

  .card-item {
    position: static;
    transition: none;
    transform-origin: none;
  }

  .card_left,
  .card_right {
    display: none;
  }

  .card__img {
  position: static;
  transition: none; 
  z-index: auto;
}

.card_center .card__img {
  z-index: auto;
}

  .card__wrap {
    align-items: center;
  }

  .card__img__wrap {
    width: 30%;
  }
  
  .card_center:hover {
    transform: none;
    box-shadow: none;
  }

  .skills__wrap {
    padding-top: 20px;
  }

  .skills-list {
    padding-top: 15px;
  }

  .footer__wrap {
    display: flex;
    justify-content: center;
  }

  /* Contacts */
  .contacts__wrap {
    flex-direction: column;
  }

  .input__wrap {
    max-width: 400px;
  }

  .media-link {
    text-align: center;
  }

}


@media (max-width: 505px) {
  input, textarea {
    width: 100%;
    box-sizing: border-box;
  }

  fieldset,
  .form-contacts__email {
    min-inline-size: 0;      
    width: 100%;
    border: none;
  }

  .header__nav {
    display: none;
  }

  .intro__wrap {
    font-size: 20px;
    width: 100%;
  } 

  .intro {
    flex-direction: row-reverse;
    margin-right: 0;
  }

  .img-wrapper {
    width: 30%;
    max-height: 85px;
  }

  .intro__pic {
    top: 5px;
    max-width: 90%;
  }

  .name {
    font-size: 28px;
  }

    /* Portfolio */

  .portfolio__header {
    margin-bottom: 10px;
  }

  .carousel {
    height: auto;
    max-height: none;
  }

  .card__wrap {
    align-items: center;
  }

  .card_center {
    border: none;
    background-color: var(--secondary-color);
  }

  .card_center .card {
    display: none;
  }

  .card__img {
    height: auto;
    max-height: 400px;
    object-fit: contain;
  }

  .card__img__wrap {
    width: 100%;
  }

  /* Overview */
  .overview__wrap {
    flex-direction: column;
  }

  .about__wrap {
    width: 100%;
  }

  .skills-list {
    max-width: 100%;
  }
  
  /*Footer*/
  .footer__wrap {
    max-width: 420px;
  }

  .input__wrap {
    width: 100%;
  }

  .contacts__wrap {
    max-width: 420px;
  }
}