@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&family=Shadows+Into+Light&family=Single+Day&display=swap");
body {
  background-image: url(img/background.png);
  background-size: cover; }

#banner {
  width: 93%;
  height: 200px; }

.purple {
  color: #8a07f6; }

#header {
  font-family: "Single Day", cursive; }

a:link {
  text-decoration: none; }

a:hover {
  color: #d500d5;
  text-decoration: underline; }

h1, h2, h3, h4, h5 {
  color: #8a07f6;
  font-family: "Single Day", cursive;
  font-weight: 400;
  font-style: normal; }

.card-body {
  border-radius: 15px; }

#card1 {
  background-color: #9ee3e7; }

#card2 {
  background-color: #e0e4a6; }

#card3 {
  background-color: #9dff96; }

#center {
  text-align: center; }

#slide {
  text-align: center; }

nav {
  font-family: "Single Day", cursive;
  font-weight: 400;
  font-size: x-large; }
  nav a:hover {
    border: 2px solid #fc0101; }

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  font-family: "Single Day", cursive; }

.card {
  margin-bottom: 20px;
  background-color: #fefefe;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Single Day", cursive; }

.btn {
  font-weight: bold;
  padding: 10px 20px; }

#php {
  background-color: #e2d259;
  padding: 20px;
  border-radius: 5px;
  margin: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

footer {
  background-color: #27ae60;
  color: white;
  padding: 15px 0;
  font-family: "Single Day", cursive;
  font-weight: 400;
  font-style: normal; }

@media (max-width: 320px) {
  .container-columns {
    display: flex;
    flex-direction: column;
    align-items: center; }

  .left-column, .right-column {
    width: 90%;
    margin-bottom: 20px; } }