* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
.pacifico-regular {
    font-family: "Pacifico", serif;
    font-weight: 400;
    font-style: normal;
  }
  
.nunito {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* CSS HEX */
colors {
    --red: #ff2242;
    --orange: #ff8335;
    --yellow: #ffdf3d;
    --vanilla: #f4efb4;
    --mint: #d0edd5;
    --teal: #00b69a;
    --blue: #00b6e3;
    --purple: #937bcf;
    --pink: #ff61a9;
    }

h1, h2 {font-family: "Pacifico";}

body {
    height: 100vh; width: 100vw;
    font-family: "Nunito";
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background-image: url(/daycare/images/rainbow.webp);
    background-size:cover;
    opacity:0.2;
}

header {
    width: 100%; height: auto;
    text-align: center;
    line-height: 1.3;
}
#headertext {padding: 30px;}
header p {color: hsl(23, 100%, 60%); font-size: 20px; padding-top: 1rem;}
header h1 {
    font-size: 72px;
    color: hsl(23, 100%, 60%);
    filter: drop-shadow(-2px 2px 2px hsl(23, 100%, 20%));
        @media (max-width:650px) {
            font-size: 56px;
            line-height: 1;
            letter-spacing: 5px;
        }
}
/* navigation */
#navbar {
    position: relative;
    bottom:0;
    background-color: #ff8335;
    width: 100%;  
}
    #navbar ul{
        list-style-type:none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
    #navbar ul li, .subnav li{position:relative;}
    #navbar ul li a:hover {background-color: #937bcf;}
    #navbar ul li a{
        display:block;
        padding: 10px;
        text-align:center;
        color:white;
        text-decoration:none;
        background-color:#ff8335;
    }
    #navbar ul li ul{
        display:none;
        position:absolute;
        left:0;
        top:40px;
        width: 100%;
        z-index: 100;
        background-color: #ff8335;}

    #navbar ul li:hover ul {display:block;}

/* switch to vertical nav */

@media all and (max-width:530px) {
    #navbar ul {grid-template-columns: minmax(200px, 1fr);}
    #navbar ul li ul{
        display: none;
        position:relative;
        top:0;
        width:auto;}
    .subnav {border: solid white 2px;}
}

/* page content */

main {background-attachment: scroll;}
#welcome {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    background-color: hsl(257, 47%, 95%);
    margin: 10px 0 20px 0;
    overflow: hidden;
    max-height: 300px;
        @media (max-width:719px){max-height: 600px;}
}
#welcome div {
    flex: 1 1 50%;
    display: block;
    min-width: 360px;
}
.promise {
    padding: 0 10px 40px 10px;
        @media (max-width: 720px) {order: -1}    
}
#welcome h2 {color: hsl(23, 100%, 60%); letter-spacing: 1px; font-size: 32px;}

#welcome div img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    position: relative;
    top: -100px;
        @media (max-width: 1150px){
            position: sticky;
            top: 0;
        }
}
#welcome p {
    margin-bottom: 20px;}

.button {
    text-decoration: none;
    background-color: #937bcf;
    color: white;
    padding: 12px; margin: 10px 0;
    border-radius: 10px;
}
.button:hover {background-color: hsl(257, 47%, 45%);}

/* about team page */
#teampage h2, #formthanks h2{
    text-align: center;
    align-content: center;
    font-size: clamp(2rem, 3.5rem, 5rem);
    color: hsl(23, 100%, 60%);
    filter: drop-shadow(-2px 2px 2px hsl(23, 100%, 20%));
}

main#teampage {
    width: calc(90vw + 20px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(300px, 1fr);
    justify-content: space-evenly;
}
.banner {
    grid-row: 1;
    grid-column: 1/5;
}

.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 1rem;
    justify-content: space-evenly;
}
h2#bend {
    grid-row: 2;
    grid-column: 1/5;
}
.bend {
    grid-row: 3;
    grid-column: 1/4;
}

h2#redmond {
    grid-row: 4;
    grid-column: 1/5;
}
.redmond {
    grid-row: 5;
    grid-column: 1/4;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 450px;
    min-width: 250px;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card img{
    height: 250px;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

#t2, #t4, #t5 {
    object-position: 0 10%;
}

.card-body {
    flex: 1 1 200px;
    padding: 1rem;
}

.card-body h3+p {
    font-size: 1rem;
    color: hsl(257, 47%, 35%);
    font-style: italic;
    padding: 4px 0;
}

.card-body h3+p~p { 
    padding-bottom: 2rem;
}
.card-body {
    margin-bottom: 1rem;
}

#inquiryh2 {grid-row: 7;}

.apply {
    grid-row: 8;

    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    background-color: hsl(257, 47%, 95%);
    margin-top: 1rem;
}

.apply div {padding: 1rem;}

form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 7fr;
    gap: .5rem;
}

#join h3 {margin-bottom: 1rem;}

form label{
    align-content: center;
    /* border-bottom: #937bcf dotted 4px; */
}
#submit {border-bottom: none;}


form .button {
    margin: .5rem 0;
    max-width: 200px;
    cursor: pointer;}

footer {
    margin-top: 2rem;
    padding: 1rem;
    width: 100vw;
    background-color: #ff8335;
    color: white;
    font-size: 1rem;}

@media all and (max-width: 768px) {
    .team {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        gap: 1rem;
    }
    .apply {
        grid-template-columns: 1fr;
        grid-template-rows: auto-fit 1fr;
        padding: 0 1rem;
    }
}

@media all and (max-width: 530px) {
    .team {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        gap: 1rem;
    }   
}