.intro {
    color: white;
}

.intro p {
    line-height: 27px;
    opacity: 80%;
    margin-top: 1%;
}

body {
    height: 100vh;
    width: 85vw;
    background: linear-gradient(-45deg, #493a36, #411828, #27353a, #1b584b);
  	background-size: 400% 400%;
  	animation: gradient 15s ease infinite;
    display: flex;
    position: relative;
    align-items: center;
    text-align: center;
    overflow: auto;
    font-family: Space Grotesk;
    flex-direction: column
}

a {
  color: rgb(93, 184, 236);
}

.twitter a {
  background-color: #0099ff;
  color: white;
  padding: 14px 26.5px;
  text-align: center;
  text-decoration: none;
  display: flex;
  border-radius: 4px;
  transform-style: preserve-3d;
  perspective: 800px;
}

.instagram a {
  background-color: white;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: flex;
  border-radius: 4px;
  transform-style: preserve-3d;
  perspective: 800px;
}

.twitter a:hover, a:active {
  background-color: rgb(85, 120, 216);
}

.instagram a:hover, a:active {
  background-color: wheat
}

i {
  margin-right: 8px;
  margin-top: 3px;
}


.allcards {
  display: grid;
  position: auto;
}

.card {
    z-index: 0;
    margin: 20px;
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 235px 20px;
    grid-template-areas: "image" "text" "stats";

    border-radius: 18px;
    background: #1d1d1d;
    color: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.75);
    text-align: center;

    transform-style: preserve-3d;
    perspective: 800px;
}

.card-image {
    grid-area: image;
    background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/AUto.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
    position: relative;
	  padding-bottom: 56.25%;
	  padding-top: 30px;
	  height: 0;
	  overflow: hidden;
}
.card-image1 {
    grid-area: image;
    background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/SkSupply.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
    padding-bottom: 56.25%;
	  padding-top: 30px;
	  height: 0;
	  overflow: hidden;
}
.card-image2 {
    grid-area: image;
    background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/Website1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
    padding-bottom: 56.25%;
	  height: 0;
	  overflow: hidden;
}
.card-image3 {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/Sidebar2.png");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.card-image4 {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/Back.png");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.card-image5 {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/SquaredIO.png");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.card-image6 {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/Graphic.png");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
  position: relative;
  padding-bottom: 52.25%;
  height: 0;
  overflow: hidden;
}
.card-image7 {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 50%, #1d1d1d 100%), url("images/Koi.png");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.card-text p {  
    color: white;
    opacity: 52.5%;
    margin: 2%;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 20px;
}

.card-text h2 {  
    margin-top: -3.5%;
    font-size: 22.5px;
}

.card-text {
    padding: 2%;
    grid-area: text;
    margin: 15px;
    transform: translateZ(30px);
}

.js-tilt-glare {
    border-radius: 18px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  }
}


@media (min-width:150px) { 
  body {
    font-size:0.88rem;
    left: 15px;
  }

  .card {
    grid-template-columns: 291px;
    grid-template-rows: 210px 235px 20px;
  } 
} 

@media (min-width:750px) { 
  body {
    font-size:0.92rem;
    left: 50px;
  }

  .allcards {
    grid-template-columns: 1fr 1fr;
  }

  .card {
    grid-template-rows: 210px 220px 20px;
  } 
} 

@media (min-width:920px) { 
  body {
    font-size:0.92rem;
    left: 80px;
  }

  .allcards {
    grid-template-columns: 1fr 1fr;
  }

  .card {
    grid-template-rows: 210px 220px 20px;
  } 
} 

@media (min-width:1320px) { 
  
  body {
    font-size: 0.98rem;
    left: 97px;
  }

  .allcards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .card {
    grid-template-columns: 297px;
    grid-template-rows: 210px 235px 20px;
  } 
}