*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.5s;
scroll-behavior: smooth;
}
:root{
  --color1:#1a1a1a;
  --color2:#3d4142;
  --color3:#e4e3de;
  --color4: #f0f1ec;
  --color5: #fffefa;
  --color6: hsl(234deg,41%,67%);
}
@font-face {
  font-family: 'Noto';
  src: url('NotoSerif-Regular.ttf') format('truetype');

}
body{
  background-color: var(--color1);
}
.website{
font-family: "Noto",sans-serif;
height: 500vh;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--color3);
overflow-x: hidden;
}
.nav{
position: fixed;
height: 25vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
}
.toggle{
cursor: pointer;
background-color: var(--color2);
padding: 15px;
border-radius: 150px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
}
.toggle:hover{
background-color: var(--color6);
}
ul{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
position: absolute;
height: 80%;
text-transform: uppercase;
display: none;
padding: 40px;
transition-delay: 1s;

}
ul li{
list-style: none !important;
padding: 10px;
}
ul li a{
color: var(--color3);
text-decoration: none;
transition: all 0.5s;
}
/* ul li a:hover{
color: var(--color6);
} */

.header{
margin-top: 20vh;
margin-bottom: 10vh;
text-align: center;
padding: 20px;
font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header h1 {
background: linear-gradient(to right, var(--color6), var(--color2), var(--color5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation-name: gradient;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
background-size: 200% auto;
font-weight: 900;
width: 50%;
}
.header h1 span{
transition: all 0.1s ease-in;
cursor: default;
font-weight: 900;
}
.header h1 span:hover{
background: var(--color5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#projects{
height: 250vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 15vh;
}
.project-cont{
display: flex;
width: 60%;
height: 45vh;
border-radius: 10px;
justify-content: space-around;
/* background:  linear-gradient(to right, var(--color1), #313435,var(--color1)); */
transition: all 1s;
position: relative;

}
.project-cont img{
width: 100%;
height: 100%;
display: flex;
transition-duration: 1s;
align-self: flex-end;
transition:all 1s;
border-radius: 10px;
}
.project-cont  p{
width: 60%;
display: flex;
align-self: flex-start;
align-self: flex-end;
position: absolute;
transition: all 0.000001s;
transition: all 1s;
font-size: 16px;
}
.footer{
display: flex;
position: relative;
justify-content: space-around;
flex-direction: column;
height: 40vh;
margin-top: 30vh;
background-color: #161616;
}
.logo{
position: relative;
top: -20%;
left: -5%;
width: 40%;
  height: 15vh;
}
.logo img{
width: 100%;
height: 25vh;
}
.contacts{
display: flex;
align-self: end;
width: 10%;
justify-content: space-evenly;
align-items: center;
}
.contacts a{
margin-top: 10vh;
text-decoration: none;
position: relative;
bottom: 30px;
right: 30px;
}
.contacts a i{
font-size: 30px;
letter-spacing: 20px;
}
.contacts a i:hover{
color: var(--color6) !important;
}

.about{
position: absolute;
top: -45%;
width: 40%;
height: 25vh;
display: flex;
align-self: end;
margin-right: 20px;
box-shadow: 0px 0px 5px 2px #161616;
/* background:  linear-gradient(to right, var(--color1), #242525,var(--color1)); */
background-color: var(--color1);
}
.about img{
width: 40%;
height: 50%;
border-radius: 100px;
position: relative;
top: -25%;
}
.about p{
padding: 7px;
display: flex;
align-self: flex-end;
font-size: 20px;
}































































































@media (max-width:720px){
  body{
    background-color: var(--color1);
  }
.website{
  font-family: "Noto",sans-serif;
  height: 500vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color3);
  overflow-x: hidden;
}
.nav{
  position: fixed;
  height: 25vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.toggle{
  cursor: pointer;
  background-color: var(--color2);
  padding: 15px;
  border-radius: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}
.toggle:hover{
  background-color: var(--color2);
}
ul{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  height: 80%;
  text-transform: uppercase;
  display: none;
  padding: 40px;
  transition-delay: 1s;

}
ul li{
  list-style: none !important;
  padding: 10px;
}
ul li a{
  color: var(--color3);
  text-decoration: none;
  transition: all 0.5s;
}
/* ul li a:hover{
 color: var(--color6);
} */

.header{
margin-top: 30vh;
margin-bottom: 15vh;
text-align: center;
padding: 20px;
font-size: 26px;
width: auto;

}
.header h1 {
  background: linear-gradient(to right, var(--color6), var(--color2), var(--color5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: gradient;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background-size: 200% auto;
  font-weight: 900;
  width: 100%;
}
.header h1 span{
  transition: all 0.1s ease-in;
  cursor: default;
  font-weight: 900;
}
.header h1 span:hover{
  background: var(--color5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#projects{
  height: 250vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 15vh;
}
.project-cont{
  display: flex;
  width: 70%;
  height: 45vh;
  border-radius: 10px;
  justify-content: space-around;
  /* background:  linear-gradient(to right, var(--color1), #313435,var(--color1)); */
  background-color: #161616;
}
.project-cont img{
  width: 100%;
  height: 100%;
  display: flex;
  transition-duration: 1s;
}
.project-cont  p{
  width: 60%;
  display: flex;
  align-self: flex-end;
  position: absolute;
  transition: all 0.000001s;
  font-size: 16px;
}
.footer{
  display: flex;
  position: relative;
  justify-content: space-around;
  flex-direction: column;
  height: 40vh;
  margin-top: 30vh;
  background-color: #161616;
}
.logo{
  position: relative;
  top: 15%;
  left: -12%;
  width: 80%;
    height: 25vh;
}
.logo img{
  width: 100%;
  height: 25vh;
}
.contacts{
  display: flex;
  align-self: end;
  width: 20%;
  justify-content: space-evenly;
  align-items: center;
}
.contacts a{
  margin-top: 10vh;
  text-decoration: none;
  position: relative;
  bottom: 30px;
  right: 30px;
}
.contacts a i{
  font-size: 25px;
  letter-spacing: 20px;
}
.contacts a i:hover{
  color: var(--color6) !important;
}

.about{
  position: absolute;
  top: -70%;
  width: 75%;
  height: 35vh;
  display: flex;
  align-self: end;
  margin-right: 20px;
  box-shadow: 0px 0px 5px 2px #161616;
  /* background:  linear-gradient(to right, var(--color1), #242525,var(--color1)); */
  background-color: var(--color1);
}
.about img{
  width: 34%;
  height: 44%;
  border-radius: 100px;
  position: relative;
  top: -25%;
}
.about p{
  padding: 7px;
  display: flex;
  align-self: flex-end;
  font-size: 16px;
}
}

@keyframes gradient {
  0% {
    background-position: right;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  50% {
    background-position: left;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100%{
    background-position: right;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes nav-up {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.nav-up {
  animation: nav-up 1s ease;
}
@keyframes slide-up {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-up {
  animation: slide-up 2s ease;
}
@keyframes slide-down {
  from {
    transform: translateX(100%);
  }
  to {
    transform:translateX(0);
  }
}

.slide-down {
  animation: slide-down 2s ease;
}