.row:after { content: "";
             display: table;
             clear: both; }

body { background-color: #999999; }

nav { float: left;
      display: table-row;
      justify-content: center; 
      width: 180px; 
      padding: 30px;
      color: #000000; 
      grid-auto-rows: auto; }

.wrapper { width: 99%;
           margin-left: auto;
           margin-right: auto;
           background-color: #EAEAEA; }
           
main { margin-left: 190px; 
       padding: 10px; }

.p { display: flex; 
    margin: 25px;
    margin-top: 0px;
    padding: 15px; 
    gap: 8px; 
    font-size: larger; }

h3 { display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 25px;
    margin-bottom: 0px;
    padding: 15px; 
    gap: 0px;
    font-size: xx-large; }

.button { border: none;
          padding: 30px 32px;
          text-align: center;
          text-decoration: none; 
          display: inline-block;
          font-size: 16px;
          margin: 4px 2px;
          transition-duration: 0.4s;
          cursor: pointer; 
          background-color: #FFFFFF;
          width: 100px;
          height: 55px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          }

.button:hover { background-color: #1f1f1f; }

.a { text-decoration: none; 
    color: #000000; 
    font-size: x-large;}

.a:hover { color: #FFFFFF; 
          animation-name: swingAnimation;
          animation-duration: 0.5s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: 1;
          animation-direction: normal;
          animation-fill-mode: both;
}

footer { text-align: center;
         font-style: italic;
         background-color: #6e6e6e; 
         margin: 0px;
         clear: both; }
    
header { background-color: #6e6e6e; 
         margin: 0px; }

.heading { margin: 0px;
           background-color: #6e6e6e; }

.img1 {
  float: right;
  border: 1px dotted black;
  margin: 0px 0px 15px 20px;
}

.img2 {
  float: left;
  border: 1px dotted black;
  margin-right: 15px
}


@keyframes swingAnimation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
