/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* MEDIA QUERIES
/*******************************************/

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

/******************************************
/* MQ LAYOUT
/*******************************************/

body{
  color: rgb(245, 245, 220);
  background-color: black;
}
h1{
  text-align: center;
  font-size: larger;
}
button{
  padding: auto;
  margin: auto;
  font-size: 1.3rem;
  background-color: rgb(245, 245, 220);
  display: flex;
  justify-content: center;
  color: rgb(0, 0, 0);
  border-radius: 30%;

}
img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: 5px;
  margin: auto;
}

div.images-and-videos-container{
  display: block;
  padding: 5px;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  /* border: 2px solid;
  border-color: blue; */
}
.main-content-container{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
  /* border: 2px solid;
  border-color: green; */
  margin: auto;
  padding: auto;
}
div.explanation-text-container{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
  /* border: 2px solid;
  border-color: green; */
  margin: auto;
  padding: auto;
}
div.date-and-button-container{
  display: flex;
  justify-content: center;
}

/******************************************
/* MQ ADDITIONAL STYLES
/*******************************************/
input{
  margin: auto;
  background-color: rgb(245, 245, 220);
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  border-radius: 12px;

}
footer{
  text-align: center;
  font-size: 1.2rem;
  color: rgb(245, 245, 220);
}

}

/******************************************
/* LAYOUT
/*******************************************/

body{
  color: rgb(245, 245, 220);
  background-color: black;
}
h1{
  text-align: center;
  font-size: larger;
}
button{
  padding: auto;
  margin: auto;
  font-size: 1.3rem;
  background-color: rgb(245, 245, 220);
  display: flex;
  justify-content: center;
  color: rgb(0, 0, 0);
  border-radius: 12px;

}
button:hover{
  background-color: rgb(251, 255, 0);
}

button:active{
  background-color: #3eeb09;
  box-shadow: 0 3px #666;
  transform: translateY(4px);
}

img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: 5px;
  margin: auto;
}

div.images-and-videos-container{
  display: block;
  padding: 5px;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  /* border: 2px solid;
  border-color: blue; */
}
.main-content-container{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
  /* border: 2px solid;
  border-color: green; */
  margin: auto;
  padding: auto;
}
div.explanation-text-container{
  text-align: center;
  max-width: 100%;
  max-height: 100%;
  /* border: 2px solid;
  border-color: green; */
  margin: auto;
  padding: auto;
}
div.date-and-button-container{
  display: flex;
  justify-content: center;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/
input{
  margin: auto;
  background-color: rgb(245, 245, 220);
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  border-radius: 12px;
}
input:hover{
  background-color:rgb(251, 255, 0);
}

footer{
  text-align: center;
  font-size: 1.2rem;
  color: rgb(245, 245, 220);
}