/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; 
min-height: 100vh; text-rendering: optimizeSpeed }  
img { width: 100%; height: auto; display: block }
h1, h2, h3, h4 { width: 100% }
input, button, textarea, select { font: inherit }

/* ================= ENDS ================ */

body { 
    background-color: #f8f5f3;
    border-top: solid 20px #f820c0;   
    border-bottom: solid 20px #f820c0
}


/* ==== Web page width ==== */

/* Desktops */
@media (min-width:768px) { body { padding: 4% 18% } }


/* Mobiles */
@media (max-width:767px) { body { padding: 12% 8% } }


/* Headings */

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-weight: normal;
}
 
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    text-align: center;
    margin-bottom: 24px;
    color: #f820c0
}
 
h3 {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-size: 36px;
    margin-top: 42px;
    margin-bottom: 6px;
}

/* Text paragraphs */

p {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Images */

img { margin-bottom: 20px }


/* === Panel boxes === */
.important-note-box { 
    margin: 54px 0;
    padding: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
}

/* Child sub-heading h3 inside panel boxes */
.important-note-box h3 { 
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Child paragraph p inside panel boxes */
.important-note-box p { 
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* === Four different panel box styles === */

/* Panel box style 1 */
.important-note-box.box-style-1 { 
    border-color: #1FA441;
    box-shadow: 8px 10px 8px #888;
    background-color: #E4F5E8; 
 }
 
 .important-note-box.box-style-1 h3 { color: #1FA441 }

 /* Panel box style 2 */
.important-note-box.box-style-2 { 
    padding: 16px 0 16px 0;
    border-width: 8px 0 4px 0;
    border-color: #044E6C;
 }
 
 .important-note-box.box-style-2 h3 { color: #044E6C }
 .important-note-box.box-style-2 p  { color: #044E6C }

 /* Panel box style 3 */
.important-note-box.box-style-3 { 
    border-width: 0 0 0 20px;
    border-left-color: #E66465;
    background-color: #FFE7E8
}

 /* Panel box style 4 */
.important-note-box.box-style-4 { 
    padding: 22px;
    border-radius: 10px;
    border-color: #2c4763;
    background-color: #1f364d;
 }
 
 .important-note-box.box-style-4 h3 { color: #9cb3c9 }
 .important-note-box.box-style-4 p  { color: #fff }