styles.css

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700;900&display=swap');

*, ::after, ::before
{
box-sizing: border-box;
}
html, body
{
    margin: 0;
    padding: 0;
	scroll-behavior: smooth;
    overflow-x: hidden;
}
:root
{
    --primary-color:#629639;
    --secondary-color:#000;
    --primary-background: #000;
    --secondary-background:#fff;
    --hover-color:#ffffff69;
}
body
{
    font-family: 'Jost', sans-serif;
    color: var(--primary-color);
    background:var(--primary-background) ;
}
.boxed-up {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

@media (min-width: 280px) {
    .boxed-up {
      max-width: 279px;
    }
}
@media (min-width: 375px) {
    .boxed-up {
      max-width: 340px;
    }
}
@media (min-width: 480px) {
    .boxed-up {
      max-width: 440px;
    }
}
  @media (min-width: 576px) {
    .boxed-up {
      max-width: 540px;
    }
  }
  @media (min-width: 768px) {
    .boxed-up {
      max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .boxed-up {
      max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .boxed-up {
      max-width: 1140px;
    }
  }
  @media (min-width: 1400px) {
    .boxed-up {
      max-width: 1320px;
    }
  }
header, nav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:var(--primary-background) ;
    padding: 15px;
}
header
{
  position: fixed;
  width: 100%;
  right: 0;
  left: 0;
  top: 0;
}
header img
{
    width: 50px;
    margin: 15px;
}
nav .nav-links a
{
    margin: 0 25px;
    text-decoration: none;
    color: var(--primary-color);
    transition: 0.2s ease-in-out;
}
nav .nav-links a:hover
{
    color: var(--hover-color);
    transition: 0.2s ease-in-out;

}
nav .nav-links a:nth-child(5)
{
    border: solid var(--primary-color);
    padding:10px 25px;
    border-radius: 5px 10px 5px 10px;
    transition: 0.2s ease-in-out;
}
nav .nav-links a:nth-child(5):hover
{
    background: var(--primary-color);
    transition: 0.2s ease-in-out;
    color: var(--secondary-color);
}
/* ----Burger----- */
.check 
{
    position: absolute;
    top: 3rem;
    right: 3rem;
    height: 3rem;
    width: 3rem;
    opacity: 0;
    z-index: -100;
    display: none;
}
/* -------You can delete these below code --------- */
.centerer /* ---You can delete these below {centerer} code and it's code when you start coding -------------- */
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
svg {
	width: 100%; 
  height: 100%;
}
svg text {
	animation: stroke 10s infinite alternate;
	stroke-width: 2;
	stroke: #629639;
	font-size: 150px;
}
@keyframes stroke {
	0%   {
		fill: rgba(255,251,251,0); stroke: #629639;
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(255,251,251,0); stroke: #629639; }
	80%  {fill: rgba(255,251,251,0); stroke: #629639; stroke-width: 3; }
	100% {
		fill: rgba(255,251,251,1); stroke: #629639;
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}
/* ------------------------------------------------ */
/* --------------- */
@media (max-width:991px) {
    /* -Nav-Hamburger- */
    header img
    {
        margin: 32px 15px 15px 15px;
    }
      nav
      {
        flex-direction: column;
        position: absolute;
        top: 0;
        justify-content: flex-start;
        z-index: -100;
        opacity: 0;
        right: 0;
        background: var(--secondary-background);
        padding: 0;
        border-radius: 15px 0px 0px 15px;
      }
      .check 
      {
        display: block;
        opacity: 0;
        z-index: 10;
      }
      .check:hover 
    {
        cursor: pointer;
    }
    .check:checked~nav 
    {
       opacity: 1;
        z-index: 3;
        transition: ease-in-out 0.5s;
    }
    .ham-menu
    {
        height: 3rem;
        width: 3rem;
        position: absolute;
        top: 3.3rem;
        right: 3.2rem;
        padding: 0.5rem;
        z-index: 5;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-color: transparent;
        border-radius: 0.25em;
    }
    
    .ham-menu .dashes {
        background-color: #629639;
        border-radius: 1em;
        width: 2rem;
        height: 0.25rem;
    }
    
    .ham-menu .bar-1 {
        transform-origin: 0% 0%;
        transition: transform 100ms ease-in-out;
    }
    
    .ham-menu .bar-3 {
        transform-origin: 0% 100%;
        transition: transform 100ms ease-in-out;
    }
    
    .check:checked~.ham-menu .bar-1 {
        display: block;
        transform: rotate(45deg);
    }
    
    .check:checked~.ham-menu .bar-2 {
        opacity: 0;
    }
    
    .check:checked~.ham-menu .bar-3 {
        display: block;
        transform: rotate(-45deg);
    }
      .nav-links
      {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%; 
        margin-left: 50px;
      }
      nav .nav-links a:first-child
      {
        padding-top: 90px;
      }
      nav .nav-links a:nth-child(5)
      {
        width: fit-content;
        margin-left: 25px;
      }
      nav .nav-links a
      {
        margin: 25px 0;
        padding-left: 30px;
      }
      .theme
      {
        margin: 0 auto 25px 50px;
      }
      .theme a
      {
        display: none;
      }
      .color-picker input
      {
        position: static;
      }
      .color-picker
      {
        flex-direction: row;
      }
      .color-picker::before
      {
        display: none !important;
      }
      .theme:hover .color-picker input
      {
        position: static;
      }
      .color-picker input[type="radio"]
      {
        outline: 4px solid var(--radio-color);
        margin: 10px;
      }
      .check:not(:checked) ~ nav .nav-links a, .check:not(:checked) ~ nav .nav-links 
      {
        display: none;
      }
      /* -----delete the below code----- */
      svg text 
      {
        font-size: 75px;
      }
      /* ------------------------------ */
    }
    @media (max-width: 500px) {
      /* -----delete the below code----- */
      svg text 
      {
        font-size: 35px;
      }
    }
footer
{
    background: var(--primary-background);
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 25px 0;
}