.myDiv {
    border: 5px outset blue;
    background-color: lightblue;    
    text-align: center;
    /*padding:10px*/
  }

  body {
      margin: 0;
  }

  /* NAV BAR */

  .nav-bar {
      width: 100%;
      height: 50px;
      margin: 0;
      background: black;

      /* Toggle between static and sticky */

      position: sticky;
      top: 0; 
  }
  
  .nav-bar > .element {
      width: 15.5%;
      line-height: 50px;
      text-align: center;
      color: white;
      display: inline-block;
      margin: 0;
      font-family: Arial;
      font-size:10px;
      text-decoration: none;
  }


  .nav-bar > .element:hover { 
        text-decoration: underline;
        background-color:grey;
  }	

  .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      }

    .center-circle {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:300px;
        height:300px;
        object-fit:cover;
        border-radius:50%;
        }
    .center-circle:hover {
            transform: scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
          }


  /* BODY */
  
  .quote1{
      width:25%;
      display: inline-block;
      height:50px;
      vertical-align:top;
  }

  .quote2{
      width:75%;
      display: inline-block;
      height: 50px;
      vertical-align: bottom;
  }
  .content {
      width: 80%;
      margin-left: 10%;
  }

  .outer{
      text-align: center
  }

  .moving-left{
      /*height: 100px;*/
      position: relative;
      transition: transform 0.3s ease;
      transform: translateX(0px);
      /*width: 100px;*/
  }
  .moving-left:hover{
      transform: translate(5%,5%);
  }

  .center-box{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: center;
      /*background: linear-gradient(to bottom right,white, blue);*/
      background: linear-gradient(to right,white,rgba(0,0,255,0.5),white);
  }

  .center-box1{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: center;
    /*background: linear-gradient(to bottom right,white, blue);*/
    background: linear-gradient(to right,white,rgba(207,159,255,0.5),white);
}

.center-box2{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: center;
  /*background: linear-gradient(to bottom right,white, blue);*/
  background: linear-gradient(#e66465, #9198e5);
}

  .grid { 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    align-items: center;
    }
  .grid img {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    max-width: 100%;
  }
  .grid img:hover{
    transform: scale(1.15);
}


  .column {
    float: left;
    width: 31.33%;
    padding: 5px;
  }

  .column1 {
    float: right;
    width: 10%;
    padding: 7px;
  }

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