@import url('https://fonts.googleapis.com/css?family=Lobster');


body { 
    font-family: 'Lobster', cursive;
  background-color: white;
  color: black;
  width:43%;
  height:600px;
  float:left;
  background-color:#bab86c;
  padding:2em;
}

#loveeyes {
  height:600px;
  width:43%;
  float:right;
  background-color: #ffa500;
  padding:2em;
}

img:hover {
  transform: rotate(360deg);
  transition: transform 3s ease;
}

a {
  padding:2em;
  background-color:#8806CE;
}

#accordions {
  margin-top:2em;
}

a:hover {
  background-color:black;
  color:green;
}

.rad{
  background-color: yellow;
  cursor: pointer;
  border: none;
  width: 97%;
  padding:18px;
  border: none;
  text-align: left;
  color: black;
  text-decoration: none;
  margin: 6px;
  font-family: 'Lobster', cursive;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: yellow;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 40%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-family: 'Lobster', cursive;
  font-size: 1.5em;
  margin: 1em;
}

#leftside {
  float:left;
  width: 75%;
}

#rightside {
  float:right;
  width: 25%;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: olive-green;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}