body{
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Global */
#container{
  width: 80%;
  margin: auto;
  overflow:hidden;
}


/* showcase */

#showcase{
    min-height: 50px;
    position: relative;
    margin-top:2vh;
}


/* introduction*/

#introduction{
    min-height: 50px;
    text-align: left;
    color:#cf23b8;
    position: relative;

#introduction h2{
    margin-top: 20px;
    font-size:25px;
    margin-bottom:15px;
    font-weight: 500;
    color: crimson;
    text-align: left;
}


#introduction h3{
    margin-top: 20px;
    font-size:25px;
    margin-bottom:15px;
    font-weight: 500;
    color: crimson;
    text-align: left;
}
#introduction p{
    font-size:20px;
}


/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}


.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

.responsive {
  width: 100%;


  max-width: 400px;
  height: auto;
}