/* @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");


:root {
  --mauto: 0 auto;
  --width: clamp(768px, 100vw, 2560px);
  --heigh: clamp(50px, 2vw, 2vw);
  --card-width: clamp(290px, 80vw, 614px);
  --card-heigh: clamp(541px, 100vh, 819px);
  --full-heigh: clamp(80vh, 90vh, 1440px);

  --ubuntu: "Ubuntu", monospace;
  --poppins: "poppins", sans-serif;
  --lato: "lato", sans-serif;
  --background: hsl(210, 73%, 13%);
  --fsh1: clamp(1rem, 1.5vw, 1.5rem);
  --fsp: clamp(0.8rem, 0.5vw, 1rem);
  --hue: 220;
  --sat: 78%;
  --lit: 13%;
}

:root {
  --clr1: hsl(0, 0%, 100%);
  --clr2: hsl(63, 98%, 32%);
  --clr3: hsl(174, 96%, 28%);
  --clr4: hsl(216, 36%, 41%);
  --clr5: rgb(180, 200, 200);
  --clr6: hsl(190, 36%, 26%);
  --clr7: hsl(220, 35%, 20%);
  --clr8: hsl(220, 70%, 15%);

  --bgclr: hsl(220, 70%, 15%);
  --brclr: hsl(200, 52%, 55%);

  --box-shadow: rgba(108, 108, 126, 0.1) 0px 4px 16px,
    rgba(170, 170, 250, 0.1) 0px 8px 24px, rgba(170, 17, 26, 0.1) 0px 16px 56px;
}


body {
  width: "*";
  padding: 2px 2px 2px 2px;
  margin: 0px auto;
  min-height: 98dvh;
  min-height: 98vh;
  text-rendering: optimizeSpeed;
  background-color: rgb(8, 28, 51);
  font-family: var(--ubuntu), 'Courier New', Courier, monospace;
  background-image: url("/src/img/wp.webp");


}







.logo h4 {
  color: rgb(255, 255, 255);
  font-weight: 800;
  font-size: 1.5em;
  text-shadow: 2px 2px 4px rgb(56, 23, 13);
  letter-spacing: 2px;
  padding: 10px;
  margin-left: 20px;

}

.logo a {
  text-decoration: none;
}

.burger {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.burger div {
  width: 33px;
  height: 5px;
  background-color: rgb(198, 182, 211);
  margin: 7px;
  z-index: 23;
}

.nav-links {
  position: absolute;
  right: 0;
  /* background-color: rgba(79, 63, 226, 0.432); */
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1rem;
  transform: translateY(-200%);
  transition: transform 0.5s ease-in;
  padding: 20px;
  border-radius: 20px;
  -webkit-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d7757580;
  -moz-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d7757577;
  box-shadow: inset 0.5px 0.5px 20.5px 4.5px rgba(74, 69, 90, 0.1);
  z-index: 1;
}

.nav-links li {
  border-radius: 100vw 100vw 100vw 100vw;
  opacity: 0.5;
  background-color: rgba(22, 6, 82, 1);
  -webkit-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d77575;
  -moz-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d77575;
  box-shadow: inset 0.3px 0.5px 20.5px 4.5px rgba(87, 73, 138, 1);
}

nav ul {
  list-style-type: none;
  /* Removes the bullet points */
  padding: 0;
  /* Optional: Removes default padding */
  margin: 0;
  /* Optional: Removes default margin */
}

.nav-links a {
  color: rgb(177, 250, 255);
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  letter-spacing: 3px;
  font-weight: bold;
  padding: 20px;
  text-decoration: none;
  text-shadow: 1px 1px 5px rgb(235, 49, 49);


}



.nav-active {
  transform: translateX(0%);
  opacity: 1;
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateY(150px);
  }

  to {
    opacity: 1;
    transform: translate(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  transform: rotate(180deg) translate(-0px, -0px);
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}






.box {


  margin-top: 5vh;
  height: 80vh;
  width: 80vw;
  border-radius: 20px;



  background: rgba(8, 1, 130, 1.0);
  background: linear-gradient(315deg, rgba(35, 27, 199, 0.596), rgba(255, 255, 255, 0.678));
  -webkit-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d7757580;
  -moz-box-shadow: inset 0.5px 0.5px 20.5px 2.5px #d7757577;
  box-shadow: inset 0.5px 0.5px 200.5px 4.5px rgba(252, 252, 251, 0.568);


  position: relative;
  background-image: url("/src/img/bcvic.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 150%;


}

.box h3 {
  
  color: #ffffff;
  font-weight: 500;
  text-shadow: 3px 3px 5px rgb(0, 0, 0);

}

.box h1 {
  
  font-size: 2rem;
  color: #f3f3f3;
  font-weight: 700;
  text-shadow: 3px 3px 4px rgb(0, 0, 0);
  font-family: var(--poppins), 'Courier New', Courier, monospace;
  /* word-break: keep-all; */
}

.namehead{
  position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%);

  
}

.social {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 45px;

  margin-top: 20px;

}

@media (min-width: 768px) {
  .nav-links {
    width: 35%;
    background-color: rgba(52, 33, 215, 0.01);
  }

}