:root {
  --green: rgb(106, 253, 106);
  --blue: rgb(121, 200, 253);
  --red: rgb(255, 114, 114);
  --yellow: rgb(253, 226, 106);
}

html{
  overflow-y: scroll;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  max-width: 100%;
  /* overflow: hidden; */
}

body {
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, rgb(82, 82, 82), black);
  background-attachment: fixed;
}

.a-no-style {
  text-decoration: none;
}

.wrapper {
  margin: auto;
  width: 60%;
  height: 80vh;
  padding: 2vh;
  color: var(--navbar-color, white);

  /* border */
  /* border-color: var(--navbar-color, white);
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  padding: 5vh; */
}

@media screen and (max-width: 1000px) {
  .wrapper{
    width: 70%;
  }
  
}

.greenshadow {
  box-shadow: 0 0 4px var(--green, green);
}
.blueshadow {
  box-shadow: 0 0 4px var(--blue, blue);
}
.redshadow {
  box-shadow: 0 0 4px var(--red, red);
}
.yellowshadow {
  box-shadow: 0 0 4px var(--yellow, yellow);
}
.greencolor {
  color: var(--green, green);
}
.bluecolor {
  color: var(--blue, blue);
}
.redcolor {
  color: var(--red, red);
}
.yellowcolor {
  color: var(--yellow, yellow);
}

.greenbg {
  background-color: var(--green, green);
}
.bluebg {
  background-color: var(--blue, blue);
}
.redbg {
  background-color: var(--red, red);
}
.yellowbg {
  background-color: var(--yellow, yellow);
}

.greenhoveranim:hover {
  background-color: var(--green, green);
  color: rgb(39, 39, 39);
}
.bluehoveranim:hover {
  background-color: var(--blue, blue);
  color: rgb(39, 39, 39);
}
.redhoveranim:hover {
  background-color: var(--red, red);
  color: rgb(39, 39, 39);
}
.yellowhoveranim:hover {
  background-color: var(--yellow, yellow);
  color: rgb(39, 39, 39);
}

.filler{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  /* background-color: red; */
}