@font-face {
  font-family: "Montserrat-Regular";
  src: url("/assets/fonts/Montserrat/Montserrat-Regular.woff");
  font-display: auto;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Medium";
  src: url("/assets/fonts/Montserrat/Montserrat-Medium.woff");
  font-display: auto;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Light";
  src: url("/assets/fonts/Montserrat/Montserrat-Light.woff");
  font-display: auto;
  font-style: normal;
}
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/Comfortaa/Comfortaa-Light.ttf");
  font-display: auto;
  font-style: normal;
}
body {
  margin: 0;
  font-family: "Montserrat";
}
#showcase {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 80vh;
  background-image: url("/assets/photos/photo-of-toddler-smiling-1912868.jpg");
  display: flex;
  align-items: center;
}
#showcase-content p {
    color: white;
}
#showcase-overlay {
  width: 100%;
  height: 80vh;
  position: absolute;
  background: #333;
  opacity: 0.6;
  z-index: 1;
}
.our-family-content .activities-paragraph {
    padding-bottom: 2rem ;
}
#showcase-content {
  padding: 10%;
  position: relative;
  z-index: 2;
  font-family: "Comfortaa";
  font-size: 70px;
  color: #ffffff;
}
.our-family{
    width: 100%;
}
.our-family-content{
    max-width: 1200px;
    margin: auto;
    padding: 100px 20px;
}
.our-family-forms{
    padding: 20px 0;
}

.family-forms{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem 0 0.2rem;
}
.family-forms input{
    border: 2px solid #BCE0FD;
    margin: 10px;
    border-radius: 10px;
    height: 50px;
    padding: 20px;
}
.upload-files{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 30px;
}
textarea {
    width: 98.5%;
    display: grid;
    grid-area: 3 / 1 / span 1 / span 2;
    min-height: 150px;
    border: 2px solid #BCE0FD;
    margin: 10px;
    border-radius: 10px;
    padding: 20px;
}

.upload-content{
    display: grid;
   padding: 0 5%;
}
.upload-content .general-button {
    background-color: #95c1e3;
    font-size: 17px;
}
.upload-content .general-button:hover {
    background-color: #e6cdba;
}

a.submit {
    margin-left: 20px;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

@media(max-width:1060px){
    .family-forms{
        display: grid;
        grid-template-columns: 1fr;
    }
    .text-input{
        margin:20px 0 !important;
        width: 100%;
        display: grid;
        grid-area: 5 / 1 / span 1 / span 1;
        height: 150px !important;
    }
    .upload-files{
        display: grid;
      
        justify-self: center;
    }
    .upload-content{
        
        padding-bottom: 50px;
    }
}
@media(max-width:692px){
    .upload-content .general-button {
        font-size: 0.8rem;
    }
}
@media(max-width:639px){
    .upload-files{
        display: flex;
        flex-direction: column;
        align-self: center;
    }
}
@media(max-width:600px){
    .family-forms{
        display: grid;
        grid-template-columns: 1fr;
    }
    .text-input{
        margin:20px 0 !important;
        width: 100%;
        display: grid;
        grid-area: 5 / 1 / span 1 / span 1;
        height: 150px !important;
    }
    .upload-content{
       justify-self: center;
    }
}