body{
    margin: 0px;
}
main{
    margin-left: 30px;
    margin-right: 30px;
    align-items:center;
}

h1{
    font-size: 50px; color: blue;
    text-align: center;
}
.navbar ul{
    list-style-type: none;
    background-color:hsl(162, 85%, 29%);
    padding: 0px; /*puts it to the complete left*/
    margin: 0px;  /*puts it to the very top*/
    overflow: hidden; /*hides extra things?*/
}
.navbar a{
    color: white;
    text-decoration: none;  /*gets rid of underline on the text*/
    padding: 15px;          /*makes bar thicker and adds spaces between elements*/
    display: block;         /*makes bar thicker?*/
}
.navbar a:hover{
    background-color:hsl(151, 95%, 36%);
}
.navbar li{
    float: left;
}

img {
  display: inline-block;
  margin: auto;
  width:100%;
}

table.table1, th.table1, td.table1{
  border: 1px solid hsl(162, 85%, 29%);
  border-collapse: collapse;
  padding:30px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

tr:nth-child(even) {
  background-color:hsl(147, 43%, 85%);
}

tr:nth-child(odd)
{
    background-color:hsl(204, 83%, 86%);
}

table.table2{
    border: 1px solid hsl(162, 85%, 29%);
    border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;
}

th.table2, td.table2
{
    border: 1px solid hsl(162, 85%, 29%);
    text-align:center;
    padding:10px;
}


/*dropdown*/
.dropbtn {
  background-color: hsl(162, 85%, 29%);
  color: white;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
}


.dropbtn:hover{
  background-color: hsl(151, 95%, 36%);
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: hsl(147, 43%, 85%);
  min-width: 194px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.dropdown-content a {
  color: black;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  text-align:center;
  border:1px solid green;
  font-size:20px;
}


.dropdown-content a:hover {
  background-color: hsl(147, 71%, 67%);
}


.show {
  display:block;
}

h4
{
  font-size:20px;
  text-decoration: none;
}



/*for the flipcards*/


.flip-card {
  background-color: transparent;
  width: 200px;
  height: 300px;
  perspective: 1000px; 
}


.flip-card-inner {
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}


.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


.flip-card-front, .flip-card-back {
  position:absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 2px solid black;
  border-style:dotted;
}

.flip-card-front {
  background-color: rgb(246, 246, 239);
  color: black;
}


.flip-card-back {
  background-color: hsl(164, 61%, 78%);
  color: black;
  transform: rotateY(180deg);
}