/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: pink;
  color: #c13e69;
    font-family: 'sophie_fancyregular';
  background-image: url('ui/pinklake.gif');
background-repeat: no-repeat; 
  background-position: center; 
  background-size: cover;
  background-attachment: fixed;
}

.button {
  border: none;
    background-color: pink;
  font-family: 'sophie_fancyregular';
  font-size: 30px;
  color: #c13e69;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {border: 2px solid #c13e69;}

.button1:hover {
  background-color: #c13e69;
  color: white;
}


.btn-group button {
  background-color: pink; /* Green background */
  font-family: 'sophie_fancyregular';
  font-size: 18px;
  color: #c13e69;
  border: 2px solid #c13e69; /* Green border */
  padding: 10px 4px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #c13e69;
  color: white;
}



.btn-group2 button {
  background-color: pink; /* Green background */
  font-family: 'sophie_fancyregular';
  font-size: 18px;
  color: #c13e69;
  border: 2px solid #c13e69; /* Green border */
  padding: 10px 0px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 25%; /* Set a width if needed */
}

.btn-group2 button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group2 button:hover {
  background-color: #c13e69;
  color: white;
}


.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: pink;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
    font-family: 'sophie_fancyregular';
  font-size: 14px;
  background-color: inherit;
  color: #c13e69;
  padding: 2px 1px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;

}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #c13e69;
  color: white;
}

/* Create an active/current "tab button" class */
.tab .active {
  background-color: #e889a2;
}

/* Style the tab content */
.tabcontent {
  float: right;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 65%;
  border-left: none;
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}