/* *** global styles */

* {
   scroll-behavior: smooth;
}

body {
   scroll-behavior: smooth;
   font-size: 100%;
   width: auto;
   margin: auto;
   max-width: 90%;
   font-family: 'Questrial', Helvetica, Arial, sans-serif;
}

section {
   padding-top: 10vh;
}

ul {
   list-style-type: none;
   padding: 0;
   flex-wrap: wrap;
}

button {
   background: none;
   width: fit-content;
   text-transform: capitalize;
   border-right: none;
   border-bottom: none;
   font-size: 1em;
   padding: 0.5em;
   transition: all 0.5s ease;
}

button:hover {
   transform: translateY(-0.35em);
   box-shadow: var(--shadow);
   background-color: var(--accent2);
}

button:focus,
a:focus {
   outline: none;
}

a {
   padding: 0.1em;
}

p a:hover,
nav a:hover {
   background-color: var(--accent2);
   color: var(--text);
   transition: color 0.3s ease;
   transition: background-color 0.7s ease;
}

button i {
   margin: 0 0.2em 0 0.2em;
   font-size: 1.2em;
}

p {
   font-size: 1.2em;
}

h1 {
   font-size: 3em;
}

h2,
h3 {
   font-size: 2em;
   text-transform: capitalize;
}

h4 {
   font-weight: normal;
}

h1,
h2,
h3,
h4 {
   margin: 0;
}

h2,
h4,
li,
button,
i {
   font-family: 'JetBrains Mono', 'Lucida Sans', sans-serif;
}

br {
   margin-bottom: 0.2em;
}

i {
   font-style: normal;
   font-size: 0.9em;
}

svg {
   transform: scale(1.3);
   margin: 0 0.3em;
}

section:not(.work) {
   max-width: 30em;
}

section {
   margin: 0 auto 0 auto;
}

/* *** theme manager */

body,
header {
   background-color: var(--bg);
   transition: background-color 0.5s ease;
}

* {
   color: var(--text);
   transition: color 1s ease;
}

h2,
h4,
a,
.project-description {
   color: var(--accent2);
}

.love path {
   fill: var(--accent2);
}

button {
   border-top-color: var(--accent2);
   border-left-color: var(--accent2);
   background-color: var(--bg-button);
}

.project {
   background-color: var(--bg-item);
}

/* *** header  */

.name {
   font-size: 1.2em;
}

.name a {
   text-decoration: none;
   color: var(--text);
}

header {
   display: flex;
   justify-content: space-between;
   position: sticky;
   top: 0;
   padding: 2vh 0 2vh 0;
   z-index: 1;
   animation-delay: 2s;
}

nav {
   margin-top: 5vh;
   display: flex;
   align-items: center;
   justify-content: center;
   max-height: 0vh;
   overflow: hidden;
   transition: max-height 1s ease;
   transform: translateX(-1em);
}

/* class for menu visibility toggle */
.show-menu {
   max-height: 30vh;
}

.command button:first-of-type {
   transform: translateX(-0.75em);
}

.jumps-list {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
   white-space: nowrap;
}

.jumps-list li {
   display: flex;
   align-items: center;
   font-size: 1em;
   white-space: nowrap;
   margin-top: 1em;
}

/* *** main */

main {
   height: 95vh;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   transform: translateY(-5vh);
}

.name-main {
   --responsive-scale: 1;
   animation-delay: 1s;
   white-space: nowrap;
   /* setting transition for js animation */
   transition: none;
}

main > *,
header {
   animation-name: appear;
   animation-duration: 1s;
   animation-timing-function: ease;
   opacity: 0;
   animation-fill-mode: forwards;
}

.greetings {
   font-size: 1em;
   animation-delay: 0.5s;
}

.about-main {
   max-width: 80%;
   font-size: 1.5em;
   margin: 1em 0 1em 0;
   animation-delay: 1.5s;
   padding: 0.2em;
}

h2:not(.call-to-action),
.about-main {
   padding-left: 0.2em;
   color: #fff;
   background-color: var(--accent2);
}

.interactions-list,
.socials-list {
   display: flex;
   align-items: flex-start;
   animation-delay: 1.5s;
}

main li {
   margin: 0 1.5em 0 0;
}

/* *** sections */

/* skills */

.skills ul {
   display: flex;
   justify-content: space-evenly;
}

.skills ul:first-of-type {
   margin-bottom: 5vh;
}

.skills ul li {
   padding: 0em 1.5em 1em 1.5em;
}

/* experiences */

.work {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 75vw;
}

.workplace {
   display: flex;
   flex-direction: column;
   margin-bottom: 5em;
}

.work-about p {
   margin-top: 0;
}

.work-missions {
   margin: 0;
}

.work-missions li:before {
   content: '>';
   color: var(--accent2);
   display: inline-block;
   /* width: 1em; */
   margin-left: -1.4em;
}

.work-missions li {
   text-align: justify;
   margin-bottom: 0.5em;
}

/* projects */

.project-header {
   margin-bottom: 10vh;
}

.projects .projects-list li {
   margin-bottom: 5em;
}

.projects {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.project:not(:last-of-type) {
   margin: 0 0 10vh 0;
}

.project {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   width: 80vw;
   transition: all 1s ease;
}

.project-title {
   margin-top: 1em;
}

.project-title,
.project-title > a {
   display: flex;
   align-items: center;
}

.project-title a {
   text-decoration: none;
   margin-left: 1.5em;
}

.project-title i {
   font-size: 1.5em;
}

.project-description {
   margin: 0;
}

.project:hover {
   transform: translateY(-2em);
   box-shadow: var(--shadow);
}

.project-about {
   width: 80%;
}

.project-image {
   width: 80%;
   max-width: 30em;
}

.project-info {
   max-height: 0vh;
   overflow: hidden;
   transition: max-height 2s ease;
   text-align: justify;
}

.project:hover .project-info {
   max-height: 100vh;
}

.tech-used-list {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   margin: 0 0 1em 0;
}

.tech-used-list li:not(:last-child) {
   padding-right: 1em;
   padding-bottom: 0.5em;
}

/* contact */

.contact {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 50vh;
}

.call-to-action {
   padding-top: 0vh;
   line-height: 2em;
   margin-bottom: 2.5em;
}

.call-to-action span:last-of-type {
   padding: 0.2em;
   color: #fff;
   background-color: var(--accent2);
}

.call-to-action span:first-of-type {
   color: var(--accent2);
}

/* footer */

footer {
   text-align: center;
}

/* *** animations */

/* appear on start for main */

@keyframes appear {
   from {
      transform: translateY(5vh);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* appear on view animation  */

.hide {
   transform: translateY(5vh);
   opacity: 0;
   transition: all 0.5s ease;
}

.disappear {
   transform: translateY(2.5vh);
   opacity: 0;
   transition: all 0.5s ease;
}

.appear {
   transform: translateY(0);
   opacity: 1;
}

/* *** responsiveness */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
   .name-break {
      display: none;
   }

   nav {
      transform: translateX(-2em);
   }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
   .contact p {
      white-space: nowrap;
   }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
   header {
      align-items: center;
   }

   body {
      max-width: 75%;
   }
   .menu {
      display: none;
   }

   .name {
      white-space: nowrap;
   }

   nav {
      max-height: 100%;
      width: auto;
      margin-top: 0;
   }

   .jumps-list {
      flex-direction: row;
   }

   .jumps-list li {
      margin-top: 0;
   }

   nav {
      width: 100%;
      justify-content: flex-end;
   }

   .jumps-list {
      justify-content: right;
      align-items: right;
   }
   .jumps-list li {
      margin-left: 1em;
   }

   main {
      transform: translateY(0vh);
   }

   main li {
      margin: 0 2em 0 0;
   }

   section {
      padding-top: 15vh;
   }

   .about-main {
      max-width: 60%;
   }

   ul {
      flex-wrap: nowrap;
   }

   .workplace,
   .project {
      flex-direction: row;
   }

   .work-about {
      width: 20vw;
      margin-right: 5vw;
   }

   .work-missions {
      width: 40vw;
   }

   .project-title {
      margin-top: 1em;
   }

   .project-about {
      width: 30%;
   }

   .project-image {
      width: 50%;
   }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
   .name-main {
      --responsive-scale: 2;
   }

   main li {
      margin: 0.5em 2.5em 0 0;
   }

   h1 {
      font-size: 4em;
   }

   .about-main {
      font-size: 2em;
   }

   .work {
      width: 60vw;
   }
}