body {
    background-attachment: fixed;
    background-size: 35%;
    background-color: rgb(59, 35, 26);
}

main {
    background-color: rgba(255, 215, 86, 1);
    display: grid;
    grid-template-rows: repeat(6,auto);
    margin: 5%;
    padding:1.44rem;
    border-radius: 25px;
}


header, nav{
    position: relative;
    place-items: center;
    grid-column: span 1 / span 1;
}

header {
    grid-row-start: 1; 
}

nav {
    padding: 10px;
    grid-row-start: 2; 
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: repeat(3,auto);
    gap: 5%;
    margin-left: 7%;
    margin-right: 7%;
}

footer {
    grid-row-start: 6; 
    padding: 10px;
    background-color: rgba(96, 48, 4, 1);
    border-radius: 25px;
    color:rgba(255, 217, 152, 1);
}

p, h3, li, a {
     font-family: "Fredoka", sans-serif;
}

h1 {
   font-family: "Jersey 10 Charted", sans-serif;
  font-weight: 400;
  font-size: 55pt;
  font-style: normal;

}

/*buttons*/
a {
  border: double rgba(96, 48, 4, 1);
  border-width: 5px;

  width: 105%;
  border-radius: 10px;
  text-decoration: none;
  padding: 3%;
  margin: 5%;
  text-align: center;
  font-size: 20pt;
  display: inline-block;
  -webkit-text-stroke: 2px rgba(96, 48, 4, 1);
}

a:nth-of-type(1) {
    background-color: rgba(255, 215, 86, 1);
    color: rgba(255, 215, 86, 1);
}

a:nth-of-type(2) {
    background-color: rgba(169, 255, 186, 1);
    color: rgba(169, 255, 186, 1);
}

a:nth-of-type(3) {
    background-color: rgba(215, 255, 146, 1);
    color: rgba(215, 255, 146, 1);
}

a:nth-of-type(4) {
    background-color: rgba(152, 248, 255, 1);
    color: rgba(152, 248, 255, 1);
}

a:nth-of-type(5) {
    background-color: rgba(255, 216, 202, 1);
    color: rgba(255, 216, 202, 1);
}

a:nth-of-type(6) {
    background-color: rgba(255, 191, 126, 1);
    color: rgba(255, 191, 126, 1);
}

a:hover{
    transform: scale(1.25);
    transition: 200ms ease-in;
}


/* text & img */

#text {
    border-radius: 15px 50px;
    grid-row-start: 3; 
}

img{
    max-width: 100%;
    border-radius: 50px 15px;
}

section {
    display: grid;
    place-items: center;
}

p, ul {
    background-color: rgba(255, 255, 255, 0.50);
    padding: 2.5%;
    border-radius: 25px;
}

/* OFF gallery my pictures
.mygallery{
 grid-row-start: 4;
 display: grid;
      grid-template-columns: auto;
   grid-template-rows: auto;
 background-color: rgba(255, 255, 255, 0.50);
 border-radius: 25px;
 margin-bottom: 5%;
}

.mygallery img {
    max-width: 100%;
    object-position: center;
    border-radius: 0px;
}

/*animated captions*/ /*
.mygallery figure {
  display: grid;
  grid-template-areas: "card";
  place-items: end;
  border-radius: 0.5rem;
  overflow: hidden;
}

.mygallery figure > * {
  grid-area: card;
}

.mygallery figcaption {
  transform: translateY(100%);
  transition: transform 500ms ease-in;
  padding: 0.25em 0.5em;
  border-radius: 4px 0 0 0;
  background-color:rgba(255, 217, 152, 1);
}

.mygallery figure:hover figcaption {
  transform: translateY(0);
}

.mygallery p {
    grid-row-start: 3;
    grid-column: span 2/ span 2;
    margin-left: 2%;
    margin-right: 2%;
} */

/*gallery logo*/
.gallery img {
    max-width: 100%;
    object-position: center;
    border-radius: 10px;
}
  
.gallery {
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: auto;
   background-color: rgba(255, 255, 255, 0.50);
   border-radius: 25px;
}

.gallery p {
    grid-row-start: 2;
    grid-column: span 2/2;
    margin-left: 5%;
    margin-right: 5%;
}

/*animated captions*/
.gallery figure {
  display: grid;
  grid-template-areas: "card";
  place-items: end;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gallery figure > * {
  grid-area: card;
}

.gallery figcaption {
  transform: translateY(100%);
  transition: transform 500ms ease-in;
  padding: 0.25em 0.5em;
  border-radius: 4px 0 0 0;
  background-color:rgba(255, 217, 152, 1);
}

.gallery figure:hover figcaption {
  transform: translateY(0);
}


/*responisve*/

@media screen and (min-width: 800px) {
    
    main {
        grid-template-columns:  /*repeat(3, minmax(0, 1fr))*/ 1fr auto 1fr;
        grid-template-rows: repeat(6,auto);
        gap: 10px;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    
    header {
        grid-column-start: 2;
    }
    nav {
        grid-column: span 3 / span 3;
        grid-row-start: 2;
        grid-column-start: 1;
        grid-template-columns: repeat(6,auto);
        grid-template-rows: 1;

    }

    #text {
        grid-column-start: 2;
        grid-row-start: 3;
        margin-left:15%;
        margin-right: 15%;
    }

/*OFF
    .mygallery {
    grid-column-start: 2;
    grid-row-start: 4;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: repeat(2,auto);
    }
*/
    .gallery {
        grid-column-start: 2;
        grid-row-start: 5;
    }
        
    footer {
        grid-column-start: 2;
        grid-row-start: 6;
    }
    
}