body {

      background-repeat: no-repeat;
      background-position: center;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f9f9f9;
   }


   .headtitle {
      color: palevioletred;
      font-size: 30pt;
      letter-spacing: -3px;
   }

   .subword {

      color: black;
   }

   .subheadtitle {
      text-transform: uppercase;
      color: purple;

   }


   /* a:link{
   color:purple;
   text-decoration: none;
   border-bottom: 1px solid;
} */

   /* a:visited{
color:darkgreen;
}

a:hover{
color:green
border-bottom:none; */
   /* 
}


a:active{
color:blue;

} */

   /* ul{
list-style-type:square;
background-color: coral;
}

ul.in li{

   list-style-position: outside;
}
 */


   ul {
      padding: o;
      list list-style: none;
      background-color: palevioletred;
   }

   ul li {
      display: inline-block;
   }

   ul li a {
      display: block;
      padding: 10px 25px;
      color: chartreuse text-decoration: none;
      text-transform: uppercase;
   }

   ul li a:hover {

      color: whitesmoke;
      background-color: black;

   }

   .lagos {
      width: 100px;
      height: 70px;
      border: 3px solid palevioletred;
      border-bottom: none;
      border-top: none;
      background-color: palevioletred;

   }

   .socialmedia {
      width: 50px;
      height: 50px;
   }

   .socialmedia:hover {

      border: 3px solid palevioletred;
      transform: (360deg);
      transition: 3s;
   }

   .productimg {
      width: 200px;
      height: 200px;
      border: 9px solid palevioletred;
      border-radius: 20%;
      border-bottom: none;
      border-top: none;
   }


   /*   .productimg:hover {

      border: 0px solid palevioletred;
      background-color: purple;
   } */



   button {

      width: 240px;
      height: 40px;
      background-color: palevioletred;
      color: black;
      font-weight: bold;
      text-transform: uppercase;

      border: 0px solid palevioletred;
   }


   button:hover {
      background-color: white;

      border: 1px solid palevioletred;
   }


   .footertable {

      border: 0px solid palevioletred width:100%;
      height: 40px;


   }


   .footercol {

      color: black;
   }


   .inputtype {
      width: 240px;
      height: 40px;
   }



   label {

      font-weight: bold;

   }


   input[type=text],
   input[type=email],
   input[type=month],
   input[type=year],
   input[type=password] {
      width: 280px;
      height: 30px;
      padding-left: 15px;
   }

   textarea {
      width: 280px;
      height: 100px;
   }


   input[type=button] {
      width: 280px;
      height: 40px;
      background-color: palevioletred;
      color: black;
      font-size: 10pt;
      font-weight: bold;
      border: 0px solid palevioletred
   }



   input[type=button]:hover {

      background-color: whitesmoke;
      font-weight: bold;
      border: 1px solid palevioletred
   }

   .clea {

      padding-bottom: 15px;
   }


   .footertable {

      border: 0px solid palevioletred;
      width: 100%;
      height: 40px;
   }


   .footercol {
      text-align: center;
      background-color: palevioletred;
      color: black;
   }

   .textarea {
      width: 580px;
      padding-left: 10px;
      height: 350px;
   }


   #feedback {
      font-size: 20pt;
      color: blue;

   }



   #calculatorbtn {
      width: 55px;
      height: 40px;
      background-color: palevioletred;
      color: black;
      font-size: 10pt;
      font-weight: bold;
      border: 0px solid palevioletred
   }


   #calculatorbtn:hover {
      background-color: whitesmoke;
      font-weight: bold;
      border: 1px solid palevioletred
   }


   .map {

      width: 50%;
      text-align: center;
   }