@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Roboto:wght@300;400&display=swap');

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color:var(--dark);
  scroll-behavior: smooth;
}

:root {
  --main: #fffffe;
  --card-background: rgb(249 249 249);
  --card-tag-background: #6246ea;
  --dark: #2b2c34;
  --card-headline: #2b2c34;
  --card-tag-text: #fffffe;
  --paragraph: #2b2c34;
  --card-paragraph: #2b2c34;
  --card-hightlight: #e45858;
  --highlight: #2b2b2b;
  --secondary: #FFCE48;
  --tertiary: #e45858;
  --secondary-font: 'Roboto', sans-serif;
  --primary-font: 'Italiana', serif;
  --minViewportSize: 320;
  --maxViewportSize: 1920;

}
.hidden {
  display: none;
}

body {
  background-color: var(--main);
  font-family: var(--secondary-font);

}


.fixed {
  position: fixed;
  top: 0;
  transition: all 1s ease;
}

@media (min-width:768px) {
  header {
      position: relative;
  }
}

.header .navbar {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 4rem;
  margin: 0 auto;
  position: relative;
  z-index: 999;
  max-width: 1090px;

}

.header .navbar.fixed {
  position: fixed;
  top: 0;
}


.header .navbar .menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  justify-content: center;
  align-items: center
}

.header .navbar .menu-item:not(:first-child) {
  margin-left: 2rem
}

.header .navbar .menu-item a {
  font-family:var(--primary-font);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: inherit;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.header .navbar .menu-item a:hover,
.header .navbar.fixed .menu-item a:hover {
  color: var(--accent)
}



  .header .navbar {
      padding: 1.5rem 1.4rem;
      margin: 0 auto
  }

  .header .navbar .social {
      right: 30px
  }

  .header .navbar .wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      z-index: -1;
      opacity: 0;
      background: var(--highlight);
      transition: all .3s ease
  }

  .header .navbar .wrapper .menu {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 42%;
      width: 100%;
      transform: translateY(-50%)
  }

  .header .navbar .wrapper .menu-item {
      padding-bottom: 1rem;
      width: 100%;
      text-align: center
  }

  .header .navbar .wrapper .menu-item:nth-child(1) a {
      transition-delay: .2s
  }

  .header .navbar .wrapper .menu-item:nth-child(2) a {
      transition-delay: .3s
  }

  .header .navbar .wrapper .menu-item:nth-child(3) a {
      transition-delay: .4s
  }

  .header .navbar .wrapper .menu-item:nth-child(4) a {
      transition-delay: .5s
  }

  .header .navbar .wrapper .menu-item:not(:first-child) {
      margin-left: 0
  }

  .header .navbar .wrapper .menu-item a {
      padding: 1rem 2rem;
      opacity: 0;
      color: var(--main);
      font-size: 3rem;
      font-weight: 600;
      transform: translateX(-20px);
      transition: all .3s ease-in-out
  }

  .header .navbar .nav-toggle {
      display: block;
      position: fixed;
      right: 2rem;
      top: 0.8rem;
      width: 2.5rem;
      height: 2.5rem;
      cursor: pointer;
      z-index: 999
  }

  .header .navbar .nav-toggle span {
      display: block;
      width: 32px;
      height: 4px;
      background: var(--dark);
      border-radius: 2px;
      margin-left: 16px
  }

  .header .navbar.fixed .nav-toggle span {
      background: var(--dark)
  }

  .header .navbar .nav-toggle span:nth-child(1) {
      margin-top: 16px
  }

  .header .navbar .nav-toggle span:nth-child(2) {
      margin-top: 4px;
      opacity: 1
  }

  .header .navbar .nav-toggle span:nth-child(3) {
      margin-top: 4px
  }

  .header .navbar #nav:checked+.nav-toggle {
      transform: rotate(45deg)
  }

  .header .navbar #nav:checked+.nav-toggle span {
      background: var(--main);
      transition: transform .5s ease
  }

  .header .navbar #nav:checked+.nav-toggle span:nth-child(1) {
      transform: translateY(6px) rotate(180deg)
  }

  .header .navbar #nav:checked+.nav-toggle span:nth-child(2) {
      opacity: 0
  }

  .header .navbar #nav:checked+.nav-toggle span:nth-child(3) {
      transform: translateY(-10px) rotate(90deg)
  }

  .header .navbar #nav:checked~.wrapper {
      z-index: 99;
      opacity: 1;
      height: 100%
  }

  .header .navbar #nav:checked~.wrapper .menu-item a {
      opacity: 1;
      transform: translateX(0);
      transition: transform .2s ease
  }
  .header .navbar #nav:checked~.wrapper .menu-item a:hover{
    color: var(--secondary);
    transition: transform .2s ease
  }

main {
  position: relative;
}

h1,
h2,
h3 {
  font-family: var(--primary-font);
  text-decoration: none;
  text-align: center;
 
}
h2{
  font-size: calc(48px + (70 - 30) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));margin-bottom: 32px;

}
h1{     padding: 16px 0; font-size: calc(24px + (70 - 50) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));
}
h3{  font-family: var(--secondary-font); font-weight: 300;font-size: calc(16px + (30 - 30) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));max-width: 698px;
  margin: 0 auto;    padding: 0 0 16px;
}

p {
  font-weight: 300;
  font-family: var(--secondary-font);
  font-size: 1.2rem;
  line-height: 160%;
}
.header{
  display: flex;
    padding: 10px 24px;
    align-items: center;
}
.logo {
  margin: auto;
  font-weight: bold;
  text-align: center;
  font-family: var(--primary-font);
  font-size: calc(30px + (70 - 30) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));
}
.flex{display: flex;align-items: left;flex-wrap: wrap;}
.flex h3{flex: 1;}
.container{
  max-width: 990px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}
section{padding: 40px 0 48px;}
section img{width: 100%;max-width: 580px;}
section .intro {
  margin: auto;
  padding: 0;
}
.intro img{width: 100%;
  max-width: 95%;
  object-fit: cover;}
.user, .visual, .design{background: var(--card-background);}

.btn {
  background: var(--highlight)
}

.scroll-animate {
  padding: 50px;
}

.mouse {
  height: 50px;
  width: 35px;
  border-radius: 14px;
  border: 2px solid var(--dark);
  margin: 0 auto;
}

.mouse:after {
  content: '';
  display: block;
  height: 8px;
  width: 2px;
  margin: 10px auto;
  background: var(--dark);
  position: relative;
  -webkit-animation: a 1.2s ease infinite;
  animation: a 1.2s ease infinite
}

.arrow-scroll {
  width: 35px;
  margin-top: 10px;
  margin: 0 auto;
}

.arrow-scroll>span {
  font-family: Arial, sans-serif;
  display: block;
  width: 9px;
  height: 9px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  margin: 5px auto 3px;
  -webkit-animation: b 1s infinite;
  animation: b 1s infinite;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.arrow-scroll>span:first-child {
  -webkit-animation-delay: .1s;
  animation-delay: .1s
}

.arrow-scroll>span:last-child {
  -webkit-animation-delay: .3s;
  animation-delay: .3s
}

@-webkit-keyframes a {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
  }
}

@keyframes a {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
  }
}

@-webkit-keyframes b {
  0% {
    opacity: 0
  }

  50% {
    opacity: .5
  }

  to {
    opacity: 1
  }
}

@keyframes b {
  0% {
    opacity: 0
  }

  50% {
    opacity: .5
  }

  to {
    opacity: 1
  }
}

.portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
}
.portfolio-flex .project-title {
  width: 100%;
  min-width: 450px;
}


.portfolio-flex .project-img {
  object-fit: cover;
  transition: 0.8s ease all;
  margin: 18px auto;
  position: relative;
}

.portfolio-flex .project-img img {
  width: 100%;
  max-width:420px;
}
.portfolio-flex .project-img:hover {
  /* background: var(--secondary); */
  /* padding: 24px; */
  /* border-radius: 100%; */
  /* height: 200px; */
  /* width: 200px; */
  display: flex
;
  align-items: center;
}

.project-img:hover:before {
  background: var(--secondary);
  padding: 24px;
  border-radius: 100%;
  height: 200px;
  width: 200px;
  content: "";
  position: absolute;
  z-index: -1;
  left: 25px;
  top: -8px;
}
.portfolio-flex .project-img:hover img{
  filter: grayscale(1);
}
.portfolio h2,.about h2{ font-size: calc(32px + (70 - 30) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));}
.about{background-color: var(--highlight);margin: 42px 0 0;padding: 42px 0;}
.about h2,.about p{color:var(--main)}
.about h2{text-align: center;}
.about .circle{  
  background: var(--secondary);
    width: 205px;
    height: 205px;
    top: -45px;
    right: -68px;
    border-radius: 100%;
    position: absolute;
    z-index: 0;
}
.about-flex{display: flex;
  gap: 2rem;
  width: 90%;
  flex-wrap: wrap;
  text-align: center;
  max-width: 752px;
  margin: 0 auto;
  padding: 42px 0;
  align-items: center;}
.about-text{flex:1;order: 2;}
.about-flex .about-img{max-width:232px;margin: 0 auto;order: 1;position:relative;}
.about-flex .about-img img{width: 100%;z-index: 1;
  position: relative;}
  .flex-problem{gap:2rem}
.description{background-color: var(--main);}
.description h3, .problem h3{text-align: left;}

.images{gap: 1rem;}
.wireframes{ text-align: center;
  flex-wrap: wrap;}
.wireframes img{
  max-width: 280px;
    gap: 1rem;
    padding: 8px;
}

.userflow img, .visual img{max-width: 640px;}
@media(min-width:768px){
  .header{display: block;}
  .flex{flex-wrap: nowrap;}
  .portfolio{
      align-items: start;
  }
  .portfolio-flex {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 28px 0;
    align-items: center;
  }
  .project-title h2 {
    text-align: left;
  }

  .project-title p{text-align: left;}
  h2{     font-size: calc(16px + (70 - 50) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));
  }
  a:hover .project-img {opacity: 1;}
  .project-title p{display: block;}
  .about h2{text-align: left;}
  .about-flex{text-align: left;}
  .about-text{order: 1;}
.about-flex .about-img{order: 2;}
}

.connect{
  width: 90%;
  max-width: 810px;
  margin: 0 auto;
  padding: 42px 0;
}
.connect h2{text-align:center;}
.links{display: flex;justify-content: center;gap: 2rem;margin: 18px auto;}
.links a{color:var(--main)}
.links a:hover{color:var(--secondary)}