:root{
  --black-900: #333;
  --black-200: #7d7789;
  --light: #f6fbff;
  --white: #fff;
}
.dark{
  --black-900:  #f6fbff;
  --black-200: #fff;
  --light: #333;
  --white: #7d7789;
}
body {
  cursor: none;
  background-color: var(--light);
  font-family: 'Poppins', sans-serif;
}

 .active {
	 display: block !important;
}
 ::-webkit-scrollbar {
	 border-radius: 30px;
	 background-color: var(--black-200);
}
 ::-webkit-scrollbar-thumb {
	 border-radius: 30px;
	 background-color: var(--light);
	 border: 5px solid var(--black-200);
}
 ul {
	 list-style: none;
}
 header {
	 padding: 15px 0;
}
 header .logo {
	 display: inline-block;
	 text-decoration: none;
	 color: var(--black-900);
	 font-size: 48px;
}
 header nav ul {
	 list-style: none;
}
 header nav ul li a {
	 display: inline-block;
	 text-decoration: none;
	 color: var(--black-900);
	 font-weight: 500;
	 padding: 0 30px;
	 line-height: 40px;
	 transition: all 0.5s;
}
 header nav ul li a:hover {
	 background-color: var(--black-900);
	 color: var(--white);
}
 header .toggle {
	 display: none;
}
 header .toggle i {
	 font-size: 25px;
}
 .height {
	 height: calc(100vh - 170px);
}
 main .container {
	 background-color: var(--light);
}
 main .container .btn {
	 display: inline-block;
	 padding: 15px 30px;
	 border: 2px dotted var(--black-900);
	 color: var(--black-900);
	 text-decoration: none;
	 font-size: 18px;
	 margin: 20px 0;
	 transition: all 0.5s;
}
 main .container .btn:hover {
	 background-color: var(--black-900);
	 color: var(--white);
}
 main .container .banner-bg {
	 width: 100%;
	 object-fit: cover;
	 filter: grayscale(1);
	 object-position: top;
	 border: 2px dotted var(--black-900);
	 transition: all 0.5s;
	 border-radius: 10px;
}
 main .container .banner-bg:hover {
	 filter: grayscale(0);
}
 main .container .banner {
	 display: none;
}
 main .container .banner .banner-inner {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
}
 main .container .banner h1 {
	 font-weight: 600;
   color: var(--black-900);
	 text-transform: uppercase;
}
 main .container .banner .line {
	 width: 20%;
	 height: 5px;
	 margin: 20px 0;
	 background-color: var(--black-900);
}
 main .container .banner h4 {
	 font-weight: normal;
}
 main .container .banner h4 span {
	 font-weight: 600;
}
 main .container .about {
	 display: none;
   color: var(--black-900);
}
 main .container .about h2 {
	 text-transform: uppercase;
	 font-weight: 500;
	 letter-spacing: 3px;
	 color: var(--black-900);
}
 main .container .work {
	 display: none;
	 overflow: auto;
}
 main .container .work h2 {
	 text-transform: uppercase;
	 font-weight: 500;
	 letter-spacing: 3px;
	 color: var(--black-900);
}
 main .container .work .project-box {
	 box-shadow: 0px 0px 15px #000 b7;
	 overflow: hidden;
	 border-radius: 10px;
}
 main .container .work .project-box:hover .project-img {
	 object-position: bottom;
	 transition: object-position 5s linear;
	 filter: grayscale(0);
}
 main .container .work .project-box .project-img {
	 height: 300px;
	 object-fit: cover;
	 object-position: top;
	 filter: grayscale(1);
}
 main .container .skill {
	 display: none;
   color: var(--black-900);
}
 main .container .skill h2 {
	 text-transform: uppercase;
	 font-weight: 500;
	 letter-spacing: 3px;
}
 main .container .contact {
	 display: none;
	 color: var(--black-900);
}
main .container .contact  li a{
  color: var(--black-900);
}
 main .container .contact h2 {
	 text-transform: uppercase;
	 font-weight: 500;
	 letter-spacing: 3px;
	 color: var(--black-900);
}
 main .container .contact i {
	 font-size: 18px;
}
 footer {
	 color: var(--black-900);
}
 footer p {
	 line-height: 80px;
}
 footer .icons i {
	 padding: 10px;
   color: var(--black-900);
}
 @media (max-width: 800px) {
	 header .toggle {
		 display: block;
	}
	 header nav ul {
		 position: absolute;
		 flex-direction: column;
		 background-color: var(--light);
		 top: 90px;
		 left: 0;
		 width: 100%;
		 transition: all 0.5s;
		 align-items: center;
		 z-index: 7;
		 transform: scaley(0);
		 transform-origin: top;
	}
	 .show {
		 transform: scaley(1);
	}
}
 .theme {
	 position: fixed;
	 width: 40px;
	 right: 0;
	 top: 30vh;
	 border-radius: 10px;
	 text-align: center;
	 height: 40px;
	 color: var(--black-900);
	 border: 2px dotted var(--black-200);
	 background-color: var(--light);
}
 .theme:hover {
	 color: var(--black-900);
}
 .theme i {
	 line-height: 40px;
}