* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: #FFEBB1;
  margin: auto;

}
p {
  font-family: 'Sniglet', cursive;
  color: #C9B686;
  text-align: justify;
  font-size: 27px;
}
h1{
  font-family: 'Arvo', serif;
  color: #C9B686;
  text-align: justify;
  font-size: 44px;
}
/*section{
  margin: auto;
  padding: auto;
  float: auto;
}*/
h2{
  font-family: 'Sniglet', cursive;
  color: #C9B686;
  text-align: center;
  font-size: 27px;
}

h3{
  margin-top: 0px;
  margin-bottom: 50px;
  text-align: center;
  font-family: sans-serif;
  font-size: 8em;


  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
               -2px 2px #000000,
               -4px 4px #ef3550,
               -6px 6px #f48fb1,
               -8px 8px #7e57c2,
               -10px 10px #2196f3,
               -12px 12px #26c6da,
               -14px 14px #43a047
              ;
}

nav{
  text-align: left;
  font-size: 24px;
  font-family: 'Sniglet', cursive;
  color: #00176B;
  /*padding: 10px 0;*/
  background-color:  #C9B686;
  position: fixed;
  width: 100%;

  /*border: 100px;
  border-color: #00176B;                    add border + rounded edges*/
/*  border: #00176B 2px solid;*/
}
nav ul,li {
  display: inline-block;
  list-style-type: square;
  padding-left: 15px;
  padding-right: 15px;
  margin: auto;
}
.nav a{
  color: white;
  padding: 16px;
  text-decoration: none;
  display: block;
}
.nav a:hover{
  background-color: #ddd;
  color: black;
}

.topimg{
  width: 100%;
  object-fit:contain;
  margin: auto;
}
.what{
  width: 100%;
  border:  #C9B686 2px solid;

}
.how{
  width: 100%;
  border:  #C9B686 2px solid;

}

.topimg {
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}


/*.container {
  max-width: auto;
  margin: 100px auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
  /*gap: 10px;

  /* align-items: end;
  justify-content: end; */

  /* column-gap: 10px;
  row-gap: 10px; */
  /* grid-auto-rows: minmax(200px, auto); */
  /* grid-template-rows: repeat(3, 1fr);
}
/*.picLeft{
  grid-row: 1 / 3;
}
.wordsRight{
  grid-row: 3/3;
} */

.container{
  display: grid;
  grid-template-areas:
    'picLeft wordsRight wordsRight'
    'wordsLeft wordsLeft picRight';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}
.picLeft{
  grid-area: picLeft;
  margin: 1em;

  padding: 2px;
  /*align-items: float;*/

}
.wordsRight{
  grid-area: wordsRight;
  margin: 2em;
}
.picRight{
  grid-area: picRight;
  margin: 1em;

  padding: 2px;
  align-items: float;
}
.wordsLeft{
  grid-area: wordsLeft;
  margin: 2em;
}


footer{
  font-family: 'Arvo', serif;
  color: #C9B686;
  text-align: right;
  margin: auto;
  padding: 8px;
}

.line{
  max-width: 960px;
margin: 100px auto;
padding: 10px;
display: grid;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.item{
 width: 50px;
 height: 50px;
}



#s1 h2{
  font-family: 'Sniglet', cursive;
  color: #C9B686;
  text-align: center;
  font-size: 27px;
}

#s1 h1{
  text-align: center;
}
#s1 p{
  text-align: center;
}

#s2 h1{
  text-align: center;
}
#s2 p{
  text-align: center;
}
#s1 h2{
  font-family: 'Sniglet', cursive;
  color: #C9B686;
  text-align: center;
  font-size: 27px;
}

.attcon {
  display: flex;
  /*grid-template-areas:
    'a b c'
    'd e';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;*/
}
/*.at1{
  height:  100px;
}
.at2{
  height: 100px;
}
.at3{
  height: 100px;
}
.at4{
  height: 100px;
}
.at5{
  height: 100px;
}*/
img {
  width: 100%;
  height: auto;
}

.rarcon{
  display: flex;
}