/*-------------------------------------------------------Features-------------------------*/

.features-head {
    width: 100%;
    overflow: hidden;
}

.features-sub-head {
    height: 70vh;
    animation: slideInFromBottom 1s ease-in;
}

.features-head div.text {
    animation: slideInFromLeft 1s ease-in;
}

.features-head img {
    width: 200px;
    justify-self: flex-end; /* this can be used to push the img item to the end column of the flex container */
    animation: fade-in 1s ease-in;
}

.features-main .container {
    background-image: linear-gradient(45deg, rgba(0,0,0,1),rgba(0,0,0,0));
}

.features-sub-head div{
    color: black;
}

.features-sub-head img {
    width: 300px;
    justify-self: flex-end;
}

.features-main {
    height: 70vh;
}


.blockchain .card{
    position: relative; /* using relative position the child elements of this container will move relative to this whe position:absolute is used */
    background-color: var(--light-color);
    color: black;
    flex-direction: column;
    text-align: center;
}

.blockchain .card i{
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translate(-50%, -50%);
}

.features-main.my-2 .container.grid.blockchain .card.flex {
    height: 350px;
    width: 95%;
}

.features-main.my-2 .container.grid.blockchain {
    padding-left: 225px;
}


/* --------------------------------------------------------------Mine Main -------------------------------------------*/


#mine {
    color: black;
    border-color: black;
}

#mine:hover{
    background-image: linear-gradient(45deg, rgba(0,0,0,1),rgba(0,0,0,0));
}

/* --------------------------------------------------------------- Media Queries -----------------------------------------------*/
/* tablet view and under */
@media (max-width:768px){
    .showcase .grid,
    .stats .grid,
    .clid .grid,
    .cloud .grid,
    .features-main .grid,
    .docs-main .grid,
    .grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr; /* this is used to make everything stack on top of each other as such we select all the grids */
    }

    .showcase {
        height: auto; /* by setting this to auto it will take the amount of the container */
    }

    .showcase-text {
        text-align: center;
        margin-top: 40px; /* this is to push it down a bit */
    }

    .showcase-form {
        justify-self: center;
        margin: auto;
    }

    .cli .grid > *:first-child { /* this is so thhat the grid first child element will occupy one column and one row */
        grid-column: 1; 
        grid-row: 1;
    }
    .cli .grid {
        padding-top: 300px;
        height: 50vh;
    }

    .features-head,
    .features-sub-head,
    .docs-head {
        text-align: center; 
    }

    .features-sub-head img,
    .docs-head img{
        justify-self: center; /* this is to make sure that the images within the head section of each page is aligned to the center when we shrink */
    }

    .features-head .grid > *:first-child,
    .features-sub-head .grid > *:nth-child(2) {
        grid-column: 1;
    }
}

@media (max-width:620px) {
    .features-head img {
        display: none;
    } 
}

@media (max-width:720px) {
    .cli .grid{
        display: none;
    }
}

/* mobile view */
@media (max-width:500px) {
    .navbar {
        height: 110px;
    }

    .navbar.flex {
        flex-direction: column;
    }

    .navbar ul {
        padding: 10px;
        background-color: rgba(0,0,0,0.1);
    }

}

@media (max-width:450px) {
    .features-sub-head {
        height: 100vh;
    }
}

/* --------------------------------------------------------------- Key Frames and Animations-----------------------------------------------*/

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
}
  
@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
  
    100% {
      transform: translateX(0);
    }
}
  
@keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
}
  
@keyframes slideInFromBottom {
    0% {
      transform: translateY(100%);
    }
  
    100% {
      transform: translateX(0);
    }
}

@keyframes fade-in{
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
};