:root {

  --primary: rgb(82, 82, 82);

  --secondary: rgb(61, 61, 61);

}



body {

  background-image: url("");

  background-repeat: repeat;

  background-size: 20px;

  animation: animation 100s linear infinite;

}



@keyframes animation {

   100%{

    background-position: -3000px -3000px;

  }

}



.center {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-flow: wrap row;

  width: 100%;

  height: 100vh;

}



.card-row {

  display: flex;

  justify-content: center;

  flex-flow: wrap;

  min-width: 70%;

  gap: 50px;

  height: 60%;

}



.social-logo {

  width: 100px;

}



body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



.card {

  background-color: var(--secondary);

  border-radius: 10px;

  min-width: 100px;

  max-width: 500px;

  padding: 20px;

  text-align: center;

  border: 3px transparent solid;

  transition: all ease 0.3s;

  box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%);

}



.smol-card {

  background-color: var(--secondary);

  border-radius: 10px;

  min-width: 100px;

  max-width: 700px;

  padding: 20px;

  text-align: center;

  border: 3px transparent solid;

  transition: all ease 0.3s;

  box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%);

}



.card:hover, .smol-card:hover {

  border: 3px rgb(0, 140, 255) solid;

  box-shadow: 1px 1px 30px 0 rgb(0 0 0 / 50%);

  transform: translateY(-5%);

}



a {

  color: white;

  text-decoration: none;

}



.blue {

  color: rgb(0, 140, 255);

}



.white {

  color: white;

}



p.button {

  background-color: rgb(0, 140, 255);

  border-radius: 5px;

  display: block;

  padding: 5px;

  transition: all ease 0.3s;



}



p.button:hover {

  filter: brightness(120%)

}



.t-center {

  text-align: center;

}