: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%;
}

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

.modal p, /*---- override pre-defined modal pop-up content css ----*/
.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{
	padding: 2% 0;
	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 ------- */



/* ------- Start PROFILE ------- */
.profile-container{
	background-color: var(--pink);
    border-radius: 50% 0;
    width: 60%;
	margin: auto;
}

.profile-portrait{
	border-radius: 50%;
	border: 1em solid var(--white);
	transition: opacity 1s ease-in-out;
}

.hello-hand{
	width: 10%;
	margin-right: 2%;
}
/* ------- End PROFILE ------- */



/* ------- Start PROJECTS ------- */
.proj-box{
	flex-basis: 30%;
	line-height: 1.25;
	text-align: justify;
	padding: 2%;
}
/* ------- End PROJECTS ------- */



/* ------- Start CONTACT ------- */
.contact-form{
	width: 80%;
	margin: 0 auto;
}

.contact-form input, .contact-form textarea{
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid var(--light-gray);
	border-radius: 0.5em;
	padding: 0.50em;
	color: var(--pink);
}

.contact-form textarea{
	resize: none;
	height: 120px;
}

.contact-form button[type="submit"]{
	background-color: var(--dark-teal);
	color: var(--white);
	border-radius: 0.5em;
	height: 2em;
	width: 100%;
	cursor: pointer;
}

.contact-form button[type="submit"]:hover{
	background-color: var(--pink);
}