/* -------------------------------------ALL WEBSITE-------------------------------------- */
* {
  --lapis-lazuli: #22577aff;
  --verdigris: #38a3a5ff;
  --emerald: #57cc99ff;
  --light-green: #80ed99;
  --tea-green: #c7f9ccff;
  --space-cadet: #2b2d42ff;
  --cool-gray: #8d99aeff;
  --antiflash-white: #edf2f4;
  --red-pantone: #ef233cff;
  --fire-engine-red: #d90429ff;
  --rich-black: rgb(21,21,30);
  --oxford-blue: #001d3dff;
  --yale-blue: #003566ff;
  --mikado-yellow: #ffc300ff;
  --gold: #ffd60aff;
  --navback: rgba(255, 255, 255, 0.11);
  background-color: var(--rich-black);
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif, s;
  font-weight: 400;
  font-style: normal;
  /* ------------------------------------------------------------- */
  overflow-x: hidden;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background:var(--cool-gray); 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--cool-gray); 
  }
  
  /* ------------------------------------------------------------- */
  
}
.links{
  color: rgb(255, 255, 255);
  text-decoration: none;
  background: none;
}
.links:visited{ 
  color: rgb(255, 255, 255);
  text-decoration: none;
  background: none;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ------------------------------------------------------------- */

@media only screen and (max-width: 700px) {
  #navlogo {
    display: none;
  }
}
p {
  color: var(--antiflash-white);
  margin: auto;
  width: 80vw;
  text-align: center;
}



/* ---------------------------------------------------------------------------------------- */
/*--------------------------------- NAVIGATION BAR----------------------------------------- */
header {
  display: grid;
  margin-top: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
#navlogo {
  height: 30px;
  grid-column: 1;
  background: none;
  filter: invert() drop-shadow(0px 0px 3px rgb(255, 255, 255));
}

nav {
  margin: auto;
  width: 350px;
  height: 35px;
  background-color: var(--navback);
  border-radius: 40px;
  color: var(--antiflash-white);
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
div .navbutton {
  width: 70px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
}
div .navbutton:hover {
  width: 70px;
  background-color: var(--navback);
  font-size: 101%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
}

.navlink {
  padding: 5px;
  text-decoration: none;
  background: none;
  color: var(--antiflash-white);
}
/* ---------------------------------------------------------------------------------------- */
/* --------------------------------------MAIN LOGO------------------------------------------ */

.mainlogo {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#linelogo {
  background: transparent;
  height: 450px;
  filter: invert() drop-shadow(0px 0px 5px rgb(255, 255, 255));
}
/* ---------------------------------------------------------------------------------------- */
/* ----------------------------------------LOGO SLIDER------------------------------------- */

.codes {
  margin: 40px auto;
  display: flex;
  justify-content: center;
  width: 80vw;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgb(0, 0, 0, 1) 20%,
    rgb(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
  position: relative;
  height: 45px;
  overflow: hidden;
}
.contain {
  margin: 5px auto;
  width: 90vw;
  position: absolute;
  animation: logomove 10s linear 1s infinite;
  animation-direction: alternate;
}
.logos {
  background: transparent;
  filter: invert() brightness(0.6);
  margin: 0px 60px;
  height: 40px;
  width: 40px;
}
@keyframes logomove {
  from {
    left: -50%;
  }
  to {
    left: 50%;
  }
}
/* ---------------------------------------------------------------------------------------- */
/* ----------------------------------------- CONTACT ME----------------------------------------------- */
.contactme {
  margin: 10px auto;
  width: 80vw;
  display: flex;
  background-image: linear-gradient(to left, var(--emerald),var(--lapis-lazuli));
  padding: 30px;
  border-radius: 10px;
  align-items: center;
  justify-content: space-around;
}
.context {
  display: flex;
  flex-direction: column;
  color: var(--antiflash-white);
  background: none;
  width: 70%;
}
.conbut {
  padding:5px;
    width:fit-content;
  border-radius: 2em;
  background-color: #000000;
  display: flex;

  flex-direction: row;
}
.h2 {
  font-size: 1.5em;
  font-weight: 400;
  background: transparent;
}
.p {
  font-size: 1em;
  font-weight: 400;
  background: none;
}
#arrow {
  margin: 5px ;
    width: fit-content;
  height: 1em;
  background: none;
}

/* ------------------------------------ABOUT---------------------------------------------------- */
.about {
  margin: auto;
  width:80vw;
  margin-bottom: 30px;
}
.about > h5 {
  margin-left: 30px;
  color: #fff;
}
.about h4,
.about h5 {
  margin-bottom: 30px;
}
.about > p {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------------------- */
/* ----------------------------------RIGHTS------------------------------------------------------ */
.Rights{
  background-color: #000000;
  color:white;
  padding:2em;
  width: 100vw;
  position:relative;
  bottom: 0%;
}
/* ---------------------------------------------------------------------------------------- */