/* This is a CSS comment */

/* Selects the body element and sets the background color and text color */
body {
    background-color: lightpink; /* Sets the background to a light blue color */
    color: #333; /* Sets the default text color to a dark gray */
    font-family: Arial, sans-serif; /* Specifies the font style */
    margin: 0; /* Adds space around the body content */
    padding: 0;
}

/* Selects all h1 headings */
h1 {
    font-size: 350%; /* Makes the font size 2.5 times the default */
    /*border-bottom: 2px solid blue; Adds a blue border to the bottom */
    padding-bottom: 0px; /* Adds space between the text and the border */
}

h2 {
    font-size: 8cqw;
    white-space: nowrap;
    overflow: visible;
    padding-bottom: 00px;
    font-family: "Playwrite IN", cursive;
    text-shadow: 2px 2px #333;
}

/* Styles for screens wider than 768px (tablets and desktops) */
@media screen and (min-width: 768px) {
    h2 {
        font-size: 6cqw;
    }
}

/* Styles for screens wider than 1024px (large desktops) */
@media screen and (min-width: 1024px) {
    h2 {
        font-size: 5cqw;
    }
}

@media screen and (min-width: 1824px) {
    h2 {
        font-size: 3cqw;
    }
}

/* Selects all p paragraphs */
p {
    color: black; /* Sets paragraph text color to red */
    font-size: 110%; /* Slightly increases the paragraph font size */
    line-height: 1.5; /* Increases space between lines for readability */
}

/* Selects elements with the class "highlight" */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

#amelia-intro {
    width: 100%;
    margin: 0 10% 0 0;
}

#moms-helper {
    width: 100%;
    margin: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    background-color: white;
    color: black;
    text-align: center;
}

.contact {
    width: 100%;
    margin: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    background-color: white;
    color: black;
    text-align: center;
    align-items: center;
}

#skills-training {
    width: 100%;
    margin: auto;
    padding: 0;
    background-color: lightpink;
    color: black;
    text-align: center;
    align-content: center;
    vertical-align: top;
    padding-top: 35px;
    padding-left: 0px;
}

#skills-training2 {
    width: 100%;
    margin: 0;
    padding-top: 0px;
    padding-bottom: 35px;
    background-color: lightpink;
    color: black;
    text-align: center;
    align-items: center;
    padding-bottom: 35px;
}

.intro-container
{
    width: 100%;
    background-color: cornflowerblue;
    overflow: visible;
    padding-bottom: 20px;
}

p.greeting
{
    font-size: 200%;
    font-family: 'Indie Flower', cursive;
    margin: 0;
    padding: 0;
}

p.moms-helper
{
    margin: 0;
    padding: 0;
}

.picture-container
{
    position: relative;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.picture-container2
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.picture-container .polaroid
{
    position: absolute;
    border: 1px solid darkgrey;
    background-color: white;
    padding: 30px 30px 60px 30px;
    /*box-shadow: 5px 10px 10px black;*/
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */
}

.picture-container2 .polaroid_small
{
    position: relative;
    border: 1px solid darkgrey;
    background-color: white;
    padding: 15px 15px 35px 15px;
    /*box-shadow: 5px 10px 10px black;*/
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    margin-left: 30px;
}


.picture-container .polaroid:after
{
    content: attr(polaroid-caption);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 30px;
    text-align: center;
    font-family: 'Indie Flower', cursive;
}

.picture-container2 .polaroid_small:after
{
    content: attr(polaroid-caption);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 15px;
    text-align: center;
    font-family: 'Indie Flower', cursive;
}

.picture-container .image1
{
    left: calc(50% - 120px);
    top: 40px;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}

.picture-container .image2
{
    left: 200px;
    top: 100px;
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}

/* Selects the element with the ID "main-content" */
#main-content {
    width: 90%;
    margin: auto; /* Centers the content block horizontally */
}

.img_rounded_corners {
    border-radius: 15%;
    width: 100%;
    height: auto;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

.container {
    display: flex; /* Makes the children flex items */
    /*justify-content: space-around;*/
    gap: 20px;
    width: 100%; /* The container takes up the full width of its parent */
    align-items: center;
}

.spacer {
    flex-grow: 1;
}

.title-div {
    container-type: inline-size;
    width: 100%; /* The left div takes up 30% of the container's width */
    padding: 0px;
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: visible;
}

/*.right-div {
    width: 18%;
    padding: 10px;
    margin-right: 10%;
}*/

.left-div-st {
    container-type: inline-size;
    width: 50%; /* The left div takes up 50% of the container's width */
    padding: 10px;
    color: black;
    margin-left: auto;
    margin-right: auto;
}

.right-div-st {
    width: 50%; /* The right div takes up 50% of the container's width */
    padding: 10px;
    margin-right: 10%;
}

div.div-bordered {
    border: 3px solid #000000;
}

ul.list-skills {
    text-align: center;
    list-style-type: none;
}

div.post-it-container {
    display: flex; /* Makes the children flex items */
    /*justify-content: space-around;*/
    justify-content: center;
    margin-left: 0px;
    padding-top: 22px;
    padding-bottom: 22px;
    gap: 0px;
    width: 90%; /* The container takes up the full width of its parent */
    align-items: center;
}

.post-it-note {
  /* Sizing and spacing */
  width: 200px;
  padding: 5px;
  margin: 0px; /* Space around the div from other elements */
  
  /* The "post-it" appearance */
  background-color: #ffc; /* Classic yellow color */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transform: rotate(
    -2deg
  ); /* A slight tilt for a more realistic, casual look */
  
  /* Text styling */
  /*font-family: 'Kalam', cursive; /* A handwritten-style font if available */*/
  /*font-size: 1rem;*/
  line-height: 1.4;
  color: #333;
}

p.pin-text {
    font-size: 13px;
}

/* Optional: Add a different color variation */
.post-it-note.blue {
  background-color: #ccf;
  transform: rotate(2deg); /* Tilt in the opposite direction */
}

.image-note {
  /* Sizing and spacing */
  display: inline-block;
  padding: 4px;
  padding-bottom: 0px;
  margin: 0px; /* Space around the div from other elements */
  /*margin-left: 0px;*/
  
  /* The "post-it" appearance */
  background-color: white; /* Classic yellow color */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transform: rotate(
    +4deg
  ); /* A slight tilt for a more realistic, casual look */
  
  /* Text styling */
  /*font-family: 'Kalam', cursive; /* A handwritten-style font if available */*/
  /*font-size: 1rem;*/
  color: #333;
}

img.rc {
    width: 177px;
    height: 105px;
}

img.aubrey {
    width: 192px;
    height: 144;
}

img.phone_number {
    height: 12px;
    width: auto;
}



.contact-intro > * + * {
  margin-top: 1rem;
}

.contact-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

.contact-description {
  color: rgb(107 114 128);
}

.form-group-container {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.form-input::placeholder,
.form-textarea:focus-visible {
  color: #6b7280;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.form-textarea {
  min-height: 120px;
}

.form-submit {
  width: 100%;
  margin-top: 1.2rem;
  background-color: cornflowerblue;
  color: #fff;
  padding: 13px 5px;
  border-radius: 0.375rem;
}

.contact-section {
  width: 80%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  /*padding: 3rem 1rem;*/
  text-align: center;
}