/* for screens up to 480px */
@media(max-width: 480px) {
h1 {
  font-size: 0.9em;
   /* margin-left: 0.4em; */
}

h3 {
  font-size: 1.2em;
}

h4 {
  /* margin-left: 15%; */
  text-align: center;
  font-size: 1.1em;
}

h5 {
  font-size: 0.9em;
}

.myPet {
  width: auto;
  height: 3em;
}

.titleMenu h3 {
  margin-left: 0.1em;
  margin-top: 1em;
  font-size: 0.7em;
}

.titleMenu h1 {
  margin-left: 0.5em;
  margin-top: 0.7em;
}

/*menu on the left side, collumn*/
.navMenu {
  padding: 0.2em;
  /* width: 98%; */
  width: 3em;
  border-radius: 0.5em;
}

.navMenu ul {
  font-size: 0.8em;

}

.dogPhoto {
  width: 8em;
  height: auto;
}

.dogPic {
  justify-content: space-around;
  display: grid;
  grid-template-columns: auto;
  flex-direction: column-reverse;
  gap: 1.5em;
  margin: 1em;
  justify-content: center;
}

.dogAbout,
.dogGuess {
  font-size: 0.7em;
  padding: 1em;
  width: 40%;
  height: auto;
  justify-content: center;
  border-radius: 0.5em;
  margin-left: 30%;
  font-style: italic;
}

.dogPhoto1 {
  width: 8em;
  height: auto;
  justify-items: center;
  margin-left: 8%;
  box-shadow: 0 0 0.8em 0.3em #8253ce;
  border: solid rgb(227, 221, 238) 3px;
  padding: 0.3em;
  border-radius: 0.5em; 
}

#but_submit {
  padding: 0.3em;
  font-size: 0.7em;
  margin-left: 35%;
}

#linkGues {
  font-size: 0.8em;
}

footer {
  font-size: 0.8em;
  margin-top: 0.9em;
  padding: 0.8em;
}
}

/* small, mobile, (481px-768px) */
@media (min-width: 480px) {
h1 {
  font-size: 1.4em;
}

h3 {
  font-size: 1.3em;
}

h4 {
  margin-left: 30%;
  font-size: 1.5em;
}

h5 {
  font-size: 0.7em;
}

.myPet {
  width: auto;
  height: 4em;
}

.titleMenu h3 {
  margin-left: 0.3em;
  margin-top: 1.5em;
  /* font-size: 0.9em; */
}

.titleMenu h1 {
  margin-left: 1.3em;
  margin-top: 1.5em;
}

.navMenu {
  /* margin-left: 28%; */
  padding: 0.2em;
  width: 98%;
  border-radius: 0.4em;
}

.navMenu ul {
  font-size: 1.3em;
  display: flex;
}

.dogPhoto {
  width: 7em;
  height: auto;
}

.dogPic {
  justify-content: space-around;
  display: grid;
  grid-template-columns: auto auto auto;
  flex-direction: column-reverse;
  gap: 1.7em;
  margin: 1em;
  justify-content: center;
}

.dogAbout,
.dogGuess {
  font-size: 1.1em;
  padding: 1em;
  width: 30%;
  
  justify-content: center;
  border-radius: 0.5em;
  margin-left: 30%;
  font-style: italic;
}

.dogPhoto1 {
  width: 5em;
  height: auto;
  
  justify-items: center;
  margin-left: 8%;
  box-shadow: 0 0 0.8em 0.3em #8253ce;
  border: solid rgb(227, 221, 238) 3px;
  padding: 0.3em;
  border-radius: 0.5em; 
}

.dogAbout p {
  font-size: 0.8em;
}

#but_submit {
  padding: 0.3em;
  font-size: 0.7em;
  margin-left: 35%;
}

#linkGues {
  font-size: 0.8em;
}

footer {
  font-size: 1.1em;
  margin-top: 0.9em;
  padding: 0.8em;
}
}

/* tablet/laptop, (769px-1024px) */
@media (min-width: 769px) {
h1 {
  font-size: 1.6em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  margin-left: 30%;
  font-size: 1.8em;
}

h5 {
  font-size: 0.9em;
}

.myPet {
  width: auto;
  height: 5em;
}

.titleMenu h3 {
  margin-left: 0.3em;
  margin-top: 1.5em;
}

.titleMenu h1 {
  margin-left: 4.5em;
  margin-top: 1.5em;
}

.navMenu {
  margin-left: 18%;
  width: 80%;
}

.navMenu ul {
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
}

.dogPhoto {
  width: 10em;
  height: auto;
}

.dogPic {
  justify-content: space-around;
  display: grid;
  grid-template-columns: auto auto auto auto;
  
  flex-direction: column-reverse;
  gap: 1em;
  margin: 1em;
  justify-content: center;
}

.dogAbout,
.dogGuess {
  font-size: 1.4em;
  padding: 1em;
  width: 30%;
  height: auto;
  justify-content: center;
  border-radius: 0.5em;
  margin-left: 30%;
}

.dogPhoto1 {
  width: 8em;
  height: auto;
  justify-items: center;
  margin-left: 8%;
  box-shadow: 0 0 0.8em 0.3em #8253ce;
  border: solid rgb(227, 221, 238) 3px;
  padding: 0.3em;
  border-radius: 0.5em; 
}

.dogAbout p {
  font-size: 0.8em;
}

#but_submit {
  padding: 0.4em;
  font-size: 0.9em;
  margin-left: 35%;
}

#linkGues {
  font-size: 1em;
}

footer {
  font-size: 1.1em;
  margin-top: 0.9em;
  padding: 0.9em;
}
}

/* desctop, (>1025px) */
@media (min-width: 1025px) {

h1 {
  font-size: 2.3em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  margin-left: 30%;
  font-size: 2.2em;
}

h5 {
  font-size: 1em;
}

.myPet {
  width: auto;
  height: 6em;
}

.titleMenu h3 {
  margin-left: 0.3em;
  margin-top: 2em;
}

.titleMenu h1 {
  margin-left: 5em;
  margin-top: 1em;
}

.navMenu {
  margin-left: 28%;
  padding: 0.3em;
  width: 70%;
  
}

.navMenu ul {
  font-size: 1.3em;
  font-weight: bold;
  display: flex;
}

.dogPhoto {
  width: 11em;
  height: auto;
}

.dogPic {
  justify-content: space-around;
  display: grid;
  grid-template-columns: auto auto auto auto;
  flex-direction: column-reverse;
  gap: 2em;
  margin: 0.5em;
  justify-content: center;

}

.dogAbout,
.dogGuess {
  width: 30%;
  height: auto;
  padding: 1.2em;
  justify-content: center;
  font-size: 1.6em;
  border-radius: 0.5em;
  margin-left: 30%;
}

.dogAbout p {
  font-size: 0.9em;
}

#Project_1 li {
    justify-content: center;
}

.dogPhoto1 {
  width: 11em;
  height: auto;
  justify-items: center;
  margin-left: 8%;
  box-shadow: 0 0 0.8em 0.3em #8253ce;
  border: solid rgb(227, 221, 238) 3px;
  padding: 0.3em;
  border-radius: 0.5em; 
}

/* text guess who, section Guess */
#guesstDescribe {
  font-size: 1em;
}

#but_submit {
  padding: 0.4em;
  font-size: 0.9em;
  margin-left: 35%;
}

#linkGues {
  font-size: 1em;
}

footer {
  font-size: 1.2em;
  margin-top: 1em;
  padding: 1em;
}
 
}


/* desctop, (>1200px) */
@media (min-width: 1200px) {
  .dogPic {
      grid-template-columns: auto auto auto auto auto;
  }

  .dogPhoto1 {
      width: 12em;
      height: auto;
      justify-items: center;
      margin-left: 10%;
  }
}