/*
* 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
 * ================= */

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* -webkit- vendor prefix for Safari */
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    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 */
}

*::before, *::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; /* -moz- vendor prefix for Firefox */
}

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

html {
    width: 100%;
    height: 100%; /* 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. */
}

body {
    width: 100%;
    height: 100%;
    text-align: left;
    font-family: "Raleway", sans-serif;
    color: #000; /* black */
    background: #fffff0 repeating-linear-gradient(90deg,#fffff0, #f5f5dc 1%); /* ivory | beige */
}

section#privacity {
    background-color: #fffff0;
    background-image: linear-gradient(90deg, #fffff0 50%, #f5f5dc 50%);
    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 */  
    margin-left: auto;
    margin-right: auto;
    padding: 60px 32px;
    width: 100%;
    max-width: 1400px;
    height: auto;
    border-block-end-width: 5px;
    border-block-end-style: solid;
    border-block-end-color: gainsboro;
}

#privacity header {
    width: 100%;
    min-height: 200px;
    text-align: center;
}

#privacity h2 {
    margin-left: auto;
    margin-right: auto;
    padding: 36px 0 5px 0;
    height: auto;
    font: 400 26px "Raleway", sans-serif;
    text-transform: capitalize;
}

#privacity  p#titleDescription {
    border-top: 3px groove #808000; /* oliveDrab */
    max-width: 400px;
    padding: 5px 0 24px 0; /* Visual effect. */
    height: 61px;
    font: 400 26px "Raleway", sans-serif;
    margin-bottom: 0;
}

#privacity p {
    margin-left: auto; /* centered item */
    margin-right: auto;
    width: 100%;
    max-width: 1000px;
    font: 400 20px "Raleway", sans-serif;
    line-height: 1.6;
    margin-bottom: 50px;
    cursor: text;
}

#privacity p:last-of-type {
    margin-bottom: 86px;
}

/* Overlay Image | Prevent the image from being downloaded or copied.| Placed over the image */
.overlayImg {
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 86px;
    border-radius: 5px;
    background-color: transparent;
    position: relative;
    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. */
    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);
}

#privacity img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 5px;
}

#privacity a.goBack {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font: 400 20px 'Raleway', sans-serif;
    max-width: 200px;
    padding: 10px 15px 15px 15px;
    border-radius: 7px;
    color: #fffff0; /* Ivory */
    background-color: #800000; /* Marron */
    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. */
    text-decoration-color: #fffff0; /* Ivory */
    text-align: center;
    cursor: pointer;
    margin-bottom: 36px;
}

#privacity a.goBack:hover {
    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); 
}