/* TOC */

/* 1. GENERAL */
/* 2. TYPOGRAPHY */
/* 3. LAYOUT OVERALL */
/* 4. BUTTONS */
/* 5. CONTENTS */
/* 6. LINKS */

:root {
  font-size: 16px;
  --light: #ddd;
  --dark: #222;
  --grad1: radial-gradient(hsl(340, 0%, 50%), hsl(0, 25%, 50%) 70%);
  --cor1: hsl(0, 25%, 50%);
  --grad2: radial-gradient(hsl(180, 0%, 50%), hsl(180, 30%, 50%) 70%);
  --cor2: hsl(180, 30%, 50%);
  --grad3: radial-gradient(hsl(90, 0%, 50%), hsl(90, 30%, 50%) 70%);
  --cor3: hsl(93, 30%, 50%);
  --cor4: hsl(220, 15%, 25%);
  --cor5: hsl(32, 66%, 44%);
}

/* ~~ 1. GENERAL */

header {
  position: relative;
  height: 350px;
  width: 100vw;
  overflow:hidden;
  display: flex;
  justify-content: end;
  align-items: center;
}

/* */

/* ~~ 2. TYPOGRAPHY */

header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.25vw, 2rem);
}

header h1 span {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

header h2 {
  margin: clamp(.25rem, 1.5vw, 1.5rem) 0;
}

header h3 {
  font-size: 1rem;
}

.tab__contact_header {
  margin: .25rem;
}

header p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.1rem;
}

/* */

/* ~~ 3. LAYOUT OVERALL */

.tab {
  position: absolute;
  top: -575px;
  height: 1500px;
  width: 2000px;
  border-radius: 0 50% 50% 0;
  box-shadow: 0 0 1rem #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: end;
  transition: all .3s cubic-bezier(.73,1.34,.53,.95);
}

.tab--profile {
  left: -1630px;
  overflow: hidden;
  z-index: 5;
  background-color: var(--dark);
}

.tab__photo {
  position: absolute;
  right: 0;
  height: 350px;
  width: 370px;
  background-image: url("/images/profile_foto_desaturated.png");
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.tab--title {
  right: 10vw;
  background: var(--grad3);
}

.tab--title.closed {
  right: calc(97vw - 370px); 
  /* 97vw b/c I want a 3vw offset. 370px is about the width of the profile photo. */
}

.tab--about {
  right: 7vw;
  background: var(--grad2);
}

.tab--about.closed {
  right: calc(94vw - 370px); 
  /* 94vw b/c I want a 3vw + 3vw offset. 370px is about the width of the profile photo. */
}

.tab--contact {
  right: 4vw;
  background: var(--grad1);
}

.tab--contact.closed {
  right: calc(91vw - 370px); 
  /* 91vw b/c I want a 3vw + 3vw + 3vw offset. 370px is about the width of the profile photo. */
}

/* */

/* ~~ 4. BUTTONS */

.tab button {
  position: relative;
  left: 15px;
  height: 40px;
  cursor: pointer;
  border: none;
  border-radius: 0 45% 45% 0;
  box-shadow: .5rem 0 .65rem -.15rem rgba(51, 51, 51, .5);
}

.btn__topline, .btn__bottomline {
  transition: all .3s linear;
}
.btn__topline {
  transform-origin: 50% 30%;
}
.btn__bottomline {
  transform-origin: 50% 70%;
}

.tab.closed .btn__topline {
  transform: rotate(-90deg);
}

.tab.closed .btn__bottomline {
  transform: rotate(90deg);
}

.btn--contact {
  background-color: var(--cor1);
}

.btn--about {
  background-color: var(--cor2);
}

.btn--title {
  background: var(--cor3);
}

/* */

/* ~~ 5. CONTENTS */

.tab--back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  width: calc(91vw - 370px);
  text-align: center;
  padding: 0 10vw;
  color: var(--light);
}

.tab__content {
  position: relative;
  width: calc(90vw - 430px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .3s linear;
}

.tab__content--about {
  padding: 0 5vw;
}

.tab__contact_line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vw;
}

/* ~~ MEDIA QUERIES */

@media screen and (max-width: 740px) {

  header {
    height: calc(470px + 12vh);
    justify-content: end;
    align-items: end;
  }

  header p {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .tab {
    height: 2000px;
    border-radius: 50%;
    align-items: end;
    justify-content: center;
  }

  .tab--profile {
    left: calc(-500px + 50vw);
    height: 500px;
    width: 500px;
    top: -100px;
  }

  .tab__photo {
    position: absolute;
    right: 0;
    height: 400px;
    width: 50vw;
    background-size: cover;
    background-position: 50%;
  }

  .profile_photo {
    top: 50px;
  }

  .tab--title {
    left: calc(-1000px + 50vw);
    top: -1530px;
  }

  .tab--title.closed {
    top: calc(-100px - 2vh);
    left: calc(-500px + 48vw);
    width: calc(500px + 4vh);
    height: calc(500px + 4vh);
    transform: rotate(-80deg);
  }

  .tab--about {
    left: calc(-1000px + 50vw);
    top: calc(-1530px + 4vh);
  }

  .tab--about.closed {
    top: calc(-100px - 4vh);
    left: calc(-500px + 46vw);
    width: calc(500px + 8vh);
    height: calc(500px + 8vh);
    transform: rotate(-70deg);
  }
  
  .tab--contact {
    left: calc(-1000px + 50vw);
    top: calc(-1530px + 8vh);
  }

  .tab--contact.closed {
    top: calc(-100px - 6vh);
    left: calc(-500px + 44vw);
    width: calc(500px + 12vh);
    height: calc(500px + 12vh);
    transform: rotate(-60deg);
  }

  .tab button {
    transform: rotate(90deg);
    top: 15px;
    left: 0;
  }

  .tab__content {
    width: 50vw;
    height: calc(470px + 4vh);
    position: absolute;
    left: 50%;
    bottom: 0;
    padding: 3rem;
  }

  .tab__content--contact {
    height: 50vh;
    left: 49%;
  }

  .tab--back {
    width: 50vw;
    height: 70vh;
    padding: 5vw;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 530px) {

  header {
    height: 100vh;
    justify-content: center;
    align-items: end;
  }

  header h2 {
  font-size: 1.25rem;
  }

  header p {
    margin: 0;
    font-size: clamp(.8rem, 1.8vw, 1rem);
  }

  .tab {
    left: calc(-500px + 50vw);
    height: 1000px;
    width: 1000px;
    border-radius: 0 0 50% 50%;
    align-items: end;
    justify-content: center;
  }

  .tab--profile {
    top: calc(-1000px + 55vh);
  }

  .tab__photo {
    height: 55vh;
    width: 100vw;
    background-size: cover;
    background-position: 50%;
    right: auto;
  }
  
  .tab--contact {
    top: calc(-1000px + 96vh);
  }

  .tab--contact.closed {
    top: calc(-1000px + 67vh);
    left: auto;
    right: auto;
    width: 1000px;
    height: 1000px;
    transform: rotate(0deg);
  }

  .tab--about {
    top: calc(-1000px + 92vh);
  }

  .tab--about.closed {
    top: calc(-1000px + 63vh);
    left: auto;
    right: auto;
    width: 1000px;
    height: 1000px;
    transform: rotate(0deg);
  }

  .tab--title {
    top: calc(-1000px + 88vh);
  }

  .tab--title.closed {
    top: calc(-1000px + 59vh);
    left: auto;
    right: auto;
    width: 1000px;
    height: 1000px;
    transform: rotate(0deg);
  }

  .tab button {
    position: relative;
    transform: rotate(90deg);
    top: 15px;
    left: 0;
    border-radius: 0 45% 45% 0;
    box-shadow: .5rem 0 .65rem -.15rem rgba(51, 51, 51, .5);
  }

  .tab__content {
    display: block;
    width: 100vw;
    height: 35vh;
    position: absolute;
    left: calc(500px - 50vw);
    bottom: 0;
  }

  .tab__content--about {
    padding: 5vw;
    height: 31vh;
  }

  .tab__about_paragraph {
    font-size: clamp(.8rem, 3vw, 1rem);
    line-height: .8rem;
  }

  .tab--back {
    width: auto;
    height: 35vh;
    padding: 5vw;
  }

  .tab__contact_line {
    justify-content: center;
  }

}

/*  */

/* ~~ 6. LINKS */

header a,
header a:visited {
  color: var(--dark);
}

/*  */