*{
    margin: 0; padding: 0;
    box-sizing: border-box;
}

:root {
    --modern: 'Roboto', sans-serif;;
    --dark: #110022;
    --color: #7F00FF;
    --light: #fff;
    --otherDark: #2B2135;
}

.showcase{
    height:2800px;
}

#showcase-text{
    text-align: center;
    margin: 0 10%;
}

#instruction{
    margin: 0 10%;
    font-size: 70%;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin-top: .5rem;
}

.work{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.showcase-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 300px;
    height: 400px;
    padding: 1rem;
    background-color:var(--light);
    border-radius: 20px;
    margin-top: 150px;
  }

  .showcase-card img{
      width: 90%;
      border-radius: 20px;
  }

  .showcase-card h4{
    margin-top:1rem;
}

.links{
    display: flex;
    flex: row;
    justify-content: center;
}

.links i{
    font-size: 200%;
    color: var(--color);
    cursor: pointer;
    margin: 1rem 1rem;
}



@media screen and (min-width: 768px){
    #showcase-heading{
        font-size: 400%;
        width: 1000px;
        margin: 1rem 10%;
        text-align: left;

    }

    /* .swiper-wrapper{
        display: flex;
        justify-content: center;
    } */

    #showcase-text{
        font-size: 130%;
        width: 70%;
        text-align: left;
        margin: 1rem 10%
    }

    .showcase-card {
        width: 700px;
        height: 450px;
        padding: 2rem;
      }
    
      .showcase{
        height: 3200px;
    }

      #instruction{
        text-align: left;
   
    }

}