/*
* 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;
    -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax *//* CSS user-select Property */
    margin: 0;
    padding: 0;
    border: none;
    border-color: transparent;
    outline: none;
    outline-color: transparent;
}

*::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. */
}

/*  HSL color values are supported in Edge, Chrome, Firefox, Safari, Opera 10+, and in IE9+.*/
:root {
    --Beige: Beige;
    --Black:  hsl(0, 0%, 20%);
    --BrownOlive: hsl(348, 57%, 10%); /* rgb(40, 11, 17) */
    --Chocolate: Chocolate;
    --DarkBlue: DarkBlue;
    --DarkCian: DarkCyan;
    --FloralWhite: FloralWhite;
    --Gainsboro: Gainsboro;
    --Green: Green;
    --Gray: Gray;
    --IndianRed: IndianRed;
    --Ivory: Ivory;
    --Olive: Olive;
    --OrangeRed: OrangeRed;
    --Maroon: Maroon;
    --SaddleBrown:SaddleBrown;
    --SeaGreen: SeaGreen;
    --Tomato: Tomato;
    --White: White;
    --WhiteSmoke: WhiteSmoke;
    --backgroundColor: hsl(48, 38%, 95%);
}

/*  Combined methods to improve presentation.*/
/*  CSS Flexbox Layout for one-dimensional layout, with rows OR columns. */
/*  CSS Grid Layout for two-dimensional layout, with rows AND columns./
/*  And, */
/*  CSS [attribute] Selector */
/*  The attribute selectors for styling items without class or ID- */

/*  Style the body */
/*  Arial is considered the safest sans-serif font on the web. It is installed on all Windows machines (99.8%) and all Mac machines (98.7%). 
    =====*/
/*  Helvetica runs on all Mac machines (100%) but on fewer Windows machines (7.3%) 
    =========*/
body {
    font-family: Helvetica, Arial, sans-serif; /* Web Safe Fonts. */
    color: var(--Black);
    background-color: var(--backgroundColor);
    text-align: center;
    line-height: 1.5;
}

/*  All images */
.responsive {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    background-color: var(--White);
    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. */
    object-fit: cover;
}

/*  To create space when needed. */
.whiteSpace {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
}

/*  The grid-area property specifies a grid item's size and location in a grid layout, 
    =================================================================================*/
.title {grid-area: title;}
#author-presentation {grid-area: photography}
.aside-projects {grid-area: projects;}
.main-column {grid-area: main-column;}
#key-summary {grid-area: summary;}
.feature-subject {grid-area: feature-article;}
.small-article-portfolio {grid-area: portfolio;}
.small-article-magazine {grid-area: magazine;}
.only-big-screens {grid-area: quote;}
.app-gallery {grid-area: apps;}
.header-gallery {grid-area: title;}
.staging {grid-area : blockquote;}
#link-card-container {grid-area: card;}
.aside-certifications {grid-area: certifications;}
.languages {grid-area: languages;}
.languages-theme {grid-area: title;}
.spoken-written-languages {grid-area: spoken-written;}
.programing-languages {grid-area: programing;}
.large-text {grid-area: quote;}
.buttonLikeLink-container {grid-area: button;}
#information {grid-area: info;}
#signature {grid-area: signature;}

/*  grid-template-areas property specifies areas within the grid layout.*/
/*  main tag 
    ========*/
[class="CV-template"] {
    display: grid;
    grid-template-areas: 
    'title              title           title'
    'photography        main-column     main-column'
    'projects           main-column     main-column'
    'apps               apps            apps'
    'certifications     certifications  certifications'
    'languages          languages       languages';
    grid-template-columns: 1fr 1fr 1fr; /* 1fr to divide the space into four equal parts.*/
    grid-template-rows: auto auto auto auto auto auto;
    background-color: var(--backgroundColor);
    gap: 16px;
    padding: 16px;
    align-items: stretch;
}

header[class="title"] {
    padding: 3rem 1rem;
    background: var(--White);
}

/*  Times New Roman is considered the most web safe serif font. It works on all Windows machines (99.7%) and all Mac machines (97.4%). 
    ===============*/
header[class="title"] :nth-child(1) h1 {
    font: bold 4rem "Times New Roman", sans-serif;
}

header[class="title"] :nth-child(1) p { 
    font: small-caps 1.5rem Helvetia, Arial, sans-serif;
    text-transform: capitalize;
    padding: 0.5rem 0;
}

/*  flex container */
figure[id^="author"] {
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--White);
}

/*  flex item | figcaption tag */
/*  Times New Roman looks professional and is used in many newspapers and "news" websites. */
figure[id^="author"] figcaption {
    padding: 2rem 1rem;
    text-align: left;
}

/*  TODO list: A description list is a list of terms, with a description of each term. */
/*  Customized list */
figcaption[id^="career"] dl {
    border-left: 3px solid hsl(209, 12%, 65%);
    background-color: hsl(0, 0%, 95%);
    padding: 20px;
    box-shadow: 0 2px 5px var(--Gray);
}

figcaption[id^="career"] dt {
    font: 600 1.2rem/1.5  'Times New Roman', serif;
    line-height: 1.5;
    letter-spacing: -0.022em;
    padding: 0 0 1rem 0;
}

figcaption[id^="career"] dt:last-of-type {
    padding: 1rem 0 0 0;
}

figcaption[id^="career"] dd {
    font: 400 1.18rem/1.5  'Times New Roman', serif;
    letter-spacing: -.022em;
    padding: 0 0 5px 0;
}

figcaption[id^="career"] dd:last-of-type {
    padding: 0;
}

figcaption[id^="career"] dd[class="university-degree"]::first-letter {
    font-weight: 600;
}

/*  Main column 
    ===========*/
section[class="main-column"] {
    display: grid;
    gap: 16px;
    grid-template-areas: 
    'summary            summary'
    'feature-article    feature-article'
    'portfolio          magazine';
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    text-align: left;
}

section[class="main-column"] #key-summary,
article[class^="feature-subject"],
article[class^="small-article"] {
    background-color: var(--White);
}

/*  Segoe UI is the default font for headings. Segoe UI has a more narrow letter spacing. This allows for a few more letters in the headings.
    =========*/
section[class="main-column"] #key-summary { /* To center the text. */
    display: grid;
    align-items: center;
    justify-content: center;
    font: 500 3rem "Segoe UI",sans-serif;
    text-align: center;
    padding: 1rem;
    max-height: 200px;
    min-height: 150px;
}

/* title for main article & languages section */
[class$="theme"] {
    font: 500 2rem "Segoe UI",sans-serif;
    padding: 2.5rem 1rem;
    border-bottom: 1px groove var(--Beige);
}

/*  The align-content property is used to align the grid items when they do not use all available space on the cross-axis (vertically).*/
article[class^="small-article"] {
    display: grid;
    align-content: space-between;
    justify-content: center;
}

article[class^="small-article"] hgroup {
    width: 100%;
    border-bottom: 1px groove var(--Beige);
}

article[class^="small-article"] h3 {
    font: 500 2rem "Segoe UI",sans-serif;
    padding: 2.5rem 1rem 0 1rem;
}

article[class^="small-article"] .date {
    padding: 0 1rem 1rem 1rem;
}

/*  Styling text */
/*  paragraphs */
[class^="about"] {
    padding: 1rem;
    font: 400 1.125rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 1rem;
    letter-spacing: -.022em;
    border-left: 1rem solid hsl(209, 12%, 65%)
}

[class$="subject"] p:first-child {
    display: grid;
    padding: 2.5rem 1rem 1rem 1rem;
}

/*  To define text with strong importance. */
strong {
    font: 500 1.125rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*  blockquote tag */
[class$="subject"] blockquote {
    font: 500 1.5rem/1.5 Verdana, serif;
    text-align: center;  
    padding: 2rem 8rem;  
}

hr {
    margin: 1.5rem 0;
    border: 2px inset hsl(209, 12%, 65%);
}

[class$="subject"] blockquote:nth-of-type(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    padding: 2rem 8rem 3rem 8rem;
}

[class$="subject"] blockquote:nth-of-type(2) p {
    font: 400 1.125rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: .5rem 0 0 0;
}

/*  small-article */
article[class^="small-article"] figure:not(.app) {
    margin: 2rem 0 0 0;
    width: 100%;
}

/*  Article with link as cards to open the apps. */
.app-gallery {
	/* display: grid;*//* small-article with this property. */
    grid-template-areas: 
    'title title title title'
  	'blockquote blockquote blockquote blockquote'
    'card   card    card    card';
    grid-template-columns: auto auto auto auto; /* 1fr to divide the space into four equal parts.*/
    grid-template-rows: 1fr auto auto;
    text-align: left;
    padding: 0 0 3rem 0;
}

/* links as cards | felx container */
#link-card-container {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row wrap;
    padding: 1rem;
}

/*  figure tag */
.app {
    display: flex;
    display: -webkit-flex;
    flex-flow: column nowrap;
    max-width: 18rem;
    height: 18rem;
    align-items: center;
    box-shadow: 5px 5px gray, 10px 10px darkgray, 15px 15px gainsboro;
    margin: 2rem 0;
}

.app img {
  	max-width: 18rem;
}

.white {
    border: 1px solid var(--Gainsboro);
}

.app figcaption {
    border-top : 4px groove gainsboro;
}

.app p {
    margin: 1rem 0 0 0;
    padding: 0 0.3rem;
}

abbr {
    color: var(--DarkBlue)
}

/* A link with an image */
.open-app {
    display: block;
    text-decoration: none;
    color: var(--Black);
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.app:hover {
    box-shadow:2px 5px hsl(196, 100%, 15%),  5px 5px hsl(196, 100%, 15%),10px 10px hsl(34, 65%, 62%), 15px 15px darkred;
}

/*  aside | in common */
/*  Sidebar/left&right columns *//* Select elements with the specified attribute, whose value starts with the specified value: aside.*/
[class^="aside"] {
    background-color: var(--White);
}

[class^="aside"] hgroup {
    padding: 2rem 0 1rem 0;
    max-height: 194px;
    width: 100%;
}

/*  Georgia works well on most Windows machines (99.4%) and Mac machines (97.5%) 
    =======*/
[class^="aside"] h2 {
    font: 400 2rem Georgia, serif;
    border-bottom: 1px groove var(--Beige);
    padding: 0 0 2rem 0;
}

[class^="aside"] p {
    font-size: 1.2rem;
    padding: 1rem 0 0 0;
}

/*  aside | left column */
/*  Projects */
[class$="projects"] {
    display: flex;
    row-gap: 1rem;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

/*  figure with projects *//* Selects all elements with a class attribute value ends with "project" */
figure[class$="project"] { /* grid item */
    padding: 1rem;
}

[class$="projects"] figure img  {
    max-width: 400px;
    padding: 5%; 
    border: 20px double hsl(46, 35%, 38%);
    box-shadow: 0 2px 4px var(--Gray);
}

[class$="projects"] figure:nth-of-type(1) img{
    background-color: var(--backgroundColor);
}

[class$="projects"] figure:nth-of-type(2) img{
    background-color: var(--FloralWhite);
}

[class$="projects"] figure:nth-of-type(3) img{
    background-color: var(--White);
}

[class$="projects"] figure:nth-of-type(4) img{
    background-color: var(--White);
}

/*  Contains a link as a button to the corresponding project. */
[class$="projects"] figcaption.project {
    display: grid;
    justify-items: center; /* on absolutely positioned grid items */
    padding: 1rem 0;
}

/*  aside with certifications */
[class$="certifications"] {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-around;
    gap: 1rem;
    padding: 0 0 2rem 0;
}

/*  figure with certifications */
figure[class$="certification"] { /* flex item */
    max-width: 420px;
    padding: 1rem;
    border: 5px outset var(--Beige);
}

figure[class$="certification"] img {
    border: 5px inset var(--Beige);
}

/*  Languages 
    =========*/
[class="languages"] {
    display: grid;
    gap: 16px 10px;
    grid-template-areas: 
    'title  title   title'
    'spoken-written programing  quote'
    'spoken-written programing  button';
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto auto auto;
    text-align: left;
    background-color: var(--White);
}

[class="languages"] aside[class$="languages"] {
    width: 100%;
    max-width: 500px;
    padding: 1rem;
    align-self: center;
}

/*  styling text */
[class^="spoken"] h4 {
    font: small-caps 400 1.5rem  "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: capitalize;
    padding: 0 0 3rem 0;
}

[class$="language"],
[class$="language"]:last-of-type {
    padding: 1rem 0;
    text-indent: 0;
    border-left: 0;
}

[class="languages"] blockquote {
    font: 600 2.5rem  "Helvetica Neue", Helvetica, Arial, sans-serif;
    align-self: center;
    text-align: left;
    padding: 1rem;
}

[class="languages"] blockquote p {
    font: 400 1.125rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: right;
}

/*  Design bars to mark the level of knowledge. */
[class="progress-bar"] {
    position: relative;
    background-color: var(--Gainsboro);
    width: 100%;
    height: 1.2rem;
    border-radius: 5em;
}

[class="progress-bar"] span {
    display: block;
    position: relative;
    z-index: 1;
    background-color: hsl(150, 40%, 45%);
    width: 100%;
    height: 1.2rem;
    border-radius: 5em;
    text-align: center;
}

[class="progress-bar"] span.intermediate-level {
    width: 70%;
    border-radius: 5em;
}

[class="languages"] figure {
    max-width: 500px;
    height: auto;
    border: 4px groove var(--Gainsboro);
    border-radius: 12px;
}

[class="languages"] figure figcaption {
    padding: 1rem;
    font: 400 1.125rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.withBorderTopRadius {
    border-radius: 12px 12px 0 0;
}

/*  flex box */
[class="languages"] aside[class^="button"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*  To link to another section on the same page. | A link styled as a button. */
[class="languages"] #go-up,
[class="languages"] #go-up:visited {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    border: 8px double hsl(209, 12%, 65%);
    outline: 5px double hsl(209, 12%, 65%);
    outline-offset: 8px;
    color: var(--Black);
    text-decoration: none;
    background-color: hsl(34, 65%, 62%);
    background-clip: padding-box;
    padding: .7rem 0 0 0;
    margin: 2rem;
    transition: 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[class="languages"] #go-up:hover {
    border: 8px double var(--OrangeRed);
    outline: 5px double var(--OrangeRed);
    outline-offset: 8px;
    color: var(--Black);
    text-decoration: none;
    background-color: var(--Tomato);
    background-clip: padding-box;
    box-shadow: 0 3px 7px var(--Gray);
}

/*  footer 
    =====*/
[class="authorship"] {
    display: grid;
    column-gap: 1.7rem;
    grid-template-areas:'info   signature';
    grid-template-columns:  1fr auto;
    grid-template-rows: auto;
    padding: 2rem 1rem;
    color: var(--White);
    background-color: hsl(209, 12%, 35%);
    text-align: right;
}

#signature {
    max-width: 100px;
    align-self: center;
    margin: 0 0.7rem 0 0;
}

/*  Combine several CSS properties to display links styled as buttons. 
======================================================================*/
/*  unvisited link | visited link */
[class$="projects"] a,
[class$="projects"] a:visited,
[class^="small-article"] a.line,
[class^="small-article"] a.line:visited {
    display: block;
    align-self: center;
    color: var(--Black);
    transition: 0.3s;
    text-align: center;
    font-size: 1.1rem;
    background-clip: padding-box;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[class^="small-article"] a.line,
[class^="small-article"] a.line:visited { /* grid item */
    justify-self: center;
    width: 8.5rem;
    outline: 5px solid hsl(68, 13%, 66%);
    outline-offset: 5px;
    padding: 1rem 2rem;
    margin: 2rem 0;
    border-radius: 10px;
    background-color: hsl(68, 13%, 66%);
}

[class$="projects"] a,
[class$="projects"] a:visited {
    padding: 0.5rem 1rem;
    width: 14rem;
    border: 8px double hsl(240, 18%, 23%);
    background-image: linear-gradient(hsl(68, 13%, 66%), white);
}

.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. */
}

/*  Transition on Hover
    ===================
    to change property values smoothly (from one value to another), over a given duration. 
    Add a transition effect (background color) to a button on hover */
[class^="small-article"] a.line:hover {
    color: hsl(68, 13%, 66%);
    background-color: var(--BrownOlive);
    background-clip: padding-box;
    outline: 5px solid var(--BrownOlive);
    outline-offset: 10px;
    box-shadow: 0 3px 7px var(--Gray);
}

[class$="projects"] a:hover {
    color: var(--Black);
    border: 8px double hsl(68, 13%, 66%);
    background-color: var(--BrownOlive);
    background-clip: padding-box;
    box-shadow: 0 3px 7px hsl(209, 12%, 35%);
    background-image: linear-gradient(white, hsl(68, 13%, 66%));
}

/* selected link */
[class^="small-article"] a.line:active {
	color: var(--Black);
  	background-color: var(--IndianRed);
  	background-clip: padding-box;
  	outline: 5px solid var(--IndianRed);
  	outline-offset: 10px;
  	box-shadow: 0 3px 7px var(--Gray);
}

/* A link */
[class^="simple"] {
    display: inline-block;
    color: var(--DarkBlue);
    transition: 0.3s;
    padding: 0 .5rem;
    text-indent: 0;
}

[class^="simple"]:hover {
    color: var(--White);
    background-color: hsl(209, 12%, 65%);
    border-radius: 5px;
    padding: 0 .5rem;
    text-decoration: none;
}

/*  Only big screens */
.only-big-screens {
    display: none;
    font: 600 2.5rem  "Helvetica Neue", Helvetica, Arial, sans-serif;
    align-self: first baseline;
    text-align: left;
    padding: 2.5rem 1rem 1rem 1rem;
    background-color: var(--White);
}

.only-big-screens p {
    font: 400 1.125rem/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: right;
}

@media only screen and (min-width: 1500px) {
    .only-big-screens {
        display: block;
    }

    /*  main tag 
    ========*/
    [class="CV-template"] {
        display: grid;
        grid-template-areas: 
        'title              title           title'
        'photography        main-column     main-column'
        'projects           main-column     main-column'
        'projects           quote           quote'
        'apps               apps            apps'
        'certifications     certifications  certifications'
        'languages          languages       languages';
        grid-template-columns: 1fr 1fr 1fr; /* 1fr to divide the space into four equal parts.*/
        grid-template-rows: auto auto auto auto auto auto;
        background-color: var(--backgroundColor);
        gap: 16px;
        padding: 16px;
        align-items: flex-start;
    }
}

/*  Desktops, large screens. */
@media (min-width: 1025px) and (max-width: 1200px) {
    [class="CV-template"] {
        grid-template-areas: 
        'title          title'
        'photography    photography'
        'main-column    main-column'
        'apps           apps'
        'quote          quote'
        'projects       projects'
        'certifications certifications'
        'languages      languages';
        grid-template-columns: auto auto; 
        grid-template-rows: auto auto auto auto auto auto auto;
    }

    figure[id^="author"] {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    figure[id^="author"] img {
        max-width: 400px;
    }

    figure[id^="author"] figcaption {
        border-left: 1rem solid var(--White);
        max-height: 500px; /* the image height */
    }

    /*  Main column */
    section[class="main-column"] {
        grid-template-areas: 
        'summary            summary'
        'feature-article    feature-article' 
        'portfolio          magazine';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 16px;
    }

    /* figure with app image */
    .app img {
        max-width: 25rem;
    }

    .app {
        max-width: 25rem;
        height: 22rem;
        box-shadow: 0 3px 7px var(--Gray);
    }

    .app:hover {
        box-shadow: 0 3px 7px var(--Gray);
        outline: 6px solid hsl(34, 65%, 62%);
    }

    /*  aside with projects */ 
    [class$="projects"] {
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .only-big-screens {
        display: block;
    }
}

/*  For Small screens of laptops */
/*  Responsive layout - when the screen is less than 1024px wide, make the two columns stack on top of each other instead of next to each other */
@media (min-width: 769px) and (max-width: 1024px) {
    [class="CV-template"] {
        grid-template-areas: 
        'title          title'
        'photography    photography'
        'main-column    main-column'
        'quote          quote'
        'apps           apps'
        'projects       projects'
        'certifications certifications'
        'languages      languages';
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto 1fr auto auto auto auto auto;
        row-gap:16px;
    }

    figure[id^="author"] {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    figure[id^="author"] img {
        max-width: 360px;
        padding: 0 2rem;
    }

    figure[id^="author"] figcaption {
        border-left: 1rem solid var(--backgroundColor);
    }

    /*  Main column */
    section[class="main-column"] {
        grid-template-areas: 
        'summary'
        'feature-article' 
        'portfolio'
        'magazine';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 16px;
    }

    /* Article with links as cards.  */
    .app-gallery {
        grid-template-columns: 1fr;
        grid-template-areas: 
        'title'
        'blockquote'
        'card';
    }

    /* links as cards | aside tag flex container */
    #link-card-container {
        flex-flow: column-reverse wrap;
    }

    /* figure tag */
    .app {
        height: auto;
        max-width: 500px;
        box-shadow: 0 3px 7px var(--Gray);
    }

    .app:hover {
        box-shadow: 0 3px 7px var(--Gray);
        outline: 6px solid hsl(34, 65%, 62%);
    }

    .app img{
        max-width: 500px;
    }

    .app p {
        margin: 1rem 0
    }

    /*  blockquote tag */
    [class$="subject"] blockquote:nth-of-type(2),
    [class$="subject"] blockquote {
        padding: 2rem 6rem;
    }

    /*  aside | with projects */ 
    [class$="projects"] {
        flex-flow: row wrap;
        justify-content: space-around;
    }

    [class$="projects"] figure img  {
        max-width: 330px;
    }

    /*  aside | with certifications */
    figure[class$="certification"] { /* flex item */
        max-width: 330px;
    }  

    /*  Languages */
    [class="languages"] {
        display: grid;
        gap: 16px 10px;
        grid-template-areas: 
        'title              title'
        'quote              quote'
        'spoken-written     programing'
        'button             button';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        text-align: left;
    }

    .only-big-screens {
        display: block;
    }
}

/*  iPads, Tablets */
@media screen and (max-width: 768px) {
    [class="CV-template"] {
        grid-template-areas: 
        'title'
        'photography'
        'main-column'
        'apps'
        'projects' 
        'certifications' 
        'languages';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
    }

    /*  Main column */
    section[class="main-column"] {
        grid-template-areas: 
        'summary'
        'feature-article' 
        'portfolio' 
        'magazine';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 16px;
    }

    /*  blockquote tag */
    [class$="subject"] blockquote:nth-of-type(2),
    [class$="subject"] blockquote {
        padding: 2rem;
    }

    .app-gallery {
        grid-template-columns: 1fr;
        grid-template-areas: 
        'title'
        'blockquote'
        'card';
    }

    /* links as cards | aside tag flex container */
    #link-card-container {
        flex-flow: column-reverse wrap;
    }

    /* figure tag*/
    .app {
        height: auto;
        max-width: 500px;
        box-shadow: 0 3px 7px var(--Gray);
    }

    .app:hover {
        box-shadow: 0 3px 7px var(--Gray);
        outline: 6px solid hsl(34, 65%, 62%);
    }

    .app img{
        max-width: 500px;
    }

    .app p {
        margin: 1rem 0
    }

    /*  aside with projects */
    /*  aside | left column */
    [class$="projects"] {
        row-gap: 1rem;
        padding: 0 0 2rem 0;
    }

    [class$="projects"] figure img  {
        max-width: 500px;
    }

    /*  aside | with certifications */
    figure[class$="certification"] { /* flex item */
        max-width: 500px;
    }   

    /*  Languages */
    [class="languages"] {
        display: grid;
        gap: 16px 10px;
        grid-template-areas: 
        'title              title'
        'quote              quote'
        'spoken-written     programing'
        'button             button';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        text-align: left;
    }
}

/*  Mobile devices */
/*  Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
    body {
        background-color: hsl(209, 12%, 65%);
    }

    [class="CV-template"] {
        padding: 0;
        background-color: hsl(209, 12%, 65%);
        row-gap: 4px;
    }

    section[class="main-column"] {
        background-color: hsl(209, 12%, 65%);
        row-gap: 4px;
    }

    /*  paragraphs */
    [class^="about"] {
        border-left: 0;
    }

    /*  blockquote tag */
    [class$="subject"] blockquote:nth-of-type(2),
    [class$="subject"] blockquote {
        padding: 2rem 1rem;
    }

    /*  Article with links styled as a card. */
    .app-gallery {
        padding: 0 1rem 3rem 1rem;
    }

    #link-card-container {
        padding: 0;
    }

    [class^="aside"] hgroup {
        padding: 2rem 0 1rem 0;
    }

    /*  aside | with projects */
    [class$="projects"] figure img  {
        max-width: 400px;
    }
    
    /*  aside | with certifications */
    figure[class$="certification"] { /* flex item */
        max-width: 400px;
        border: none;
    }   

    /*  Languages */
    [class="languages"] {
        display: grid;
        gap: 16px 10px;
        grid-template-areas: 
        'title'
        'quote'
        'spoken-written'
        'programing'
        'button';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        text-align: left;
    }
    
    /*  footer 
        =====*/
    [class="authorship"] {
        column-gap: 1rem;
    }
    
    #signature {
        margin: 0;
    }
}