@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
  background-color: #FAE8E0;
}

#gamerGirl {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

#htmlOut {
  margin-bottom: 55px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  height: 600px;
}

#journey {
  text-align: center;
}

#thankYou {
  text-align: center;
}



footer {
  background-color: #fff;
  margin-top: 10px;
}

h1 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

h2 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

#favList {
  background-color: #B6E2D3;
  text-align: left;
}

#home h2 {
  text-decoration: underline;
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

#aboutMain {
  padding-bottom: 80px;
}
.iframe-container {
  width: 100%;
  text-align: center; 
  margin-top: px; 
  background-color: #B6E2D3;
}

/* Added code for button */
.seeMe {
  /* border-style: dashed;
  border-width: 4px;
  border-color: green;  */
  border: dashed 4px rgb(128, 0, 119);
}

#CodeAcademy {
  border: dashed 4px rgb(128, 0, 119);
}
/* Ensures that the cards have equal length */
.row-cols-1 > .col,
.row-cols-md-2 > .col {
  display: flex;
  flex: 1 0 auto;
}


.row-cols-1 .card,
.row-cols-md-2 .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make sures the card body fills up any space */
.card-body {
  flex: 1 1 auto;
}

#currentList {
  background-color: #B6E2D3
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #fafafa;
  text-align: justify;
  margin-right: 25px;
  margin-left: 25px;
}

li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Font Section */
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lora-unique {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}