@charset "UTF-8"; /*-- 2022 Copyright by GirlJacket.com All Rights Reserved.--*/
* {
  margin: 0;
  border: 0;
  padding: 0;
  background-repeat: no-repeat;
  font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
  line-height: 1.3;
  letter-spacing: 1px;
  text-decoration: none;
  box-sizing: border-box;
}
header, section, footer, aside, nav, main, article, figure { display: block; }
h1, h2, h3, h4 { text-align: center; }
h1 {
  margin: 18px 5px 0 5px;
  color: rgb(204, 38, 102);
  font-weight: 600;
}
h2, h3, h4 {
  margin: 50px 20px 4px 0;
  color: rgb(24, 24, 219);
  font-weight: 600;
}
p { 
  padding: 16px 0 20px 0;
  font-size: 20px;
  /*--font-weight: 600;--*/
  color: rgb(100, 30, 0);
  }
dfn, abbr, strong { 
  color: rgb( 0, 0, 0);
  font-weight: bold;
}

form { text-align: center; }

.container{
  width: 96%;
  overflow: hidden;
  margin: auto;
  border: 0;
  padding: 0;
}
header {
  background-color: rgb( 240, 255, 226);
  margin: 0;
  padding: 0;
  min-height: 0;/*-- is this for squre nav buttons?--*/
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.brand img {
  margin: 0;
  border: 0;
  padding: 0;
}
.brand a {
  float: left;
  background-color: transparent;
  border: 0;
  text-transform: uppercase;
}
.brand a:hover {
  border: 0;
}
.brand figure {
  margin: 6px 0 0 0;
  border: 0;
  padding: 0;
} 
.brand figcaption {
  margin: 0 0 4px 0;
  border: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}
nav {
  float: right;
  margin: 8px 0 8px 0;
  border: 0;
  padding: 0;
  display: none;
}
ul {
  list-style: none;
  display: inline-flex;
  border: 0;
  padding: 0;
  text-align: center;
}
li {
  margin: 8px 6px 8px 6px;
  text-align: center;
}
li a {
  display: block;
  padding: 7px 16px 7px 16px;
  /*--letter-spacing: 5px;--*/
}
li a:hover {
  border: rgb( 34, 169, 191) 2px solid;
  background: rgb(255, 201, 216);
  color: rgb( 154, 0, 87);
  /*--border-radius: 10px;--*/ 
}
a {
  border-radius: 20px;
  text-transform: uppercase;

}
header a {
  color: rgb( 204, 38, 102);
  background: rgb( 255, 250, 250);
  border: rgb( 237, 8, 116) 2px dashed;
}
span {
  /*--font-weight: bold;--*/
  letter-spacing: 1.5px;
}
.current a {
  color: rgb( 240, 0, 0);
}

label { font-size: 15px}

#toggle {
  display: none;
  position: absolute;
  cursor: pointer;
  /*--transition-delay: 2s;--*/
}
#toggle + label:hover {
  border: rgb(37, 156, 215) 2px solid;
  background: rgb(255, 201, 216);
}
#toggle + label {
  position: relative;
  display: block;
  float: right;
  cursor: pointer;
  margin: 12px 8px 8px 2px;
  padding: 7px 10px 8px 11px;
  background: rgb(255, 250, 250);
  border: rgb( 254, 72, 170) 2px dashed;
  border-radius: 20px;
  color: rgb(224, 58, 122);
  /*--font-weight: BOLD;--*/
  text-align: center;
}

#toggle:checked ~ nav { display: inline-flex; }
#toggle + label::after { content: 'MENU  \2630   \1F50D';}
#toggle:checked + label::after { content: 'MENU \274C';}
#toggle:checked + label { background: rgb(255, 201, 216);}

main {
   background: rgb(212, 237, 208);

}
.button_1 {
  margin: 16px 0 30px 0;
  background: rgb( 245, 245, 245);
  border: rgb( 120, 120, 120) 1px dashed;
  /*--border-top:rgb( 255, 195, 0) 3px solid;
  border-left:rgb( 0, 10, 0) 3px solid;
  border-right:rgb( 255,195, 0) 3px solid;
  border-bottom:rgb( 0, 10, 0) 3px solid;--*/
  border-radius: 34px;
  padding: 10px 22px 9px 22px;
  /*--color: rgb(255, 195, 0);--*/
  text-transform: none;
  text-align: center;
  font-size: 32px;
  cursor: pointer;
}
.arrow {
  font-size: 32px;
  color: rgb( 255, 195, 0);
}
.button_1:hover {
  border: rgb(255, 0, 0) 1px dashed;
  color: rgb(235, 0, 0);
}

.image1 {
  padding:  14px 0 18px 0;
  float: right;
  border-radius: 10px;

}
figcaption {
  padding: 4px;
  text-align: center;
  font-size: 16px;
}
footer {
  background-color: rgb( 238, 89, 153);
  border-top: rgb( 255, 139, 203 ) 2px solid;
 
  text-align: center;
}
footer a {
  color: rgb(255, 255, 255);
  font-size: 12px;
  background: rgb( 214, 32, 130);
  border: rgb( 255, 197, 255) 2px dashed;
}
footer nav {
  display: inline-block;
  width: 100%;
}
footer .container {
  background: rgb( 212, 237, 208);
  width: 100%;
  border-top: rgb( 255, 139, 203) 2px solid;
}
footer p {
  padding: 10px 6px 6px 6px;
  font-size: 15px;
  color: rgb( 188, 39, 103 );
  letter-spacing: 1.5px;
}

/*----Media Query---Media Query---Media Query---*/
@media screen and (min-width: 100px) and (max-width: 550px) {

.brand figure { margin: 6px 0 0 1px; }
#toggle + label { margin: 12px 2px 3px 0px; padding: 7px 9px 8px 10px; }
#toggle + label::after {
  /*--font-size: 16px;--*/
  /*--padding: 3px;--*/
  content:'\2630';}

nav { width: 100%; }

nav ul {
  margin: 0;
  width: 100%;
  display: block; 
  text-align: center; 
}

/*--li a { padding: 9px 15px 8px 15px;}--*/

.image1 { 
  display: block; 
  width: 100%;
}
h1  { font-size: 24px; }

h2  {  font-size: 22px; }

h3  {  font-size: 14px; }



.button_1 {
  padding: 9px 20px 13px 20px;
  font-size: 24px;
}
.arrow {  font-size: 24px; }

}
@media screen and (min-width: 550px) and (max-width: 1050px) {

.container { width: 96% }

header  {
  margin: 0;
  padding: 0;
  min-height: 0;/*-- is this for squre nav buttons?--*/
  }

.image1 { 
  display: block;
  width: 50%;
  margin: 0 0 0 14px; 
}

h1 {font-size: 30px; }

h2 {font-size: 22px;}

footer nav { 
  max-width: 100%; }
}

@media screen and (min-width: 1050px) and (max-width: 1500px) {

.container { width: 90%; }

#toggle + label { display: none; }
nav { display: inline }
li:last-child { margin-right: 12px; }

h1 { font-size: 40px; }

h2 { font-size: 28px; }

p { font-size: 22px; }

.image1 { 
  display: block;
  /*--width: 50%;--*/
  margin: 0 0 0 14px; 
}

}
@media only screen and (min-width: 1500px) and (max-width: 1920px) {

.container { width: 80%; }

#toggle + label { display: none; }
header nav { display: inline}

h1 { font-size: 54px; }

h2 { font-size: 34px; }

p { font-size: 24px; }

.image1 { 
  display: block;
  /*--width: 50%;--*/
  margin: 0 0 0 14px; 
}
}

@media screen and (min-width: 1920px) and (max-width: 3840px) {
  
.container { width: 60%; }
#toggle + label { display: none; }

header nav { display: inline}

h1 { font-size: 54px; }

h2 { font-size: 34px; }

p { font-size: 24px; }

.image1 { 
  display: block;
  /*--width: 50%;--*/
  margin: 0 0 0 14px; 
}
}