/*
* The CSS box-sizing property allows us to include the padding and border
* in an element's total width and height. We use universal selector to apply
* this rule to all elements.
* And to choose font family.
*//*
* The userSelect property sets or returns whether the text of an element can be selected or not.
*/

/* For all browsers
 * ================= */
 /* The technique called Reset CSS proposes to reduce style inconsistencies between browsers 
    by removing all default styles: 
        margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
 
 */

* {
    box-sizing: border-box; /* This will make it so the border you added doesn't add any size to your elements. */
    -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
    margin: 0;
    padding: 0;
    outline: none;
    outline-color: transparent;
    border: none;
    border-color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax *//* CSS user-select Property */
    background-clip: padding-box; /* Default value: border box */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
}

*::before,
*::after {
    box-sizing: border-box; /* This will make it so the border you added doesn't add any size to your elements. */
    -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
    padding: 0;
    margin: 0;
    border: none;
}

*::-moz-focus-inner {
    border-style: none; /* Remove the inner border in Firefox. */
}

/*  Certain types of motion-based animations can cause discomfort for some users. In particular, people with vestibular disorders have sensitivity to certain motion triggers.
*   The @media at-rule has a media feature called prefers-reduced-motion to set CSS based on the user's preferences. It can take one of the following values:
*       reduce
*       no-preference
*/
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* For preventing adjustments of font size after orientation changes in IE and iOS.
 * ================================================================================ */

html {
    height: auto; /* It will automatically adjust the height to allow the content to be displayed correctly. */
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* -webkit- vendor prefix for Safari */
    -moz-text-size-adjust: 100%;  /* -moz- vendor prefix for Firefox */
    scroll-behavior: smooth; /* To add a smooth scrolling effect to the page. */
    font-size: 16px;
}

body {
    height: auto;
    text-align: center;
    color: #000; /* black */
    font-family: "Raleway", sans-serif;
    position: relative;
}

#onlinePortfolio{ /* flex box */
    font-family: 'Raleway', sans-serif;
    background: #fffff0 repeating-linear-gradient(90deg,#fffff0, #f5f5dc 1%); /* ivory | beige */
}

section {
    width: 100%;
}

/* A class for all Headers with <p> tag 
*****************************************/
.description,
p.description {
    font: 400 20px "Raleway", sans-serif;
    border-top: 3px groove #808000; /* oliveDrab */
    padding: 10px 0 24px 0; /* Visual effect. */
    height: 61px;
    max-width: 300px; /* Set the width of the <header> */
}

p.description-large {
    font: 400 20px "Raleway", sans-serif;
    border-top: 3px groove #808000; /* oliveDrab */
    padding: 10px 0 24px 0; /* Visual effect. */
    height: 61px;
    max-width: 600px; /* Set the width of the <header> */
}

/* Text *//* class="comment" */
p.comment { 
    width: 100%;
    max-width: 600px; /* To set the maximum width of the element. */
    font: 400 1.3rem "Raleway", sans-serif;
    line-height: 1.6;
}

/* To separate paragraphs */
p.lineBreak32 {
    padding: 32px 0;
}

p.lineBreak16 {
    padding: 16px 0;
}

/* A note to indicate the website themes/template © Copyright 2022 Mobirise and others. */
span.note {
    display: block;
    font: 400 16px 'Raleway', sans-serif;
    color: #000; /* black */
    margin: 16px 0 0 0;
}

span.publication-date {
    margin: 16px 0;
    width: 95%;
    max-width: 1200px;
    text-align: right;
}

span.iei {
    margin: 50px 0 16px 0;
    width: 95%;
    max-width: 1200px;
    text-align: right;
}

/* To highlight */
span.text { 
	font: 600 22px "Raleway", sans-serif;
    letter-spacing: 2px;
}

/* Bloxckquote 
**************//* To separate sections */
blockquote { /* flex item */
    border-top: 6px groove #f0ead6; /* Sweet Corn *//* The Hottest Spring/Summer Colors 2019 */
    border-bottom: 6px groove #f0ead6;
    padding: 59px 32px; /* Visual efect */
    width: 100%;
    background-color: #fffff0; /* ivory */
    cursor: text;
}

blockquote q {
    display: block; /* because it is an inline element */
    font: 400 26px 'Raleway', sans-serif;
    max-width: 600px; /* To set the maximum width of the element. */
    margin-inline: auto;
}

blockquote.mediumQuote q, 
blockquote.largeQuote q {
    max-width: 800px;
}

p.author-quote {
    margin: 10px 0 0 0;
    font: 400 16px 'Raleway', sans-serif;
}

/* In common */
/* All links have an underline */
/* Only change the color */
.line {
    text-decoration: underline;
    text-decoration-thickness: 2px; /* To set the thickness of the decoration line. */
    text-underline-offset: 5px; /* To improve readability, I use CSS properties like text-underline-offset to separate the text from the line. */
    cursor: pointer;
}

/* <a class="link">  to open an external page */
.link {
    display: block;
    padding: 10px;
    margin: 10px 0 0 0;
    color: #000; /* black */
    text-decoration-color: #800000; /* maroon *//* just change the color */
}

/* <a class=" btnLink  line"> | button-like links with other properties */
.btnLink { /* transition effect */
    display: block; 
    max-width: 300px; /* To set the width less than the width of the containing block, for that, set margin left/right auto */
    margin-inline: auto; /* Centered item */
    font: 400 20px 'Raleway', sans-serif;
    padding: 15px 0 20px 0;
    color: #fffff0;
    text-decoration-color: #fffff0; 
    background-color: #635836; /* Tofu 30% Lighter rgb(99, 88, 54) */
    border-radius: 7px;
    text-align: center;
}

/* on hover */
.btnLink:focus,
.btnLink:hover { /* class="boxShadow"*/
    color: #fffff0; /* ivory */
    background-color: #52492d; /* Tofu 25% Lighter rgb(82, 73, 45) */
    border-radius: 7px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -webkit-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);   
}

/* The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure 
*  without using float or positioning.*/
/* Flexbox helps me design my webpage so that it looks good on any screen size. */
.flexBox {
    display: flex;
    display: -webkit-flex;
    align-items: center; /* Position the flex items in the center, inside the same container.*/
    justify-content: center;
    flex-flow: column nowrap; /* The "flex-direction: column;" stacks the flex items vertically (from top to bottom) */
}

.flexBoxWrap {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap; /* flex-flow property is a shorthand property: flex-direction flex-wrap|initial|inherit; */
}

/* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
.overlayImg {/* All photos have an image saver */
    position: relative;
    background-color: transparent;
    z-index: 1; /* z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items. */
    pointer-events: none; /* The pointer-events property defines whether or not an element reacts to pointer events. | Do not allow copying or downloading an image. */
}

/* For all <img class="responsive"> | All images hava an id where I place the properties that each image needs to be really responsive */
img.responsive { /* class */
    display: block;
    width: 100%; /* To scale both up and down on responsiveness with width: 100% and height: auto.*/
    height: auto;
    margin-inline: auto;
    object-fit: cover;
}

/* Use the transition-duration property specifies how many seconds (s) a transition effect takes to complete. 
*  Only for some blocks. */
.transitionEffect {
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
}

/* box shadow property *//* Images | Buttom-lile links */
.boxShadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* This value belongs to w3Schools | to create paper-like cards */
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* To define thematic changes in the content:*/
hr.thematicChanges {
    display: none;
    width: 100%;
    height: 3px; /* A horizontal line with a height of 3 pixels, really 2px are for border. */
    margin: 0 auto;
}

/* To define thematic changes in the content:*/
.newProjects {
    width: 100%;
    height: 3px; /* A horizontal line with a height of 3 pixels, really 2px are for border. */
    margin: 0 auto;
    display: block;
    border: 1px inset #fffff0;
    background-color: #fffff0;
}

/* A dialog box as a dismissible alert.
*************************************** */
/* The dialog (background) */
#myDialog {/* flex box */
    position: fixed; /* Stay in place */
    top: 0;
    font: 400 18px 'Raleway', sans-serif;
    min-height: 60px;
	background-color: rgba(0,0,0, 0.3);
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-width: 1400px;
    padding: 260px 16px;
    margin-inline: auto;
    z-index: 100;
}

/* form */
#myDialog form { /* flex box */
    position: relative;
    border: 2px solid white;
    background-color: rgba(255, 255, 255, 0.4); /* RGB color value with an alpha channel - which specifies the opacity for a color.*/
    -webkit-backdrop-filter: blur(6px);
  	backdrop-filter: blur(60px); /* This property is used to apply a graphical effect to the area behind an element. */
    padding: 32px; 
    width: 80%;
}
        
#myDialog p {
    padding: 16px;
    line-height: 1.6;
    width: 100%;
}

#myDialog p:nth-of-type(3) {
    margin: 0 0 64px 0;
}

a#dialogLink {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* button */
#closeDialog {
    position: absolute;
    right: 32px;
    bottom: 32px;
    display: block;
    font: 400 18px 'Raleway', sans-serif;
    padding: 8px 16px 16px 16px;
    border-radius: 5%;;
    background-color: rgba(128,0,0,0.6);
    color: #fff;
    cursor: pointer;      	
}

#closeDialog:hover {
    background-color: rgba(128,0,0,1.0);
}

/* Specifcations for extra small devices (phones, 600px and down).
================================================================== 
*//* Designing for mobile before designing for desktop or any other device,
this will make the page display faster on smaller devices. 
*//* 
*   <nav> | flex item & flex box
*********************************/
#buttonsContainer { /* I use flexbox model to position elements inside the box, rather than CSS float property. */
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    z-index: 23;
    overflow: hidden;
    width: 100%; /* Full widht */
    height: 60px;
    flex-direction: row;
}

/* Navigation content used for  Medium/Large devices and Desktop, disbled */
#navBar {
    background-color: #800000; /* maroon */
    display: none;
}

/* Buttons to open different contents. */
/* A flex item <div class="dropdown">: A container for wrap a <button> and <div id="dropdown-content" class="flexBox> */
.dropdown { /* flex item */
    height: 100%;
    width: 100%;
}

/* <button> to open the dropdown menu. */
/* Contrast ratio is the difference between the maximum and minimum brightness of a computer display.*/
#dropbtn { /* Execute a JavaScript when a button is clicked and then, open dropdwon-content.*/
    height: 100%;
    width: 100%;
    font: 500 20px 'Raleway', sans-serif;
    display: inline-block;
    text-transform: capitalize;
    /* contrast ratio : 10.85 */
    color: #fffff0; /* ivory */
    background-color: #800000; /* maroon */
}

/* Symbol: white down-pointing triangle. */
#triangle1 {
    display: inline-block;
    font: 600 14px 'Raleway', sans-serif;
    margin: 0 0 0 5px;
    color: #fffff0; /* ivory */
}

.dropdown-toggle:hover #triangle {
    color: #fffff0; /* ivory */
}

/* <div> with <a> tags */
#dropdown-menu { /* flexBox */
    display: none; 
    width: 100%;
    background-color: #fffff0; /* ivory */
    box-shadow: 2px 8px 8px 0px rgba(0,0,0,0.2);
    position: fixed;
    z-index: 11;
}

/* Click and go to diferent sections */
#dropdown-menu a.active {
    color: #800000; /* maroon */
    background-color: #f5f5dc; /* beige */
    text-decoration-color: #800000; /* maroon */
    font: 400 19px "Raleway", sans-serif;
    opacity: 0.8;
}

#dropdown-menu > a { /* flex item */
    width: 100%;
    display: block;
}

/* <a> layout */
#dropdown-menu > a { /* flex item */
    border-bottom: 3px groove #fffff0; /* ivory */
}

#dropdown-menu a:first-of-type { /* flex item */
    border-top: 4px groove #fffff0; /* ivory */
    border-bottom: 4px groove #fffff0; /* ivory */
}

#dropdown-menu  a:last-of-type { /* flex item */
    border-bottom: 3px solid #800000; /* maroon */
}

/* navbar | text specifications for tag <a>  links and background-color */
.itemMenu {  /* class for flex item */
    font: 400 18px 'Raleway', sans-serif;
    text-transform: capitalize;
    color: #fffff0; /* ivory */
    background-color: #800000; /* maroon */
    padding: 18px 16px; /* For small screens | I use the padding property for centering the text. */
    text-decoration-color: ivory; /* class= "line" */
}

.itemMenu:focus,
.itemMenu:hover {
    opacity: 0.9;
}

/* <main> | flex item & flex box
********************************/
main { /* flex item | flex box */
    width: 100%;
    background-color: #fffff0; /* ivory */
    padding: 60px 0 0 0;  /* Because the <nav> has a height: 60px. That is why I separated and so that everything is centered */
}

/* Section: front page
***********************/
#mainSection {/* flex item & flex box */
    background-color: #616247; /* Terrarium Moss | The Hottest Spring/Summer Colors 2019. */
    border-top: none;
    padding: 0 32px;
    justify-content: flex-start; /* Default value: Items are positioned at the beginning of the container. */
}

#mainSection header { /* flex item *//* Set a height of 200px and a variable width, depending on the font-size */
    margin: 50px 0;
}

/* Combining serif with sans serif */
h1.Title {  /* height 52px including the 4px for border-bottom */
    font: 400 36px 'Cinzel', serif;
    color: #fffff0; /* ivory */ /* contrast-ratio: 6.27 over #616247 */
    border-bottom: 4px groove #fffff0; /* oliveDrab *//* The growth of <h1> is greater than <p> in width.*/
    height: 52px; /* fixed */
}

h2.subTitle { /* height: 48px including the 4px for padding-top */
    font: normal small-caps 400 26px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
    color: #fffff0; /* ivory */
    padding: 4px 0 0 0;
    height: 48px; /* fixed */
}

div.boatPicture { /* flex item *//* class="boxShadow"*//* note: I changed figure tag to div tag and the photo loads faster and the carousel performance improved. */
    width: 100%;
    padding: 40px;
    background-color:#755139 ;
    background-image:  repeating-linear-gradient(90deg, transparent , #615550 7%); 
    max-width: 800px; /* To set the maximum width of the element. */
    margin: 0 0 110px 0; /* Increase from 86px to 100px because the element has border and shadow */
}

div.passe-partout {
    padding:20px;
    background-color: #fffff0;
    border: 5px inset #674732; /* Toffee lightness 30% *//* The Hottest Spring/Summer Colors 2019 */
}

/* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
#mainSection div.overlayImg {
    border: 5px inset #fffff0;
}

/*  Image with width 100% and height auto for being responsive and scale up and down; */
img#boat {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px; /* To set the maximum width of the element. */
}

/* section: About Author | flex item | flex box  
*  ============================================ */
#about-author {
    border-top: none;
    padding: 0 32px;
    background-image: linear-gradient(90deg, #d6582e 50%, ivory 50%);
    justify-content: flex-start; /* Default value: Items are positioned at the beginning of the container. *//* justify-content: center has not effect */
}

/* <header> | flex item | centered item  */
#about-author header { /* With the margin, height 200px */
    margin: 60px 0 63px 0;
}

#about-author h2 {
    font: normal small-caps 400 30px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
    color: #000; /* black */
    border-bottom: 3px groove rgb(214, 88, 46, 0.3); 
    padding: 36px 0 5px 0;
    height: 77px;
    max-width: 300px;  /* To set the maximum width of the element. */
}

div.introduce { /* flex item and flex box with flex-wrap: wrap */
    width: 100%;
    height: auto;
    flex-wrap: wrap-reverse;
}

/* First container: A <div class="figContainer"> which contains a <figure> tag
=================== */
/* <figure class="imgContainer"> tag */
figure.imgContainer { /* flex item *//* centered item *//* class="boxShadow"*/
    width: 100%;
    max-width: 400px; /* to restrict a responsive image to a maximum size, use the max-width property */
    margin: 0 0 96px 0; 
    height: auto;
    border-radius: 0 0 5px 5px;/*top-left, top-right, bottom-right, bottom-left.*/
    background-color: #f5f5dc; /* beige */
}

/* <figcaption> tag */
figure.imgContainer > figcaption {
    font: 400 15px 'Verdana', sans-serif;
    text-align: left;
    width: 100%;
    max-width: 400px; /* the same conditios as the <img> item. */
    padding: 10px 0 12px 10px;
    color: #fffff0; /* ivory */
    background-color: #4b5335; /* Chive | The Hottest Spring/Sommer Colors 2020 */
    border-top: 2px groove #fffff0; /* ivory */
    border-radius: 0 0 5px 5px; /*top-left, top-right, bottom-right, bottom-left.*/
}

/* Second container: A <div class="listContainer"> which contains a <dl> tag
===================********************************************************* */
div.listContainer { /* flex item *//* box-shadow */
    margin: 26px 0 96px 0; /* Visual effect. */
    width: 100%;
    max-width: 600px; /* To set the maximum width of the element. */
    background-image: linear-gradient(90deg,#fffff0 50%, rgb(214, 88, 46, 0.3) 50% );
    border-radius: 7px;
    padding: 0 10px;
}

/* TODO list <dl> description */
dl.shortIntroduction {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    padding: 50px 0;
    cursor: text;
}

dl.shortIntroduction > dt {
   font: 500 20px "Raleway", sans-serif;
   margin: 20px 0 0 0;
}

dl.shortIntroduction > dd {
    font: 400 19px "Raleway", sans-serif;
    margin: 10px 0 0 0;
    line-height: 1.6;
}

dl.shortIntroduction dt:first-of-type {
    margin: 0;
}

/* An external link */
a#colorscodex {
    font: 400 20px 'Raleway', sans-serif;
    padding: 10px 0;
    margin: 0;
}

/* Figure to separate sections: Text block over an image.
**********************************************************/
#forest { /* flex item */
    width: 100%;
    height: auto;
}

/* The div container has a position relative */
/* image responsive */
/* Text Block over an image */
h2#textBlock { /* transition effect */
    font: 400 20px "Raleway", sans-serif;
    position: absolute; /* The element is positioned relative to the nearest positioned ancestor, in this case is the <div>*/
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #fffff0; /* ivory */
    padding: 20px 20px;
}

/*  A "parallax" scrolling effect with CSS, 
*   where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. 
***************************************************************************************************************************/
.parallaxContainer {
	background-color: #f5f5dc; /* beige */
	margin-inline: auto;
	width: 100%;  
}

.parallax {
    /* The image used */
    /* Photo gallery with different recipes to show the color and great variety of Mediterranean cuisine dishes based exclusively on vegetable ingredients. */
    background-image:  url("../img/vegan-recipes/colorscodex-vegan-recipes.jpg");
    /* Set a specific height */
    min-height: 700px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed; /* To create an illusion of 3D depth.*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

div#parallaxText {/* flex box */
    padding: 64px 32px;
    background-color: rgba(0,0,0,0.1);
    border-top: 4px groove #fffff0;
    border-bottom: 4px groove #fffff0;
    min-height: 300px;
}

p.commentText {
    width: 100%;
    max-width: 1024px; /* To set the maximum width of the element. */
    font: 400 1.3rem "Raleway", sans-serif;
    line-height: 1.6;
}

p.commentText:nth-of-type(2) {
    padding: 0;
}

/* Some recipes */
div.galleryRecipes { /* flex box */
    padding: 64px 32px;
    background-color: rgba(0,0,0,0.1);
    border-bottom: 4px groove #fffff0;
}

div.figsWrapped { /* flex item | flex Box */
    width: 100%;
    max-width: 1024px;
    row-gap: 32px;
    column-gap: 32px;
}
.marginTopBottom {
    margin: 64px 0; /* to maintain balanced spaces between blocks */
}

figure.figRecipe { /* flex item | class="boxShadow"*/
    position: relative;
    min-width: 244px; /* for small devices */
    border-radius: 5px;
    background-color: #fffff0; /* ivory */
}

/* <figcaption> tag */
figure.figRecipe figcaption {
    padding: 10px 16px;
    color: #fffff0; /* ivory */
    background-color: #4b5335; /* Chive | The Hottest Spring/Sommer Colors 2020 */
    border-top: 2px groove #fffff0; /* ivory */
    border-radius: 0 0 5px 5px; /* top-left, top-right, bottom-right, bottom-left.*/
}
    
p.recipeName {
    font: normal small-caps 20px "Raleway", sans-serif;
    text-transform: capitalize;
    /* so it doesn't lose style */
    white-space: nowrap; /* this property is required for text-overflow */
    overflow: hidden; /* this property is required for text-overflow */
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: left; 
}

img.imgSomeRecipes {
    margin-inline: auto;
    max-width: 400px;
    border: 16px solid #fffff0;
    border-radius: 5px 5px 0 0; /* top-left, top-right, bottom-right, bottom-left.*/
    pointer-events: none; /* The pointer-events property defines whether or not an element reacts to pointer events. | Do not allow copying or downloading an image. */
}
			
/* Slide in Overlay from the Bottom, */
.overlaySpecial {
    position: absolute;
    bottom: 0;
  	left: 0;
  	right: 0;
  	background-color: rgba(0,0,0,0.3);
  	overflow: hidden;
  	width: 100%;
  	height: 0;
	border-radius: 5px;
  	transition: all .5s ease-out; /*  To make the effect even more attractive. */
	z-index: 1;
}

/* with a Link. */
a.linkTransparent {
    display: block;
    width: 100%;
    height: 100%;
    color: #fffff0;
}

/* Link with centered text */
.centered {/* it is necessary so that <a> occupies all the space and only the text is positioned at 40% of the top, and not <a>. */
    display: none;
    font: normal small-caps 500 1.3rem "Raleway", sans-serif;
    text-decoration-color: #fffff0;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 40%;
    left: 0;
}

/* To create overlay effect on hover */
figure.figRecipe:hover .overlaySpecial {
    height: 100%;
}

figure.figRecipe:hover span.centered {
    display: block;
}

/* Section: My Hobby | Recipe | Projects | My First Game | My first Portfolio | Carousel 
*****************************************************************************************/
/* background for small devices */
#myHobby {
    background-image: linear-gradient(90deg, #fffff0 50%, #f5f5dc 50%); /* ivory | beige */
}

#recipe {  /* flex box */
    background-color: #f5f5dc; /* beige */
    background-image: linear-gradient(90deg, #f5f5dc 50%, #fffff0 50%); /* beige | ivory */
}

#slideCarousel,
#pixel-art-maker { /* flex box */
    background: #fffff0; 
    background-image: linear-gradient(90deg, #fffff0 50%, #849dae 50%); /* ivory | Blue Stone lightness 60% */
}

#firstPortfolio { /* flex box */
    background-color: #fffff0;
    background-image: linear-gradient(90deg, #849ead 50%, rgb(255,255,240) 50%); /* Blue Stone lightness 60%  | ivory */
}

/* <header> | flex item | centered item   */
#myHobby header,
#firstPortfolio header,
#pixel-art-maker header,
#slideCarousel header,
#magazine header,
#imageWithPalette header,
#collageImg header,
#sectionAppForm header { /* flex item | centered item *//* With the margin, the height is 200px | the width is marked with the propertie max-width of the child item <p> or <h2> */
    margin: 60px 0 2px 0;
}

#online-resume header,
#recipe header { /* flex item | centered item *//* With the margin, height 200px */
    margin: 60px 0 63px 0;
}

/* <h2> */
#myHobby h2,
#firstPortfolio h2,
#pixel-art-maker h2,
#recipe h2,
#slideCarousel h2,
.title-section { 
    font: normal small-caps 400 30px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
    text-transform: capitalize;
    padding: 36px 0 5px 0;
    height: 77px;
}

#online-resume h2,
#recipe h2 { 
    border-bottom: 3px groove #808000; /* oliveDrab */
    max-width: 300px; /* set the width of the <header> */
}

#firstPortfolio p.description,
#pixel-art-maker p.description,
#slideCarousel p.description,
#magazine p.description,
#imageWithPalette p.description {
    border-top: 3px inset #577284; /* Blue Stone */
}

#myHobby div.iframeContainer,
#pixel-art-maker div.iframeContainer { /* flex item | centered item */
    flex-direction: column-reverse;
}

div.recipeContainer { /* flex item  and flex box */
    padding: 31px 32px 101px 32px;
    width: 100%;
} 

div.animationContainer,
div.iframeContainer,
div.cardMagazine-container { /* flex item and flex box*/
    padding: 71px 32px 101px 32px; /* visual effect */
    width: 100%;
}

#myHobby p.comment,
#pixel-art-maker p.comment,
#firstPortfolio p.comment,
#recipe p.comment,
#slideCarousel p.comment {
    margin: 0 0 96px 0;
}

/* <iframe> */
iframe#my-first-portfolio,
iframe#my-first-game { /* flex item *//* class="boxShadow"*//* border none */
    width: 100%;
    max-width: 600px;
    height: 450px;
    border-radius: 5px;
}

/* to control the width */
.block-width {
    max-width: 600px;
    flex-direction: column-reverse;
}

/* Responsive iFrame */
.container-iframe {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio *//* % with respect to screen width */
  border-radius: 5px;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* with Online Resume */
#online-resume {
    background-color: #d69c2f;
}

.show-document {
    margin: 85px 0 110px 0;
}

/* Complementary section:  A recipe *//* flex box
*************************************************************/
section#textRecipe {  /* flex item */
    border: none;
    width: 100%;
    max-width: 600px; /* To set the maximum width of the element. */
}

/* Combining "Cinzel", serif for <h3> and "Raleway", sans serif for <p>. */
section#textRecipe h3 { 
    font: 400 24px "Cinzel", serif;
    margin: 1.5rem auto 3.5rem auto; /* Centered item */
    max-width: 450px; /* To set the maximum width of the element. */
}

/* Container recipe-image */
#recipe figure { /* flex item *//* class="boxShadow"*/
    width: 100%;
    max-width: 400px;
    border: 0.44rem solid #577284;
}

figure.myRecipe {
    padding: 4%; /* 40px */
    background-color: #fffff0;
    background-image: repeating-linear-gradient(90deg, transparent,transparent,transparent, transparent, transparent, #fffff0 15px), repeating-linear-gradient(180deg,  transparent, #577284 15px);
}

#recipe div.passe-partout {
    border: 0.44rem solid #577284; 
}

/* image */
img#creamZucchini { /* to complete the properties of the class="responsive" */
    max-width: 500px; /* To set the maximum width of the element. */
    border: 7px inset #f0ead6; /* Sweet Corn | The Hottest Spring/Summer Colors 2019 */
    margin-left: auto;
    margin-right: auto;
}

/* Special buttons in Section: recipe & Section: Pixel Art Maker */
#imgMagazine,
#img-transition-effect {
    display: block;
    width: 40px;
    height: 50px;
    margin-left: auto; /* centered item */
    margin-right: auto; /* centered item */
    border: 3px solid #800000; /* maroon */
    border-radius: 5px;
    transition-property: width, height; /* The <img> element has specified a transition effect for ,*/
    transition-duration: 2s; /*  With a duration of 2 seconds:*/
    transition-timing-function: ease; /* Default value. Specifies a transition effect with a slow start, then fast, then end slowly.*/
    transition-delay: 1s; /* The transition effect has also a 1 second delay before starting. */
    cursor: pointer;
}

#imgMagazine {
    margin-top: 36px;
}

#img-transition-effect {
    margin: 10px auto;
}

/* With this moving, we see the transition effect
*  to convert the ico image and read the document. */
#imgMagazine:hover,
#img-transition-effect:hover {/* Hover over the image element, to see the transition effect.*/
    width: 100%;
    max-width: 480px;  /* A new value when a user mouses over the <img> element. */
    height: auto; /* A new value when a user mouses over the <img> element. */
    border: 3px solid transparent;
    margin-left: auto;
    margin-right: auto;
    box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Section slideshow - carousel 
*****************************************************/
div.carouselEffect { /* style */
    width: 100%;
    max-width: 600px;
    height: 445px;
    background-color: #fffff0;
    position: relative;
    z-index: 5;
} 

/* Shorthand: -name| -duration | -timing-function | -delay: 0s | -iteration-count | -direction */  
div#slideSet {
    position: absolute;
    width: 100%;
    max-width: 600px;
    height: 445px;
    background-image: url("../img/colorscodexportfolio-screenShot/section-front-page.jpg");
    background-position: 50% 50%; /* The first value is the horizontal position and the second value is the vertical. */
    background-size: contain; /* Resize the background image to make sure the image is fully visible */
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-repeat: no-repeat;
    background-origin: padding-box; /* Let the background-image start from the upper left corner of the content:*//* Default value */
    background-clip: padding-box; /* Specify how far the background should extend within an element: The background extends to the inside edge of the border.*/
    background-attachment: scroll; /* Default value */
    animation: carousel 30s linear infinite normal;
    -webkit-animation: carousel 30s linear infinite normal;
    -moz-animation: carousel 30s linear infinite normal;
}

/* @keyframes rule specifies the animation code */
@keyframes carousel {/* Add many keyframe selectors in one animation */
    33.33%  { background-image: url("../img/colorscodexportfolio-screenShot/section-short-introduction.jpg");}  
    66.66%  { background-image: url("../img/colorscodexportfolio-screenShot/section-library.jpg");}
    100%    { background-image: url("../img/colorscodexportfolio-screenShot/section-front-page.jpg");} 
}

@-webkit-keyframes carousel{
    33.33%  { background-image: url("../img/colorscodexportfolio-screenShot/section-short-introduction.jpg");}  
    66.66%  { background-image: url("../img/colorscodexportfolio-screenShot/section-library.jpg");}
    100%    { background-image: url("../img/colorscodexportfolio-screenShot/section-front-page.jpg");} 
}

@-moz-keyframes carousel {
    33.33%  { background-image: url("../img/colorscodexportfolio-screenShot/section-short-introduction.jpg");}  
    66.66%  { background-image: url("../img/colorscodexportfolio-screenShot/section-library.jpg");}
    100%    { background-image: url("../img/colorscodexportfolio-screenShot/section-front-page.jpg");} 
}

/* Section to separate My Hobby and  Projects sections
*******************************************************/
section#logoPixelArtMaker { /* flex item & flex box */
    flex-direction: row-reverse;
    justify-content: start;
    height: auto; 
    background-color: #4b5335; /* Chive */
    border-bottom: 5px groove #f0ead6; /* Sweet Corn *//* The Hottest Spring/Summer Colors 2019 */
}  

h3#logoText { /* flex item & flex box */
    font: 400 20px 'Verdana', sans-serif;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #fffff0; /* ivory */
    width: 100%;
    max-width: 750px;
    height: 100px;
}

#logoPixelArtMaker figure {/* flex item */
    width: 100px;
    height: 100px;
    padding: 30px 0;
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
}

img#logoColorsCodex { /* flex item *//* class="boxShadow"*/
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 0;
}

/* Section: courses | flex box 
*  ===========================*/
#courses-certified { /* flex box */
    background-color: #fffff0; /* ivory */
}

#programs-completed-w3,
#programs-completed {
    padding: 0 32px;
}

#certificatesContainer {
    padding: 0 32px;
}

#programs-completed-w3 {
    justify-content: flex-start;
}

#programs-completed,
#certificatesContainer {
    margin: 0 0 100px 0;
    justify-content: flex-start; /* Default value: Items are positioned at the beginning of the container. *//* justify-content: center has not effect */
}

/* <header> | flex item  | centered item */
#courses-certified header { /* With the margin, height 200px */
    margin: 60px 0 7px 0;
}

#courses-certified h2,
#certificatesContainer h2 { 
    font: normal small-caps 400 26px "Raleway", sans-serif;
    color: #000; /* black */
    padding: 36px 0 0 0;
    height: 77px;
}

#courses-certified p.description {
    max-width: 600px; /* Change of property in common. */
    min-height: 85px; /* Change of property in common. */
}

#enterLineBreak {
    display: none;
}

#programs-completed-w3 p.description,
#programs-completed p.description,
#certificatesContainer p.description {
    border-top: 3px inset #577284; /* Blue Stone */
}

/* container buttons with links | flex item */
div.icon-button {
    width: 100%;
    height: 200px;
    margin: 50px 0;
}

.btnLink:last-of-type {
    margin-top: 50px;
}

/* icons */
.w3 {
    display: inline-block;
    margin-right: 10px;
    font: 600 15px 'Raleway', sans-serif;
}

.freeCodeCamp {
    margin-right: 10px;
}

/* note */
.remark {
    display: inline-block;
    margin: 0 0 0 5px;
    font: 500 14px 'Raleway', sans-serif;
}

/* Section Courses-certified
****************************/
/* the links now are button-like links */
div.icon-button a { /* container with two buttons, they are differents from the others button-like links */
    max-width: 220px;
}
    
/* Programs-completed  | Certificates *//*flex item & flex box */
#programs-completed header {
    margin: 60px 0 1px 0;
}

#certificatesContainer header { /* flex item *//* With the margin, height 200px */
    margin: 60px 0 2px 0;
}

#programs-completed .sectionText {
    margin: 50px 0;
}

/* section programs-completed */
/* Grid with images */
/* flex box */
.row {
    max-width: 1200px;
    margin: 2px 0 0 0; /* visual effect */
}

.column {
    padding: 1rem;
    width: 30%;
}

.row img {
    border: 10px solid #fff;
    padding: 2px;
    max-width: 400px;
    margin-inline: auto;
}

.row a {
    display: block;
    background-color: #918152;
    border: 10px solid #918152;
    cursor: pointer;
}

.row a:hover {
    background-color: #34568b; /* Classic Blue */
    border: 10px solid #34568b;
}

.row a.hover-shadow {
    transition: 0.3s;
}

/* A flex item <div class="dropdown">: A container for wrap a <button> and <div id="dropdown-content" class="flexBox> */
div.dropdownGallery { /* flex item */
    width: 100%;
    max-width: 1024px;
    height: auto;
    position: relative; /* An element with position: relative; is positioned relative to its normal position. | In this case we do not move the position horizontally. */
}

/* <button> to open the gallery menu. | jQuery */
#dropdownBtn { /* Execute a jQuery when a button is clicked and then, open galleryMenu.*//* transition effect */
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 20px;
    border-radius: 5px;
    color: #fffff0; /* ivory */
    background-color: #635836; /* 30% lighter rgb(99, 88, 54) | Tofu #efece2 rgb(239, 236, 226)  */
    font: normal small-caps 400 24px 'Raleway', sans-serif;
    text-transform: capitalize;
    line-height: 1.6;
}

#dropdownBtn:hover {
    color: #fffff0; /* Ivory */
    background-color: #34568b; /* Classic Blue */
    border-radius: 5px 5px 0 0; /* top-left, top-right, bottom-right, bottom-left.*/
}

/* Symbol: white down-pointing triangle. */
#triangle2 {
    display: inline-block;
    font: 600 14px 'Raleway', sans-serif;
    margin: 0 0 0 5px;
    color: #fffff0; /* ivory */
}

div#galleryMenu { /* flex box */ /* class="boxShadow" */
    display: none;
    height: auto;
    border-top: 5px groove #fffff0; /* Ivory */
    background-color: #f1f1f1;
    border-radius: 0 0 5px 5px; /* top-left, top-right, bottom-right, bottom-left.*/
    position: absolute; /* The <div class="imgGallery"> is positioned relative to the nearest positioned ancestor, in this case, <div class="dropdownGallery" */
    z-index: 5;
}

div#galleryMenu a {
    color: #f1f1f1; /* By default, links will appear as follows in all browsers: A visited link is underlined and purple.*//* To avoid this, the solution is a color. */
    text-decoration: none;
    text-decoration-color: transparent;
    cursor: pointer;
}

div#galleryMenu figure:last-of-type {
    border-bottom: 5px groove #fffff0;
}

div#galleryMenu img {
    max-width: 1024px;
    height: auto;
}

/* A buttom-like link to close gallery menu */
a#closeGallery { /* with class="boxShadow" | flex item */
    display: block;
    font: 400 20px 'Raleway', sans-serif;
    max-width: 200px;
    padding: 10px 15px 15px 15px;
    color: #fffff0; /* ivory */
    background-color: #800000; /* Maroon */
    border-radius: 7px;
    text-decoration-color: #fffff0; /* Ivory *//* just change the color */
    margin: 50px auto;
}

a#closeGallery:hover { 
    box-shadow: 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -webkit-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
}

/* section certificatesContainer */
#iei {/* p.description */
    height: auto;
}

#iei a {/* link to IEI */
    margin: 0;
}

div.gallery { /* flex box */
    width: 100%;
    margin: 71px 0 0 0;
}

div.gallery figure { /* flex item *//* class="boxShadow"*/
    background-color: #fffff0;
    min-width: 244px;
}

div.gallery img.certifiedGoogle {
    border: 8px solid #918152; /* rgb(145, 129, 82) 45% Lighter | Tofu #eae6da | Color of the year 2018 */
    max-width: 400px; /* I want 400px but I have an image with padding-left and padding-right of 8px. So figure has 400px | box-model */
}

div.gallery figcaption {
    white-space: nowrap; /* this property is required for text-overflow */
    overflow: hidden; /* this property is required for text-overflow */
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-align: left; 
    font: 400 15px 'Verdana', sans-serif;
    width: 100%;
    max-width: 500px; /* the same conditios as the <img> item. */
    padding: 10px 0 10px 10px;
    color: #000; 
    background-color: #ede9de ; /* 90% Lighter | Tofu #eae6da | Color of the year 2018 */
    border-top: 2px groove #fffff0; /* ivory */
}

hr.coursesSection {
    display: block;
    border: 1px inset #fffff0;
    background-color: #fffff0;
}

/* HERO image 
***************/
figure#skySea { /* flex item */
    width: 100%;
    /*margin: 50px 0 0 0;*/ /* small devices */
}

#collageImg #go-revista {
    margin-top: 85px;
}

/* Section : custom section | flex box
*  =================================== */
#custom-section {
    justify-content: flex-start;
    padding: 0 32px;
    background-color: #f5f5dc; /* beige */
    background-image: linear-gradient(90deg, #fffff0 50%, #70625c 50%); /* ivory | brown granite 40% */
}

/* First item <header> | flex item | centered item  */
#custom-section header { /* With the margin, height 200px */
    margin: 60px 0 2px 0;
}

#custom-section h2 {
    font: 400 26px "Raleway", sans-serif;
    color: #000; /* black */
    padding: 36px 0 5px 0;
    height: 77px;
}

#custom-section p.description {
     border-top-color: #615550; /* Brown Granite */
}

/* Second item *//* 21st century Library */
div.library { /* flex item & flex box wiith the property flex-wrap: wrap */
    height: auto;
    margin: 0 0 100px 0;
}

/* Container a <dl> */
div.referencesContainer { /* flex item & flex box with the property flex-wrap: wrap *//* box-shadow */
    margin: 71px 0;
    height: auto;
    background-color: #fffff0; /* Ivory */
    border-radius: 7px;
    padding: 0 5px;
    max-width: 600px;
    width: 100%;
}

/* TODO list <dl> */
dl.references { /* flex item */
    width: 100%;
    max-width: 400px; /* To set the maximum width of the element. */
    height: auto;
    padding: 50px 0 0 0;
}

dl.references:last-of-type {
    margin: 40px 0 0 0;
    padding: 0 0 50px 0;
}

dl.references > dt {
   font: 600 20px "Raleway", sans-serif;
   margin: 40px 0 0 0;
}

dl.references dt:first-of-type {
    margin: 0;
}

dl.references > dd {
    font: 400 20px "Raleway", sans-serif;
}

/* div comtainer <figure> */
div.imgFooter { /* flex item *//* class="boxShadow"*/
    border-radius: 5px;
    margin: 25px 0 0 0; /* Visual efect */
    max-width: 400px; 
}

div.imgFooter figure {
    margin: 0; /* A margin-bottom was established but here it is not necessary. */
}

#custom-section figcaption {
    background-color: #577284; /* blueStone | Autumn/Winter Colors 2019 */;
}

/* Section contact through email */
#contact { /* flex item & flex box */
    border-top: none;
}

#contact header { /* flex item */
    margin: 0 0 50px 0;
}

/* A photo with devices screen sizes different */
figure#devices { /* flex item */
    margin: 50px 0;
    padding: 0 32px;
}

img#devicesImg { 
    max-width: 800px;
    margin: 0;
}

#contact h1 {
    color: #000; /* Black */
    border-bottom: none;
}

#contact h2 {  
    color: #000; /* Black */ 
}

#contact div.icon-button { /* flex item */
    margin: 0 0 50px 0;
    height: 60px;
    padding: 0;
}

#contact a.email{ /* button´like link */
    margin: 0 auto;
}

/* footer
* ============================================== */
footer { /* flex box */
    width: 100%;
    border-top: 2px groove #dcdcdc; /* gainsboro */
    background-color: #615550; /* Brown Granite */
    color: #fffff0; /* Ivory */
    cursor: text;
}

footer div.backgroundTransparent { /* flex item | */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 0.85rem; /* Relative length | Relative to font-size of the root element, html font-size: 16px */
    text-align: center;
    line-height: 1.6;
}

div.signature-validator,
div.conditions-editor {
    padding: 16px 32px 20px 32px;
}

span.separate {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
}

/* Validator CSS3 *//* Tha container is a flex box with flex-wrap: wrap */
a.validator-link { /* Contained into a flex item */
    display: block;
    padding: 0.25rem 0; 
}

img.validator-img {
    display: block;
    width: 42px;
    height: 0.85rem;
}

hr#footer-signature {
    display: block;
    border: 2px inset #fffff0;
    background-color: #fffff0;
    width: 100%;
}

/* links */
#w3SchoolsLink,
a#goDoc {/* values of the link class that it does not need or different. */
    display: inline-block;
    padding: 0;
    margin: 0;
    color: #fffff0; /* Ivory */
    text-decoration-color: #fffff0;
}

/* End footer */

/* A special button, with an image
***********************************/
aside#logoBtn {
    display: none;
}

/* Modal *//* Color Palette 
*****************************/
section#palette { /* flex box *//* class="boxShadow" */
    display: none;
    justify-content: flex-start; 
    position: absolute;
    z-index: 5;
    top: 0;
    max-width: 1400px;
    padding: 0 32px 160px 32px;
    background-color: #fffff0 /* ivory */
}

#palette h2 { /* flex item */
    font: normal small-caps 400 30px "Raleway", sans-serif; /* "font: font-style | font-variant | font-weight | font-size/line height | font-family" */
    color: #000; /* black */
    border-bottom: 3px groove #808000; /* oliveDrab */
    margin: 60px 0 0 0;
    padding: 36px 0 5px 0;
    height: 77px;
    max-width: 300px;  /* To set the maximum width of the element. */
}

#palette section.card { 
    max-width: 400px;
    margin: 60px auto 0 auto;
    background-color: #fffff0; /* ivory */
}

#palette #colorTextTwo {
        display: none;
}

section.card  h3 {
    font: 400 24px "Cinzel", serif;
    margin: 30px 0;
}

.colorPalette {
    font: normal normal 400 1rem 'Raleway', sans-serif;
    width: 100%;
    height: auto;
    padding: 16px 24px;
}

/* Colors */
.beige {
    background-color: #f5f5dc;
}

.black {
    color: #fffff0;
    background-color: #000;
}

.blueStone { /* Autumn/Winter Colors 2019 */
    color: #fffff0;
    background-color: #577284;
}

.brownGranite { /* The Hottest Spring/Summer Colors 2019 */
    color: #fffff0;
    background-color: #615550;
}

.chive { /* The Hottest Spring/Sommer Colors 2020 */
    color: #fffff0;
    background-color: #4b5335;
}

.classicBlue { /* Color of the Year 2020 */
    color: #fffff0;
    background-color: #34568b;
}

.darkGoldenRod {
    background-color: #b8860b;
}

.darkKhaki {
    background-color: #bdb76b;
}

.gainsboro {
    background-color: #dcdcdc;
}

.ivory {
    background-color: #fffff0;
}

.lightTerraRossa {
    background-color: rgba(214,88,46,0.3);
}

.maroon { 
    color: #fffff0;
    background-color: #800000;
}

.mangoMojito { /* The Hottest Spring/Summer Colors 2019 */
    background-color: #d69c2f;
}

.oliveDrab {
    color: #fffff0;
    background-color: #808000;
}

.sweetCorn { /* The Hottest Spring/Summer Colors 2019 */
    background-color: #f0ead6;
}

.terrariumMoss { /* The Hottest Spring/Summer Colors 2019 */
    color: #fffff0;
    background-color: #616247;
}

.terraRossa {
    color: #fffff0;
    background-color: #d6582e;
}

.toffee { /* The Hottest Spring/Summer Colors 2019 */
    color: #fffff0;
    background-color: #755139;
}

.tofu { /* Classic Fall/Winter Colors 2018 | Pantone 11-4801 */
    color: #000;
    background-color: #eae6da;
}

div.toSeeEffect {
    background-color: #615550;
}

#transparent { 
    width: 95%;
    color: #fffff0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Canvas */
/* I prefer to use the title attribute and remove the text to improve accessibility and not be repetitive.*/
.canvas-height {
    height: 52px;
}

div.rustyMetal {
    color: transparent;
    background-color: #755139;
    background-image: repeating-linear-gradient(90deg, transparent , #615550 7%);
}

div.gridBlueStone {
    margin-top: 10px;
    color: transparent;
    background-color: #fffff0;
    background-image: repeating-linear-gradient(90deg, transparent,transparent,transparent, transparent, transparent, #fffff0 15px), repeating-linear-gradient(180deg,  transparent, #577284 15px);
}

div.beeNest {
    margin-top: 10px;
    color: transparent;
    background-color: #fffff0;
    background-image: repeating-linear-gradient(-45deg,transparent,transparent, transparent, transparent, #4b5335 40px), repeating-linear-gradient(45deg,transparent,transparent, #4b5335 40px);

}

div.bambooPoles {
    margin-top: 10px;
    color: transparent;  
    background-image: repeating-linear-gradient(90deg, rgba(214,156,47,0.6), #4b5335 16px), repeating-linear-gradient(92deg, transparent, #4b5335 10px);
}

div.blueGrid {
    margin-top: 10px;
    color: transparent; 
    background-clip: border-box;
    background-color: #fffff0; 
    background-image: repeating-linear-gradient(
            90deg,
            transparent,
            transparent 30px,
            rgba(87,114,132, 0.25) 30px,
            rgba(87,114,132, 0.25) 36px,
            transparent 36px,
            transparent 66px,
            rgba(87, 114, 132, 0.25) 66px,
            rgba(87,114,132,0.25) 72px,
            transparent 72px,
            transparent 74px
            ), repeating-linear-gradient(
            0deg,
            transparent,
            transparent 25px,
            rgba(87,114,132, 0.25) 25px,
            rgba(87,114,132, 0.25) 31px,
            rgba(0,0,0,0) 31px,
            rgba(0,0,0,0) 56px,
            rgba(87,114,132, 0.25) 56px,
            rgba(87,114,132, 0.25) 62px,
            transparent 62px,
            transparent 64px);
}

div.emeraldContainer {
    margin-top: 10px;
    background-color: rgba(106, 141, 31, 0.794);
}

div.emerald {
    color: transparent;
    background-image: repeating-linear-gradient(-135deg, rgba(0,0,0,0), rgba(0,255,255,0.2) , rgba(255,255,240,0.5), rgba(97,98,71,0.3) 0.2%),repeating-linear-gradient(45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%), repeating-linear-gradient(-45deg,rgba(0,0,0,0), rgba(0,0,0,0.5) 0.5%);
}

a#closeModal { /* class="btnLink line" | flex item */
    display: block; /* because the button-like links courses has display inline-block */
    margin: 140px 0 0 0;
    width: 200px;
    background-color: #800000; /* marron */
}

/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
/* Very small devices | Reduce the size of some elements.
********************************************************* */
@media only screen and (max-width: 599px) {
    span.publication-date {
        margin: 16px 0;
        text-align: center;
    }
    
    /* A dialog box as a dismissible alert, */
    #myDialog {
        position: fixed; /* It is necessary for iPhone 6s */
        font: 400 18px 'Raleway', sans-serif;
        min-height: 60px;
	    background-color: rgba(255, 255, 255, 0.1);
        width: 100%;
        height: 100%;
        z-index: 100;
        top: 0;
        justify-content: flex-start;
        padding: 160px 16px;
    }

    #myDialog p {
        text-align: left;
        padding: 8px;
    }

    #closeDialog {
        display: block;
        font: 400 18px 'Raleway', sans-serif;
        padding: 8px 16px;
        border-radius: 5%;
        position: absolute;
        right: 16px;
        bottom: 16px;
        cursor: pointer;
        background-color: #800000;
        color: #fffff0;	      	
    }

    /* Sections 
    *************/
    section,
    #mainSection,
    #about-author,
    #custom-section {
        padding: 0 16px;
    }

    section#textRecipe,
    #programs-completed-w3,
    #programs-completed,
    #certificatesContainer {
        padding: 0;
    }

    div.animationContainer,
    div.iframeContainer { /* flex item and flex box*/
        padding: 71px 0 101px 0; /* visual effect */
    }

    div.recipeContainer { /* flex item  and flex box */
        padding: 31px 0 101px 0;
    }

    div.galleryRecipes,
    div#parallaxText {
        padding: 64px 16px;
    }

    div.cardMagazine-container {
        padding: 71px 0 101px 0;
    }
    
    div.heroImgCollageContainer {
        padding: 71px 16px 101px 16px;

    }

    blockquote {
        padding: 59px 16px;
    }
    
    /* mainSection */
    h1.Title { /* Page title */ 
        font: 400 30px 'Cinzel', serif;
        height: auto;
    }

    div.boatPicture { /* flex item *//* class="boxShadow"*/
        padding: 20px;
    }

    div.passe-partout {
        padding:10px;
        border: 4px inset #674732; /* Toffee lightness 30% *//* The Hottest Spring/Summer Colors 2019 */
    }

    /* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
    #mainSection div.overlayImg {
        border: 3px inset #fffff0;
    }

    h2.subTitle { /* Balance spacing for very small screens*/
        padding: 10px 0 0 0;
        height: auto;
    }

    /* <h2> */
    #about-author h2,
    #myHobby h2,
    #pixel-art-maker h2,
    #firstPortfolio h2,
    #recipe h2,
    #slideCarousel h2,
    #courses-certified h2,
    #certificatesContainer h2,
    #palette h2,
    .title-section  {
        height: auto;
    } 

    /* Section contact | to give more importance */
    #contact h1 {
        font: 400 26px 'Cinzel', serif;
    }

    #contact h2 {
        font: normal small-caps 400 20px "Raleway", sans-serif;
    }

    /* about-author */
    /* Second container: A <div class="listContainer"> which contains a <dl> tag */
    div.listContainer {
        box-shadow: none;
        border-radius: 0;
        padding: 0 16px;
    }

    /* TODO list <dl> description */
    dl.shortIntroduction > dt {
        font: 500 20px "Raleway", sans-serif;
    }

    dl.shortIntroduction > dd {
        font: 400 19px "Raleway", sans-serif;
        line-height: 1.6; /* When resizing, I add the property again. */
        text-align: left;
    }

    /* Figure to separate sections: Text block over an image.
    **********************************************************/
    #forest img {
        min-height: 60px;
    }

    /* Text block over an image. */
    h2#textBlock { /* transition effect */
        display: none;
    }

    /* Section to separate My Hobby and  Projects sections
    *******************************************************/
    section#logoPixelArtMaker { /* flex item & flex box */
        display: flex;
        display: -webkit-flex;
        flex-direction: row;/* It is necessary to place the logo at the beginning, for iPhone 6s */
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
    }
    
    h3#logoText {
        display: none;
    }

    /* parallax */
    p.commentText {
        text-align: left;
    }

    /* section myHobby */
    figure.myRecipe {
        background-image: none;
        background-color: #3c505d; /* rgb(60, 80, 93) 30% lighter/darker | #577284 rgb(87, 114, 132) */
    }

    /* text Projects 
    *****************************************************/
    p.comment {
        text-align: left;
    }

    .btnLink, 
    span.note {
        text-align: center;
    }

    /* <iframe> */  
    iframe#my-first-portfolio,
    iframe#my-first-game { /* flex item *//* class="boxShadow"*/
        width: 100%;
        max-width: 600px;
        height: 250px;
        border-radius: 5px;
    }

    /* Carousel 
    *****************************************************/
    div.carouselEffect,
    div#slideSet {
        max-width: 350px;  
        height: 250px;
    }

    /* iframe with Online Resume */
    .show-document { 
        width: 100%;
    }

    /* Bloxckquote to separate sections
    ************************************/
    blockquote q {
        font: 400 20px 'Raleway', sans-serif;
        line-height: 1.6;
        max-width: 400px;
    }

    blockquote.mediumQuote q 
    blockquote.largeQuote q {
        max-width: 400px;
    }

    p.author-quote {
        display: none;
    }

    /* Section Courses certified 
    *****************************/
    /* <header> | flex item  | centered item */
    #courses-certified header { /* With the margin, height 200px */
        padding-inline: 20px;
    }

    #enterLineBreak {
        display: inline;
    }

    /* grid with images */
    .column {
        width: 100%;
        max-width: 432px;
    } 

    /* <button> to open the gallery menu. | jQuery */
    #dropdownBtn { /* Execute a jQuery when a button is clicked and then, open galleryMenu.*/
        font: normal small-caps 400 20px 'Raleway', sans-serif;
        line-height: 1.6;
    }

    /* Section Library
    **************************/
    /* TODO list with more interesting pagesweb-like books */
    /* dots */
    li::before {
        display: none;
    }

    li a.link {
        padding-left: 0; /* remove property from properties in common */
    }

    /* Section Contact 
    =========================*/
    figure#devices {
        padding: 0;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up)
******************************************************************/
@media only screen and (min-width: 600px) and (orientation: landscape){
    /* Figure to separate sections: Text block over an image.
    **********************************************************/
    /* Text block over an image. */
    h2#textBlock { /* transition effect */
        font: 400 24px "Raleway", sans-serif;
        padding: 20px;
    }

    /* Some recipes */
    div.galleryRecipes { /* flex box */
        padding: 64px 0;
    }

    div.figsWrapped { /* flex item | flex Box */
        row-gap: 16px;
        column-gap: 16px;
    }
    
    /* Figure with some recipes | Google Certifications 
    ***************************************************/
    figure.figRecipe,
    div.gallery figure {
        max-width: 244px;
    }

    /* iframe with Online Resume */
    .show-document { 
        width: 90%;
    }

    /* Bloxckquote to separate sections
    ************************************/
    blockquote q {
        max-width: 600px;
    }

    /* Section: courses | img
    ****************************/
    #enterLineBreak {
        display: none;
    }
    
    /* HERo Image 
    ==============================*/
    /* <img class="responsive"> | Set more properties */
    img#oceanPhoto {
        max-width: 100vw;
        height: 400px; /* Set specific height */ /* Hero image */
    }

    /* Section Color Palettes | Modal
    *********************************/
    div.galleryPalettes {
        margin: 96px 0 0 0;
        column-count: 2;
        column-gap: 32px;
        max-width: 1200px;
    }

    #palette section.card { /* flex item */
        display: inline-block;
        margin: 32px auto 0 auto; /* we eliminate the margin because we introduce the gap property */
        padding: 16px 32px 32px 32px;
        background-color: rgba(97,98,71,0.2); /* Terrarium Moss | visual effect: recycled cardboard color */
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* this css belongs to w3Schools | to create paper-like cards */
        -webkit-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    div.colorPalette {
        padding: 16px 4px;
    }
}

/* Medium devices (landscape tablets, 768px and up)
***************************************************/
@media only screen and (min-width: 768px) and (orientation: landscape){
    /* <button> to open the dropdown menu.*/
    .dropdown,
    #dropdown-menu {
        display: none; /* The element will be hidden, and the page will be displayed as if the element is not there.*/
    }

    /* Medium and Large devices | flex box 
    ***************************************/
    #navBar { /* Medium and Large devices | flex box */
        width: 100%;
        height: 60px;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    /* <nav> */
    a.active {
        display: block;
        color: #800000; /* maroon */
        background-color: #f5f5dc; /* beige */
        text-decoration-color: #800000; /* maroon */
    }

    a#homeLink {
        width: 16%;
        height: 60px;
        opacity: 1; /* Does not change the color on hover. */
    }

    #navBar > .navLink { /* flex item */
        border: none;
        width: 16%;
        height: 100%;
        display: block;
        /* To highlight items in a menu as the user hovers the mouse cursor over them. */
        /* To make the effect even more attractive. */
        /* transition-property : all | default value */
        /* ease-out - specifies a transition effect with a slow end */
        transition: all 0.5s ease-out; 
    }

    #navBar .navLink:first-of-type {
        border-top: none;
    }

    #navBar > .navLink:hover {
        background-color: #a52a2a; /* brown */
        opacity: 0.9;
    }

    /* Sections 
    *************/
    #mainSection,
    #about-author,
    #programs-completed-w3,
    #programs-completed,
    #certificatesContainer,
    #custom-section {
        padding: 0;
    }

    /* Main */
    /* Resize text
    ****************/
    h1.Title { /* Page title */
        font: 400 44px 'Cinzel', serif;
    }

    h2.subTitle,
    #palette h2,
    #about-author h2,
    #myHobby h2,
    #recipe h2,
    #firstPortfolio h2,
    #pixel-art-maker h2,
    #slideCarousel h2,
    #courses-certified h2,
    #custom-section h2,
    .title-section { /* Subtitle page | sections title */ 
        font: normal small-caps 400 34px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
    }

    #palette h2,
    #about-author h2,
    #custom-section p.description {
        max-width: 350px;
    }

    #myHobby p.description,
    #firstPortfolio p.description,
    #pixel-art-maker p.description,
    #slideCarousel p.description,
    #magazine p.description,
    #imageWithPalette p.description,
    #collageImg p.description,
    #courses-certified p.description,
    #custom-section p.description { /* Sections subtitle */
        font: 400 24px "Raleway", sans-serif;
        padding: 5px 0 24px 0;
    }

    #slideCarousel p.description,
    #firstPortfolio p.description {
        max-width: 350px;
    }

    /* Text block over an image. */
    h2#textBlock { /* transition effect */
        font: 400 28px "Raleway", sans-serif;
        padding: 20px;
    }

    /* logo COLORSCODEX */
    h3#logoText {
        font: 400 26px "Raleway", sans-serif;
        max-width: 900px;
    }

    /* iframe with Online Resume */
    .show-document { 
        width: 75%;
    }

    /* Library */
    div.moreInterestingLinks p.description { /* Sections subtitle */
        font: 400 24px "Raleway", sans-serif;
    }

    /* Section Courses-certified
    ******************************/
    /* conteiner buttons with links | flex item */ 
    div.icon-button {
        margin: 0;
    }

    div.icon-button a {
        width: 220px; /* width fixed b*/
        display: inline-block; /* Change direction*/
    }
    
    /* Note *//* Section: courses.certified */
    .remark:first-of-type {
        margin-right: 100px;
    }

    #certificatesContainer {
        padding: 0;
    }

    /* Section Library | flex item & flex box with flex-wrap: wrap 
    ********************************************************************/
    div.referencesContainer  { /* flex item */
        padding: 0 0 50px 0;
        max-width: 800px;
    }

    /* TODO list <dl> */
    dl.references:last-of-type {
        margin: 0;
        padding: 50px 0 0 0;
    }

    /* TODO list with more links */
    div.moreInterestingLinks ul {
        padding: 30px 100px;
    }

    /* with more links */
    div.moreInterestingLinks {
        color: #000;
        background-color: #61555040; /* To add transparency, add two additional digits between 00 and FF. */
        background-image: none;
        padding: 80px 0 50px 0;
    }

    li a.link {
        color: #000;
        text-decoration-color: #800000;
    }

    /* Footer text
    ***************/
    /* To embed the  Blocquote item  *//* the effect works when the background-color of the previous one is light */
    /* Footer */
    footer {
        border-top: 6px groove #f0ead6; /* Sweet Corn *//* The Hottest Spring/Summer Colors 2019 */
    }
}

/* Large devices (laptops/desktops, 992px and up)
**************************************************/
@media only screen and (min-width: 992px) and (orientation: landscape){
    #mainSection {
        border-bottom: 6px groove #f0ead6 /* Sweet Corn *//* The Hottest Spring/Summer Colors 2019 */
    }

    /* Section about-author | flex item & flex box with flex-wrap: wrap. */ 
    div.listContainer { /*flex item */
        padding: 0 0 0 25px;
        margin: 50px 25px 100px 50px;
        max-width: 500px;
        background-color:   rgba(214,156,47,0.17); /* Chive transparent */
        background-image: none;
    }

    figure.imgContainer {
        margin: 0 0 50px 25px;
    }

    /* TODO list <dl> */
    dl.shortIntroduction {
        padding: 30px 0;
        border-radius: 0 5px 5px 0; /* top-left, top-right, bottom-right, bottom-left.*/
        text-align: left;
        margin: 0; /* Before with value auto, so that the text starts in the middle.*/
        background-color: #fffff0;
    }

    dl.shortIntroduction > dt {
        font: 500 19px "Raleway", sans-serif;
        margin: 20px 0 0 30px;
    }

    dl.shortIntroduction dt:first-of-type {
        margin: 0 0 0 30px;
    }

    dl.shortIntroduction > dd {
        font: 400 18px "Raleway", sans-serif;
        line-height: 1.6;
        margin: 10px 0 0 40px;
    }

    /* Text block over an image. */
    h2#textBlock { /* transition effect */
        font: 400 28px "Raleway", sans-serif;
        padding: 35px 0;
    }

    /* Some recipes */
    .marginTopBottom { /* flex item | flex Box */
        margin: 32px 0;
    }

    /* Links 
    *****************************/  
    /* <a class="btnLink link line" > */
    #myHobby a {
        margin-top: 53px;
    }

    a#linkRecipe { /* Section: textRecipe  */
        margin-top: 36px;
    }

    #pixel-art-maker a { /* previous button-like links are in previous sections */
        margin-top: 16px;
    }

    #firstPortfolio a {
        margin-top: 21px;
    }

    /* blockquote */
    blockquote {
        padding: 59px 0;
    }

    blockquote q {
        max-width: 100%;
    }

    /* To embed the section with tle logo *//* the effect works when the background-color of the previous one is light */
    /* Section: logo COLORSCODEX */
    h3#logoText {
        font: 400 30px "Raleway", sans-serif;
    }

    /* section certificatesContainer */
    /* For content changes, I use the blue grid */
    #programs-completed-w3,
    #programs-completed {
        margin: 0;
        background-clip: border-box;
        background-image: repeating-linear-gradient(
            90deg,
            transparent,
            transparent 24px,
            rgba(87,114,132, 0.25) 24px,
            rgba(87,114,132, 0.25) 26px,
            transparent 26px,
            transparent 50px,
            rgba(87, 114, 132, 0.25) 50px,
            rgba(87,114,132,0.25) 52px,
            transparent 52px,
            transparent 54px
            ), repeating-linear-gradient(
            0deg,
            transparent,
            transparent 24px,
            rgba(87,114,132, 0.25) 24px,
            rgba(87,114,132, 0.25) 26px,
            rgba(0,0,0,0) 26px,
            rgba(0,0,0,0) 50px,
            rgba(87,114,132, 0.25) 50px,
            rgba(87,114,132, 0.25) 52px,
            transparent 52px,
            transparent 54px);
    }

    #programs-completed-w3 {
        padding: 0 32px 0 32px;
        border-bottom: 0.0625rem solid rgba(87,114,132,0.3); /* for macOS ventura 13.6.6 */
    }

    #programs-completed {
        padding: 0 32px 95px 32px;;
    }

    #programs-completed-w3 p.description,
    #programs-completed p.description {
        height: 91px;
    }

    #programs-completed p.comment {
        max-width: 1024px;
    }
    
    /* Changes in the content. */
    hr.coursesSection {
        display: none;
    }

    /* Blocquote */
    blockquote.mediumQuote, 
    blockquote.largeQuote {
        padding: 50px 0;
    }

    /* Section contact | to give more importance */
    #contact {
        margin: 80px 0;
    }

    figure#devices { /* flex item */
        margin: 70px 0 50px 0;
        padding: 0;
    }

    #contact div.icon-button {
        margin: 0 0 110px 0;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up)
******************************************************************/
@media only screen and (min-width: 1200px) {
    nav {
        max-width: 1400px;
    }

    main,
    footer {
        max-width: 1400px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 6px 8px 0 rgba(0, 0, 0, 0.18); /* this css belongs to w3Schools | to create paper-like cards */
        -webkit-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
    }

    /* 
    *   <main> | flex item & flex box
    **********************
    **********************/
    #mainSection {
        height: 100vh;
        justify-content: space-evenly; /* Items will have equal space around them. */
    }

    #mainSection header {
        margin: 0; /* The margin has not effect here, because justify-container: space-evenly */
    }

    /*  Image with width 100% and height auto for being responsive and scale up and down; */
    div.boatPicture {
        margin: 0 0 30px 0; /* To better scale the position of elements *//* visual effect */
        padding: 50px;
        max-width: 900px;
    }

    /* Section about-author | flex item & flex box with flex-wrap: wrap. */
    #about-author { 
        /* background-image: linear-gradient(143.5deg, #d69c2f 50%, #fffff0 50%);*/ /* Mango Mojito | The Hottest Spring/Summer Colors 2019 | ivory */
        /* a more interesting optical effect */
        background-image: linear-gradient(to right bottom,
         #d69c2f 49.9%,
         #615550 0.5%,
         #fffff0 50.2%);
        border-top: none;
    }

    #about-author h2 {
        border-bottom: none;
        font: normal small-caps 500 36px "Cinzel", serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
        max-width: 400px;
    }

    div.introduce { /* flex item & flex box with flex-wrap: wrap */
        margin: 28px 0 88px 0;
        flex-flow: row wrap ; /* Reverse the position of the items, noe, first the image. */
    }

    figure.imgContainer {
        margin: 0 0 0 50px;
    }

    div.listContainer { /*flex item */
        padding: 0 0 0 40px;
        margin: 0 0 0 150px;
        max-width: 600px;
        border-radius: 0 7px 7px 0; /* top-left, top-right, bottom-right, bottom-left.*/
        border-left: 5px solid rgba(75,83,53,0.8);
        background-color: transparent;
        background-image: repeating-linear-gradient(-45deg,transparent,transparent, transparent, transparent, #4b5335 10px), repeating-linear-gradient(45deg,transparent,transparent, #4b5335 10px);;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* this css belongs to w3Schools | to create paper-like cards */
        -webkit-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    
    }

    /* TODO list <dl> */
    dl.shortIntroduction {
        padding: 40px 0;
        border-radius: 0 7px 7px 0; /* top-left, top-right, bottom-right, bottom-left.*/
        border-left: 3px solid rgba(75,83,53,0.8);
        background-color: #fffff0;     
    }

    dl.shortIntroduction > dt {
        font: 500 20px "Raleway", sans-serif;
        margin: 20px 0 0 30px;
    }

    dl.shortIntroduction dt:first-of-type {
        margin: 0 0 0 30px;
    }

    dl.shortIntroduction > dd {
        font: 400 20px "Raleway", sans-serif;
        line-height: 1.6;
        margin: 10px 0 0 50px;
    }

    /* Some recipes */ 
    p.commentText:nth-of-type(1) {
        padding: 0 0 32px 0;
    }  

    p.commentText:nth-of-type(3) {
        padding: 32px 0 0 0;
    }

    /* Some recipes */
    .marginTopBottom { /* flex item | flex Box */
        margin: 0;
    }

    /* <figure> tag COLORSCODEX */
    /* Text block over an image. */
    h2#textBlock { /* transition effect */
        font: 400 30px "Raleway", sans-serif;
        padding: 32px 0;
    }

    /* Section: My Hobby and Projects */
    /* Section: Projects
    **********************************/
    /* Background for large devices */ 
    #myHobby div.iframeContainer,
    .block-width,
    #pixel-art-maker div.iframeContainer,
    #recipe div.recipeContainer {
        flex-direction: row; /* Change direction */
        transition-duration: 2s;
    }

    .block-width {
        width: 100%;
        max-width: 1200px;
    }

    div.animationContainer,
    #firstPortfolio div.iframeContainer {
        flex-direction: row-reverse; /* Change direction */
        transition-duration: 2s;
    }

    #myHobby p.comment,
    #firstPortfolio p.comment,
    #pixel-art-maker p.comment,
    #slideCarousel p.comment {
        margin: 0;
    }

    #myHobby {
        background-image: linear-gradient(30deg, #f5f5dc 50%, #fffff0 50%); /* beige | ivory */
    }

    #recipe {
        background-image: linear-gradient(149deg, #f5f5dc 50%, #fffff0 50%); /* beige | ivory */
    }

    #pixel-art-maker {
        background-image: linear-gradient(31deg, #849dae 50%, #fffff0 50%); /* blue stone | ivory */
    }

    #firstPortfolio {
        background-image: linear-gradient(149deg, #849dae 50%, #fffff0 50%); /* blue stone | ivory */
    }

    #slideCarousel {
         background-image: linear-gradient(31deg, #849dae 50%, #fffff0 50%); /* blue stone | ivory */
    }

    #myHobby div.iframeContainer,
    div.animationContainer,
    #pixel-art-maker div.iframeContainer,
    #firstPortfolio div.iframeContainer,
    div.cardMagazine-container,
    .heroImgCollageContainer,
    div.library {/* then, the height is 640px */
        padding: 85px 0 110px 0;
    }

    div.recipeContainer { /* height 640px *//* visual effect */
        padding: 29px 0 110px 0;
    }

    p.comment {
        max-width: 500px;
    }

    section#textRecipe {
        max-width: 600px;
    }

    section#textRecipe p.comment {
        margin: 0;
        max-width: 600px;
    }

    /* <iframe> */
    iframe#my-first-portfolio,
    iframe#my-first-game,
    div.carouselEffect { /* flex item */
        max-width: 600px;
        height: 445px;
        margin: 0 100px 0 0;
    }

    .container-iframe {
        padding-top: 34.5%;
        margin: 0 100px 0 0;
    }


    #recipe figure {
        max-width: 500px;
        margin: 0 0 0 100px;
    }

    figure.myRecipe {
        padding: 40px;
    }

    /* To define thematic changes in the content:*/
    hr#myHobbyRecipes {
        display: block;
        border: 1px inset #4b5335;
        background-color: #4b5335;
    }

    hr.projectsSection {
        display: block;
        border: 1px inset #fffff0;
        background-color: #fffff0;
    }

    hr#libraryContact {
        display: none;
    }

    /* Google Certifications */
    #changeWidth {
        max-width: 1200px;
    }

    div.gallery figure { 
        max-width: 288px;
    }

    /* Section Library | flex item & flex box with flex-wrap: wrap */
    #custom-section { 
        justify-content: space-evenly;
        background-image: linear-gradient(146.5deg, #fffff0 50%, #615550 50%); /* Ivory | Brown Granite, The Hottest Spring/Summer Colors 2019 */
    }

    /* Section Library */
    div.library { /* flex item & flex box*/
        flex-direction: row-reverse; /* Change direction */
        margin: 0;
        width: 1200px; /* So we have the value effect space-between */
        justify-content: space-between;
    }

    /* Container <dl> */
    div.referencesContainer { /* flex item & flex box with flex-wrap: wrap */
        justify-content: space-between;
        width: 770px;
        padding: 0;
        margin: 0;
        border-radius: 7px;
        background-color: rgba(97,98,71,0.17); /* Terranium Moss *//* transparent effect */
    }

    /* TODO list <dl> */
    dl.references {
        max-width: 350px;
        margin: 0;
        padding: 50px 0;
        border-radius: 7px 0 0 7px; /* top-left, top-right, bottom-right, bottom-left.*/
        background-color: #fffff0;
    }

    dl.references:last-of-type {
        max-width: 350px;
        margin: 0;
        padding: 50px 0;
        border-radius: 0 7px 7px 0; /* top-left, top-right, bottom-right, bottom-left.*/
    }

    dl.references dt:first-of-type {
        padding: 0;
    }

    dl.references dd:last-of-type {
        padding: 0;
        margin: 0;
    }

    /* Container <figure> */
    div.imgFooter { /* flex item */
        max-width: 360px;
        margin: 0;
    }

    /* blockquote */
    blockquote q {
        font: normal small-caps 400 30px 'Raleway', serif;
    }

    p.author-quote {
        font: 400 20px 'Raleway', serif;
    }

    blockquote.mediumQuote,
    blockquote.largeQuote {
        padding: 66px 0;
    }

    blockquote.mediumQuote q {
        max-width: 900px;
    }

    h3#logoText,
    blockquote.largeQuote q {
        max-width: 1200px;
    }

    /* Section contact | to give more importance */
    #contact {
        margin: 0;
    }

    #contact header {
        margin: 0 0 50px 0;
    }

    figure#devices { /* flex item */
        margin: 97px 0 50px 0;
    }

    #contact h1 {
        font: 400 53px 'Cinzel', serif;
        height: 60px;
    }

    /* Footer */
    footer {/* I keep the block with a height of 200px */
        border-radius: 0 0 5px 5px; /* top-left, top-right, bottom-right, bottom-left.*/
        border-block-end-width: 5px;
        border-block-end-style: solid;
        border-block-end-color: #dcdcdc; /* gainsboro */
    }

    /* Section Color Palettes | Modal
    *********************************/
    #palette #colorTextOne {/* desactivate  */
        display: none;
    }

    #palette #colorTextTwo {
        display: inline-block;
    }

    div.galleryPalettes {
        margin: 96px 0 0 0;
        column-count: 3;
        column-gap: 16px;
        max-width: 1200px;
    }

    div.colorPalette {
        padding: 16px 0;
    }

    /* A special button */
    aside#logoBtn { /* flex item */
        display: block;
        z-index: 10;
        position: fixed;
        right: 2rem; /* In this case, rem units are practical in creating perfectly scalable layout! */
        bottom: 2rem; /* 32px */
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

    aside#logoBtn img {
        display: block;
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
}

/* Turn off parallax scrolling for tablets and phones. */
@media only screen and (max-width: 1366px) {
    .parallax {
        display: none;
    }

    /* Some recipes */
    div.galleryRecipes {
        border-bottom: none;
    }
}

@media only screen and (min-width: 1300px) {
    aside#logoBtn {
        right: 3.125rem; /* 50px */
        bottom: 5.2rem; /* 83.2px */
    }
}