body {
  background-image: url("https://images2.imgbox.com/82/b0/PDxzrstk_o.jpg");
}

.main{
  background-color: #d5e4f1;
  background: linear-gradient(90deg,rgba(201, 219, 233, 1) 0%, rgba(213, 228, 241, 1) 6%, rgba(213, 228, 241, 1) 92%, rgba(201, 219, 233, 1) 100%);
  border: 2px solid #cb9f6a;
  border-radius: 20px 20px 5px 5px;
   box-shadow: 6px 8px rgba(177, 181, 181, 0.5);
  padding-top:20px;
  padding-bottom:20px;
  margin-top:40px;
  width:75%;
  display: block;
 margin-right: auto;
 margin-left: auto;
 color:#491f09;
}

h1{
  text-align: center;
  color:#5f290c;
  font-size:50px;
  border-bottom: 4px dotted #cb9f6a;
  padding-bottom:40px;
  width:80%;
  display: block;
 margin-right: auto;
 margin-left: auto;
}

.potimg{
  float:left;
  margin-top:-20px;
  margin-left:150px;
  margin-right:-80px;
  padding-top:10px;
}

.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}
.coming-soon-regular {
  font-family: "Coming Soon", cursive;
  font-weight: 500;
  font-style: normal;
}
p{
 width:80%;
 display: block;
 margin-right: auto;
 margin-left: auto;
}

/*navigation bar*/
.nav{
 width:80%;
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align:center;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left:20px;
  padding-bottom:20px;
  overflow: hidden;
   border-bottom: 4px dotted #cb9f6a;
}

li {
  float: left;
  font-size: 17px;
}

li a {
  display: block;
  padding: 8px;
   text-decoration: none;
}

/*links*/
a:link {
  color: #5f290c;
}
a:visited {
  color: #5f290c;
}
a:hover {
  color: #a0a56f;
}
a:active {
  color: #5f290c;
}

.card{
 width:80%;
 display: block;
 margin-right: auto;
 margin-left: auto; 
 margin-top:40px;
}

.sub{
  font-size:23px;
  color:#5f290c;
  background-color:#e0e1d0;
  margin-top:70px;
  max-width:200px;
  padding-top:10px;
  padding-bottom:8px;
  text-align:center;
  border: 1px solid #cb9f6a;
   border-radius: 20px 20px 0 0;
    box-shadow: 5px 0 rgba(177, 181, 181, 0.5);
}

.cardbody{
  font-size:15px;
   background-color:#FAF9F6;
 background: radial-gradient(circle,rgba(250, 249, 246, 1) 10%, rgba(250, 249, 246, 1) 82%, rgba(243, 241, 233, 1) 100%);
   padding:20px;
  margin-top:-30px;
  border-radius: 0px 5px 5px 5px;
  border: 1px solid #cb9f6a;
  box-shadow: 5px 6px rgba(177, 181, 181, 0.5);
}
 
 th{
    text-align:left;
  }

table, th, td {
  border-bottom: 1px solid #624522;
   border-collapse: collapse;
  padding-top:20px;
  padding-bottom:10px;
}
table{
  margin-bottom:40px;
}
.button{
 margin-top:0px;
 background-color:#f0f0e8;
 padding:10px;
 border-radius:30px;
 border: 1px solid #cb9f6a;
 box-shadow: 2px 3px rgba(177, 181, 181, 0.5); 
 text-align: center; 
 width:150px;
 margin-left:70%;
 font-size:15px;
}
 /* If the browser window is smaller than 800px, make the columns stack on top of each other */
@media only screen and (max-width: 800px) {
  .main{
    width:100%;
  }
  .card{
    width:90%;
  }
  .potimg{
    float:none;
    display:block;
    margin:auto;
    margin-bottom:-20px;
  }
  .button{
    display:block;
    margin:auto;
}