/* Color Palette */

/*
$softPink: #F9D8D4;
$yellow: #F9A734;
$DarkYellow: #FB8B24;
$green: #36964C;
$DarkGreen: #286E38;
*/


/* Background styles */

body { 
	background:
	/* Pineapple details */
	radial-gradient(circle closest-side at 50px 50px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 40px 60px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 60px 60px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 50px 70px, #FB8B24 3px, transparent 0),
	
	radial-gradient(circle closest-side at 150px 165px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 140px 175px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 160px 175px, #FB8B24 3px, transparent 0),
	radial-gradient(circle closest-side at 150px 185px, #FB8B24 3px, transparent 0),
	
	/* Pineapple base */
	radial-gradient(ellipse closest-side at 50px 60px, #F9A734 18px, transparent 0),
	
	radial-gradient(ellipse closest-side at 150px 175px, #F9A734 18px, transparent 0),
	
	/* Pineapple leafs */
	radial-gradient(circle closest-side at 30px 40px, #F9D8D4 15px, transparent 0),
	radial-gradient(circle closest-side at 40px 35px, #36964C 15px, transparent 0),
	radial-gradient(circle closest-side at 70px 40px, #F9D8D4 15px, transparent 0),
	radial-gradient(circle closest-side at 60px 35px, #286E38 15px, transparent 0),
	
	radial-gradient(circle closest-side at 130px 155px, #F9D8D4 15px, transparent 0),
	radial-gradient(circle closest-side at 140px 150px, #36964C 15px, transparent 0),
	radial-gradient(circle at 170px 155px, #F9D8D4 15px, transparent 0),
	radial-gradient(circle at 160px 150px, #286E38 15px, transparent 0)
	;
	background-color: #F9D8D4;
	background-size: 180px 210px;
	animation: animatedBackground .5s cubic-bezier(.61,-0.64,.58,1.46) forwards;
}


/* Animation */

@keyframes animatedBackground {
	from { background-position: 0 50%; }
	to { background-position: 0 0; }
}

* {
    color: black;
    font-style: bold;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
	Helvetica, Arial, "Lucida Grande", sans-serif;
    /*-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;*/
}

.header {
	text-align: center;
}

.section {
    margin: auto;
    width: 75%;
    border: black 3px solid;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #ffffffe5;
}

.section h3 {
    padding: 0 10px;
    font-size: larger;
}

.section h4 {
    padding: 0 10px;
    font-size: larger;
}

.section p {
    padding: 0 20px;
    font-size: larger;
}

.section.resources p {
	color: #36964C;
	-webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: black;
}

.section.resources a {
	text-decoration: none;;
}

.image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

ul {
	padding-left: 2rem;
	list-style-type: none;
}

ul li {
	padding-left: 2rem;
	background-image: url(./images/pineapple-1.1s-200px.svg);
	background-position: 0 0;
	background-size: 1.5rem 1.5rem;
	background-repeat: no-repeat;
}

.inner-implementation{
	display: flex;
}
.inner-implementation ol li{
	margin-bottom: 10px;
}



.ML-Images {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 20px;
	width: 90%;
}