@import url('https://fonts.googleleapis.com/css2/font-family=Nunito:wght@200;300;400;600&display=swap');
*{
    padding:0;
    margin: 0;
}
body{
	background-image: url(b2.jpeg);
	background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;   
}
.header{
	flex-direction: column;
  backdrop-filter: blur(5px);   
  text-align: center; 
}
h1{
  text-align: center;
    margin-top: 6rem;
    color:rgb(2, 255, 2);
	font-size: calc(3.5rem);
    text-shadow:
    0 0 5px #ffa500,
    0 0 5px #ffa500,
    0 0 5px #ffa500,
    0 0 5px #ffa500,
    0 0 5px #ff0000,
    0 0 5px #ffa500,
    0 0 5px #ff0000;
   font-family: "sacramento",cursive;
   animation: blink 2s infinite;

}
@keyframes blink{
    20%,
    24%,
    55%{
        color:#111;
        text-shadow: none;
    }
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100%{
        text-shadow:
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ff0000,
        0 0 5px #ffa500,
        0 0 5px #ff0000;
    }
}
h1 span{
  text-align: center;
    color: rgb(2, 255, 2);
    text-shadow:
    0 0 5px #ffa500, 
    0 0 5px #ff0000;
    font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif;
   animation: blink 2s infinite;
}
@keyframes blink{
    20%,
    24%,
    55%{
        color:#111;
        text-shadow: none;
    }
    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100%{
        text-shadow:
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ffa500,
        0 0 5px #ff0000,
        0 0 5px #ffa500,
        0 0 5px #ff0000;
    }

}/*
.loader {
  display: flex;
  width: 120px;
  height: 20px;
  -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
  background:linear-gradient(#000 0 0) left -25% top 0 /20% 100% no-repeat #ddd;
  animation: l7 1s infinite steps(6);
}*/
@keyframes l7 {
    100% {background-position: right -25% top 0}
}
.header h2 span {
  margin-left:1rem;
  margin-right:1rem;

	color:white;
    font-weight:lighter;
    backdrop-filter: blur(10px);
line-height: 1.5;
font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif;
  text-align: center;
  width:90%;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
    overflow-x: hidden;
  }
  html::-webkit-scrollbar {
    width: 0.8rem;
  }
  html::-webkit-scrollbar-track {
    background:transparent;
  }
  html::-webkit-scrollbar-thumb {
    background:rgb(2, 255, 2);
    border-radius: 5rem;
  }
  #more{
    display:none;
}
.header h2 {
 text-align: center;
	color:white;
    font-size: calc(1.5rem);
    line-height: 1.5;
    font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif;
}
@media screen and (max-width:1200px){  
    h1{
      text-align: center;

        color:rgb(2, 247, 2);
        font-weight: bold;
        font-size: calc(3.5rem);
    } 
    h1 span{
        color: crimson;
    }  
    .header h2 span1{
        color:rgb(4, 160, 4);
        font-weight: bold;
        font-size: calc(2.5rem);   
    }
    .header h2 span {
        color:white;
        font-style: italic;
        backdrop-filter: blur(5px);  
    }
 .header h2 {
        margin-bottom: 100px;
        color:white;
        font-size: calc(1.5rem);
        text-align: center;
        backdrop-filter: blur(5px);

        font-family: sans-serif;
        font-weight: lighter;
    }  
}
@media screen and (max-width:767px){ 
    .social-links{  
        left: 5rem;
    }
    .social-links a{    
        padding-right: 10px;
        font-style: italic;
        font-size: calc(1.2rem);  
    }
    .devl{
        font-size: 1.3rem;
        color: whitesmoke;
        margin-left: 2rem;
        margin-bottom: 15px;
    }
    h1{
      text-align: center;
        color:rgb(4, 160, 4);
        font-weight: bold;
        font-size: calc(2.5rem);
    }
    h1 span{
        color: crimson;
    }
    .header h2 span1{
        color:rgb(4, 160, 4);
        font-weight: bold;
        font-size: calc(1.3rem);
        text-align: center;
        margin-top: 100px;
    }
    .header h2 span {
        color:white;
        text-align: center;
        width:95%;
        font-size: calc(1.5rem);  
    }
    .header h2 {
        color:white;
        backdrop-filter: blur(5px);
        font-size: calc(1.3rem);
        text-align: center;
        font-family: sans-serif;
    }
    .dropdown-content a{
        padding: 0.7rem 0.7rem;   
    }
    .dropdown-content{
        min-width: 15rem;
        box-shadow: 6px 6px 6px 6px transparent;   
    }
    .dropdown img{
        width:35px;
        height: 35px;
        border-radius: 60px;
        background-color: transparent;
    }
}
@media screen and (width<= 500px){
    .social-links{ 
        left: 4rem;
    }
    .social-links a{
        padding-right: 10px;
        font-style: italic;
        font-size: 1.2rem;  
    }
    .devl{
        font-size: 50%;
        color: whitesmoke;
        margin-left: 2rem;
        margin-bottom: 15px;
    }
    h1{
      text-align: center;

        color:rgb(4, 160, 4);
        font-weight: bold;
        font-size: Calc(1.8rem + 1vw);
    }
    h1 span{
        color: crimson;
    }
    .header h2 span1{
        color:rgb(4, 160, 4);
        font-weight: bold;
        font-size: 1rem;
        margin-left:2px;
        margin-top: 100px;
    }
    .header h2 span {
      width: 90%;
        color:white;
        font-size: 1rem;
  text-align: center;    
    }
    .header h2 {
        margin-bottom: 100px;
        color:#ffff;
        font-size: 1rem;
        text-align: center;
    }
    .dropdown-content a{
        padding: 0.5rem 0.5rem;   
    }
    .dropdown-content{
        min-width: 10rem;
        box-shadow: 4px 4px 4px 4px transparent;
        
    }
    .dropdown img{
        width:25px;
        height: 25px;
        border-radius: 60px;
        background-color: transparent;
    }
}
.dropbtn{
    color:#333;
    padding:1rem;
    border:none;
    background-color:transparent;
}
.dropdown{    
    display: inline-block;
}
.dropdown-content{
    position: absolute;
    background-color: transparent;
    min-width: 10rem;
    box-shadow: 8px 8px 8px 8px transparent;
    z-index: 1;
    display: none;
}
.dropdown-content a{
    color:white;
    padding: 1rem;
    text-decoration: none;
    display: block;
    font-size:15px;
    border-radius: 90%;  
}
.dropdown-content a:hover {
background-color: transparent;
}
.dropdown:hover .dropdown-content{
    display:inline-flex;
    top:5px;
   
    flex-wrap: wrap;
}
.dropdown img{
    width:45px;
    height: 45px;
    border-radius: 60px;
    filter: saturate(1);
    background-color: transparent;
}
/*footer*/
.title{
    color: goldenrod;
    font-family: 'raleway';
    font-size: 1.5em;
    width: 1200px;
    margin: 10px auto;
    text-align: center;
}
.social-links{
    transform:rotate(0deg);
    position:absolute ;
    left: 8rem;
   
    animation:moveup 0.5s linear 1;
    animation-delay: 3s;
    Visibility: hidden;
    animation-fill-mode: forwards;
  
    font-size: 2rem;
    font-family: sans-serif;
    font-style: italic;
}

@keyframes moveup{
    0%{
        transform: translateY(100px) rotate(0deg);
        visibility: visible;
    }
    100%{
        transform: translateY(0) rotate(0deg);
        visibility: visible;
    }
 }
.social-links a{
    text-decoration: none;
    color:white;
    padding-right: 30px;
    font-style: italic;
    font-size: 1.2rem;  
}
.social-links a:hover{
    color:yellow;
    transform:scale(1.2);
}
.social-links img{
   height: 45px;
   width: 45px;
   border-radius: 50%;
   border: .3rem solid var(--yellow);  
}
/*footer*/
section {
    left: 0;
    bottom: 12px;
    width: 100%;
    background:transparent;
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding-top: 20px;
  }

  footer {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin: 0 30px;
  }
  @media (width < 620px) {
    footer {
      flex-direction: column;
    }
    footer.bottom {
      gap: 16px;
      flex-direction: column-reverse;
    }
  }
  
  footer > img {
    margin-top: 10px;
  }
  
  @media (width >= 620px) {
    footer {
      margin: 0 auto;
      max-width: 600px;
      padding: 0;
    }
  }
  footer {
    color: whitesmoke;
  }
  footer.top {
    border-bottom: 2px solid rgb(4, 245, 4);
    padding-bottom: 20px;
  }
  footer.bottom {
    padding: 20px 0;
    justify-content: space-between;
  }
  footer.top .links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .links > div {
    display: grid;
    gap: 10px;
    margin-bottom: 30px;
  }
  footer h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: rgb(5, 255, 5);
  }
  .legal {
    font-size: 12px;
  }
  .top img{
      height: 10rem;
      width: 12rem;
      border-radius: 50%;
  }
  .legal > a1 {
    margin: 0 7px;
    color:white;
  }
  .legal > a {
    margin: 0 4px;
  }
  .legal > span {
    margin-right: 10px;
  }
  footer.bottom .links {
    display: flex;
    gap: 18px;

  }
  footer.bottom .links > a {
    font-size: 24px; 
  }
  footer.bottom .links > a img {
    height: 45px;
    width: 45px;
    filter: saturate(3);

    border-radius: 50%;
    border: .3rem solid var(--yellow);
  }
  @media (width < 420px) {
    footer {
      text-align: center;
      align-items: center;
    }
    footer.top .links {
      grid-template-columns: 1fr;
    }
    footer.bottom {
      align-items: center;
    }
    .legal > span {
      display: block;
      margin-right: 0;
      margin-bottom: 2px;
    }
  }
 
/* nav*/
button {
  
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: saturate(1);

  line-height: 1;
  color: inherit;
  font-family: "Euclid Circular A";
  font-size: 1rem;
}
  @media (width >= 500px) {
    button {
      font-size: 16px;
    }
  }
  
  :is(.navbar, .burger, .dropdowns) {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;

  }
  .navbar {
    z-index: 1;
    left: 0;
    display: flex;
    align-items: stretch;
    height: 72px;
    background: transparent;
    backdrop-filter: blur(205px);
    color: rgb(5, 253, 5);
    border-bottom: 2px solid white;
  }
  .burger {
    z-index: 3;
    right: 0;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background-image: url("menu.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
  
  body.open .burger {
    background-image: url("close.svg");
  }
  @media (width >= 720px) {
    .burger {
      display: none;
    }
  }
  .button {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 24px;
    height: 100%;
    opacity: 0.6;
  }
  .button > img {
    display: none;
  }
  @media (width >= 720px) {
    .button {
      padding: 0 10px 0 24px;
    }
    .button > img {
      display: block;
      
    }
  }
  
  @media (width >= 720px) {
    .dropdown:hover .button {
      opacity: 1;
    }
  }
  .dropdowns {
    left: -9999px;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
  }
  @media (width < 720px) {     
      body.open .dropdowns {
        opacity: 1;
        visibility: visible;
        left: 0;
        height: 20rem;
        border-radius: 2%;
        background-color: rgb(71, 70, 70);
        backdrop-filter: blur(100px);
    }
  } 
  @media (width >= 720px) {
    .dropdowns {
      position: static;
      margin-left:3rem;
      flex-direction: row;
      justify-content: flex-start;
      opacity: 1;
      visibility: visible;
    }
  }
  .dropdown {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .dropdown-menu {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 28px;
    background-color: transparent;
  }
  @media (width >= 720px) {
    .dropdown {
      height: 100%;
      flex-direction: row;
    }
    .dropdown-menu {
      position: absolute;
      top: 52px;
      left: 0;
      width: 25rem;
      padding: 6px 24px 10px;
      margin-bottom: 0;
      place-items: start;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      translate: 0 24px;
      transition: 0.3s;
      
    }
  
    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
    }
  }
  .dropdown-menu > button {
    color: #f9f9f9;
    opacity: 1;
    height: 40px;
  }
  @media (width >= 500px) {
    .dropdown-menu > button {
      opacity: 0.6;
    }
  
    .dropdown:hover .button {
      opacity: 1;
    }
  }
  
  .dropdown-menu > button:hover {
    opacity: 1;
  }
  .button a{
      color: rgb(5, 253, 5);
      font-size: 15px;
  }
  .vvv{
      width:100%;
      height: 4rem;
      background: transparent;
  }