App.css

.App {
  text-align: center;
}


.backgroundstyling{
  background-image:url("images/City_Trees_Water.png");
  height: 100vh;
  background-size:cover;
}

.stylingbackground{
  background-color: #16d4c5;
}

.alignment{
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 150px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.centerGrid {
  display: flex;
  justify-content: center;
}
.cardd {
  padding-top: 4vh;
  margin-top: 10vh;
  margin-left: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  width: 40vh;
  background-color: black !important;
}
.elevateCard{
  position: absolute;
  z-index: 1;
}
.backStuff {
  position: relative;
  margin-top: 100px;
  height: 70vh;
  width: 70vw;
  background-color: white;
}

.upNextRow{
  padding-top: 25vh;
}
.upNext{
  color:black;
  writing-mode: vertical-rl;
  text-orientation: mixed;  
  display: flex;
}

.cardAvatar {
  height: 10vw !important;
  width: 10vw !important;
  margin: 3vh;
  /* align-items: center; */
}

.userName {
  font-size: 4vh;
  font-family: "Poppins", sans-serif;
  color: #00b8a9;
}
.resource {
  font-size: 3vh;
  font-family: "Poppins", sans-serif;
  color: #f69225;
}

.cost {
  font-size: 3vh;
  font-family: "Poppins", sans-serif;
  color: #00ccff;
}

.groupPages {
  height: 100vh;
  background-color: #00b8a9;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.lotties {
  display: grid;
  grid-template-columns: auto;
}

@media only screen and (min-width: 800px) {
  .lotties {
    display: grid;
    grid-template-columns: auto auto;
  }
}

@media only screen and (min-width: 768px) {
  .itn-body {
    width: calc(33% - 10px) !important;
  }
}
.backgroundCover{
  background-color:black;
  height: auto;
  background-size:cover;
}
.card-title {
  font-family: adobe-garamond-pro;
  line-height: 120%;
  color: black;
  letter-spacing: 0.14em;
  font-size: 18px;
  max-width: 383px;
  text-align: center;
  margin: 0.5em auto;
  position: relative;
}

.card-text p {
  font-size: 14px;
  width: 100%;
  margin: 0 auto 0.5em;
  color: black;
}
/*the whole card*/

.fun-card{
  position:relative;
  width:500px;
  height:800px;
  background:transparent;
  font-family:"Montserrat",sans-serif;

}
.fun-card-image{
  position:relative;
  top:20%;
  left:5%;
  width:68%;
  height:40%;
  border-radius:5px;
  overflow:hidden;
  background:#ffffff45;
  box-shadow:0 0 10px 2px #00000045;z-index:5;
}
.fun-card-image > img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  width:auto;
}
/* this change the card with words in*/
.fun-card-content{
  position:absolute;
  bottom:20%;
  right:0;
  width:80%;
  height:30%;
  background:teal;
  padding:20px;
  border-radius:25px;
  box-shadow:5px 5px 10px 2px grey;
  
}
.fun-card-fun-name{
  position:relative;
  left:25%;
  color:var(--food-card-text-color);
  z-index:7;
  padding: 5px;
  font-size:50%;
}

.fun-card-fun-name > *{
  margin:0;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:250px;
  overflow:hidden;
  text-shadow:1px -2px black,1px -1px black;
}
.fun-card-about{
  margin:20px 10px;
  height:95px;
  width:95%;
  position:relative;
  font-size: 12px;
  color: black;
  font-family:"Montserrat",sans-serif;
  opacity:0.56;
}
.about-shadow{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:35px;
  background:linear-gradient( transparent, var(--card-background));z-index:2;
}
.fun-card-fun-properties{
  position:absolute;
  left:50%;
  bottom:-50%;
  transform:translate(-50%,-105%);
  z-index:7;
  border-radius:15px;padding:10px 15px;
  color:var(--card-properties-text-color);
  text-align:center;
  background: var(--card-properties-bg);
  width:fit-content;
  box-shadow:0 0 10px 2px black;
}
.fun-card-fun-properties > div{
  border-right:1px solid var(--card-properties-text-color);
  width:fit-content;
  padding:0 10px;
  display:inline-block;
}
.fun-card-fun-properties > div:last-child{border-right:none;}
.fun-card-fun-properties > div > i{
  font-size:16px;
  margin-bottom:5px;
}
.fun-card-fun-properties > div > p{
  font-size:10px;
  margin:0;
}

.flexbox{
  display:flex;
  justify-content:center;
  vertical-align:middle;
  flex-wrap:wrap;
  width:90%;
  margin:5%;
}
.flexbox > *{
  margin:auto 20px;
}