:root {
--teal: #10a19b;
--pink: #fc5da7;
--white: #ffffff;
--light-teal: #ebf9f8;
--light-pink: #ffd8e9;
--light-gray: #e4e5eb;  
--dark-teal: #2e9e97;
--pointFive-em: 0.5em;
}

* {
box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    color: var(--teal);
    background-image: url(../images/background.png);
    background-size: 50%;
    background-color: var(--light-teal);
}

a{
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
}

a:hover, a:focus{
    color: var(--pink);
}

img{
    max-width: 100%;
}

ul{
    margin: 0;
    padding: 0;
}

ul li{
    list-style-type: none;
}

h1{
    font-size: 1.5em;
}

h1, h2, h3, h4, h5, h6{
    font-weight: bold;
    color: var(--pink);
}

#main-container{
    margin: 50px auto;
    width: 60%;
    border-radius: 1em;
    padding: 1% 2%;
    border: 1em solid var(--white);
    background-color: var(--white);
    box-shadow: 5px 10px #2e9e97;
}

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.flex-child{
    flex: 1;
    margin: 1%;
    padding: 1%;
}

.flex-grow-6{
    flex-grow: 6;
}

.text-center{
    text-align: center;
}

.text-justify{
    text-align: justify;
}

.text-pink{
    color: var(--pink);
}

.text-teal{
    color: var(--teal);
}

.big-title{
    text-align: center;
    text-transform: uppercase;
}

.mini-caption{
    text-align: center;
    margin-top: 0;
    margin-bottom: -12px;
}

.main-caption{
    text-align: center;
    color: var(--teal);
}

.pink-box{
    background-color: var(--pink);
    box-shadow: 4px 8px var(--light-pink);
    color: var(--white);
    border-radius: 0.50em;
}

.teal-box{
    background-color: var(--light-teal);
    box-shadow: 4px 8px var(--dark-teal);
    color: var(--teal);
    border-radius: 0.50em;
}

.section{
    border-top: 0.25em solid var(--teal);
}



/* ------- Start NAVIGATION ------- */
.logo-container{
    flex-basis: 12%;
}

.nav-container ul{
    background-color: var(--teal);
    border-radius: 2em;
    text-align: center;
}

.nav-container ul li:hover, .nav-container ul li:focus{
    background-color: var(--white);
    color: var(--pink);
    border-radius: 2em;
}
/* ------- End NAVIGATION ------- */