/* Variables */
:root{
    --base : #fffbf6;
    --base_transparent : #fffbf6b0;
    --light_pink: #FDE3E5;
    --medium_pink: #fd9cc4;
    --bright_pink: #f272b8;
    --purple:#bb83bb;
}

/* Reset */

/* background image applied */
/* body {
  background-image: url(assets/background2.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  height: 100vh;
} */

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Typography */
h1, h2, h3, input {
    font-family: "Libre Caslon Text", serif;
    font-weight: 400;
    font-style: italic;
}

p, label {
    font-family: "Montserrat", sans-serif;
}

.background {
  background-image: url("assets/background2.webp");
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100%; 
}

/* ----------------------------------------- index.html */
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
  
}

.main-wrapper {
  max-width: 900px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--base_transparent);
  border-radius: 2rem;
  margin-top: auto;
  padding: 1rem;
}

@media only screen and (max-width: 630px) {
  .wrapper {
    margin: auto;
  }
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

@media only screen and (max-width: 630px) {
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
}

 @media only screen and (max-width: 630px) {
  .text-box {
    text-align: center;
  padding: 0 25px 25px 25px;
  }
}

.mock-up-image {
    width: 100%;
    object-fit: cover;
    height: 400px;
    max-width:400px;
    border-radius:24px;
    margin-left:auto;
}

.text-box {
  display: flex;
  flex-direction: column;
  gap:15px;
}

.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40px;
    color: #894d84;
}

.feature-box {
  border-radius: 11.803px;
    background: #FFF;
  padding: 6px 25.82px;
}

.start-button {
    border-radius: 25px;
    padding: 1rem;
    width: 10rem;
    border: none;
    color: white;
    font-size: 18px;
    background-color: #693e66;
}

.start-button:hover {
    background-color:#bb83bb;
    color: white;
}

footer {
    background-color: var(--light_pink);
    color: black;
    margin-top: auto;
    display: block;
    width: 100vw;
    text-align: center;
    padding-top: 10px; 
    position: fixed;
}  

/* Form and Calendar styles */
.body-div {
  width: 100vw;
  height: 100vh;
}

/* This class is called to hide or un-hide various sections*/
.hide {
  display: none;
}

/*  Form styles */

h2 {
  text-align: center;
  margin-top: 30px;
  color: #894d84;
  font-weight: bolder;
  font-style: italic;
}

.inputs {
  margin-top: 100px;
}

.input-fields {
  margin: 20px 0;
  border: none;
}

.my-btn {
  margin-top: 20px;
  background-color: transparent;
  color: #894d84;
  border-color: #894d84;
}

.btn:hover {
  color: #fffbf6;
  background-color: #bb83bb;
  border-color: #bb83bb;
  font-weight: bold;
}

.info-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
}

.list-group-item{
  background-color: transparent;
  border-bottom: none;
  margin: 30px 0;
}

.list-group-flush {
  text-align: left;
  margin-top: 15px;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

.circle-blue {
  border-color: lightblue;
  background-color: lightblue;
}

.circle-red {
  border-color: lightcoral;
  background-color: lightcoral;
}

.circle-green {
  border-color: lightgreen;
  background-color: lightgreen;
}
.circle-purple {
  border-color: #bb83bb;
  background-color: #bb83bb;
}

/* Calendar styles */

#calendar {
  margin-left: 20px;
}

.fc-theme-standard td {
  background-color: #fffbf6;
}

.fc-theme-standard th {
  background-color: #bb83bb;
}

.fc .fc-col-header-cell-cushion {
  color: #fffbf6;
}

.fc .fc-daygrid-day-number {
  color: #bb83bb;
}

.fc .fc-button-primary {
  background-color: transparent;
}

.fc .fc-multimonth-title {
  color: #bb83bb;
}
.fc-event-time {
  display: none;
}

/* Media Queries */
@media (max-width: 576px) {
  #calendar {
    margin: 0 15px;
  }
}

.phase-info {
  overflow-y: scroll;
  height: 30rem;
}

#calendar-section {
  overflow: scroll;
}