@import url('https://fonts.googleapis.com/css?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');

:root           {--colour1             : rgb( 255, 255, 204);  /* Grey  Header and text 153, 204, 255 */
                 --colour2             : rgb( 180, 140, 148);  /* Blue  Menu bar        255, 255, 255     217, 217, 217 */
                 --colour3             : rgb( 135, 152, 179);} /* Cream Background      255, 255, 204     153, 153, 153 */

.primary        {--colour1             : rgb( 255, 255, 204);  /* Grey  Header and text 153, 204, 255 */
                 --colour2             : rgb( 135, 152, 179);  /* Blue  Menu bar        255, 255, 255     217, 217, 217 */
                 --colour3             : rgb( 135, 152, 179);} /* Cream Background      255, 255, 204     153, 153, 153 */

/*.primary        {--colour1             : rgb( 255, 255, 204);  /* Grey  Header and text 153, 204, 255    180, 140, 148*/


body            {margin                 : 0 auto;
                 font-family            : serif;
                 font-size              : 80%;
                 max-width              : 900px}

body            {background-color       : var(--colour1);
                 color                  : var(--colour3);
                 font-size              : 0.8em;}

a               {color                  : var(--colour3);}  /* dark blue */

header          {background-color       : var(--colour3);  /* dark blue */
                 color                  : var(--colour1);}  /* cream     */
section         {background-color       : var(--colour3);  /* dark blue */
                 color                  : var(--colour1);  /* cream     */
                 min-height             : 128px;}
section a       {padding-left           : 20px;}
section a img   {width                  : 160px;
                 float                  : left;
                 margin-top             : 10px;
                 margin-left            : 10px;
                 margin-right           : 10px;}
section h1      {margin-top             : 0px;
                 font-family            : 'Parisienne', cursive;
                 font-size              : 3em;
                 margin-bottom          : -20px;}

h2              {background-color       : var(--colour3);  /* dark blue */
                 color                  : var(--colour1);  /* cream     */
                 margin-top             : 0px;
                 padding-left           : 10px;
                 padding-top            : 20px;
                 min-height             : 50px;}

nav             {background-color       : var(--colour2);  /* aqua blue */
                 line-height            : 55px;
                 min-height             : 55px;}

nav a           {color                  : var(--colour1);  /* cream     */
                 padding-top            : 18px;
                 padding-bottom         : 19px;
                 padding-left           : 10px;
                 padding-right          : 10px;}
nav a:hover     {background-color       : var(--colour1);  /* cream     */
                 color                  : var(--colour2);  /* aqua blue */
                 min-height             : 55px;}

/* Main text */
main            {margin                 : 30px;}

/* Home */
.blue-strip     {height                 : 10px;
                 background-color       : var(--colour3);} /* dark blue */

/* FAQ tab */
/* Style the buttons that are used to open and close the accordion panel */
.accordion      {height                 : 60px;
                 width                  : 830px;
                 font-size              : 1em;
                 text-align             : left;
                 font-family            : serif;
                 background-color       :           var(--colour1);
                 border-radius          : 5px;
                 border                 : 2px solid var(--colour3);
                 color                  :           var(--colour3);
                 margin-left            : 3px;
                 margin-top             : 5px;
                 margin-bottom          : 2px;
                 padding                : 10px;
                 cursor                 : pointer;
                 transition             : 0.4s;}

/* Invert button colours when hovering over the accordian. */
.accordion:hover{background-color       :           var(--colour2);
                 border-radius          : 5px;
                 border                 : 2px solid var(--colour2);
                 color                  :           var(--colour1);}

/* Invert button colours after clicking on the accordian. */
.accordion.active{background-color       :           var(--colour2);
                 border-radius          : 5px;
                 border                 : 2px solid var(--colour2);
                 color                  :           var(--colour1);}

/* Style the accordion panel. Note: hidden by default */
.panel          {padding                : 10px;
                 display                : none;
                 overflow               : hidden;}

/* Add a + to the right of the accordion */
.accordion:after{content                : '+';
                 font-size              : 100%;
                 float                  : right;
                 margin-left            : 5px;
}

/* Add a - to the right of the accordion */
.active:after   {content                : '-';
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
.panel.show     {display                : block !important;
                 background-color       :           var(--colour1);
                 border                 : 2px solid var(--colour1);
                 padding-top            : 0px;
                 margin-top             : 0px;
                 margin-bottom          : 0px;
                 margin-left            : 10px;}

h4              {color                  : var(--colour2);
                 margin-bottom          : -10px;}

.faq-img        {border                 : 2px solid var(--colour2);
                 margin                 : 20px;}

.link-img       {text-decoration        : none;}

/* About me tab */
.aboutMe        {color                   : var(--colour1);
                 background-color        : var(--colour2);
                 font-size               : 110%;
                 padding                 : 10px;
                 border                  : 3px solid var(--colour2);}

.leftcol, .rightcol
                {max-width               : 48%;
                 flex                    : 1 0 15em;
                 padding                 : 10px;}

.LeftPic        {display                : flex;
                 flex-flow              : row wrap;
                 justify-content        : center;
                 align-items            : center;
                 padding                : 10px;
                 color                  : var(--colour3);  /* dark blue */
                 background-color       : var(--colour1);
				 border                 : 2px solid var(--colour3);}

.RightPic       {display                : flex;
                 flex-flow              : row wrap;
                 justify-content        : center;
                 align-items            : center;
                 margin-left            : 0px;
                 padding-left           : 0px;
                 color                  : var(--colour1);  /* cream     */
                 background-color       : var(--colour3);  /* dark blue */}

/* Footer */
footer          {background-color       : var(--colour3);  /* dark blue */
                 color                  : var(--colour1);  /* cream     */
                 height                 : 70px}

footer p        {padding-left           : 10px;
                 padding-right          : 10px;
                 padding-top            : 2px;
                 padding-bottom         : 5px;}

.FooterLeftCol  {float                  : left;}
.FooterRightCol {float                  : right;}

.icon           {height                 : 50px;
                 padding                : 15px;}

@media only screen and (max-width: 780px) {
section         {padding-left           : 0px;}

section a img   {float                  : none;
                 padding-left           : -10px;
				 margin-left            : -10px;}

section h1      {font-size              : 2em;}

header h1,
header p        {padding-left           : 10px;
                 margin-left            : 0px;
                 border-left            : 0px;}

nav             {background-color       : var(--colour2);  /* aqua blue */
                 line-height            : 30px;}

nav a           {color                  : var(--colour1);  /* cream     */
                 padding-top            : 10px;
                 padding-bottom         : 10px;
                 padding-left           : 5px;
                 padding-right          : 5px;}

footer          {height                 : 140px;}

.icon           {height                 : 40px;
                 padding                : 5px;}

.accordion      {width                  : auto;}

.leftcol, .rightcol
                {max-width               : 100%;
                 flex                    : none;
                 padding                 : 0px;}

.LeftPic,
.RightPic       {max-width               : 100%;
                 padding                : 5px;
                 flex-flow              : none;
                 margin                 : 0px;}

.img1, .img2    {max-width              : 90%;
                 align-items            : center;}
}

@media only screen and (max-width: 300px) {
.faq-img        {margin                 : 5px;}

.img1, .img2    {max-width              : 80%;
                 align-items            : center;}

}

@media only screen and (min-width: 1000px) {
body            {font-size              : 100%;
                 max-width              : 1000px}

section a img   {width                  : 220px;}
}

/* Hover menus */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}