/* 
General css references 

Using grid
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas
https://css-tricks.com/complete-guide-css-grid-layout/ 
 
Making <a> tag look like a button 
https://stackoverflow.com/questions/8357058/how-to-make-an-html-anchor-tag-or-link-look-like-a-button 

*/


body {
  font-family: sans-serif;
  background-color: #f9f9f9;
  margin: 10px;
}

/* Page header */

.page.header {
  justify-self: center;
  grid-area: header;
}

/* Form sections */

.form {
  display: grid;
  gap: 10px;
}

#img_form { /* Inspiration for form styling https://www.scale.at/blog/responsive-form-layout-css-grid */
  grid-template-columns: 90px 300px;
  grid-template-rows: 30px 30px 30px 50px;
}

#comment_form { /* Inspiration for form styling https://www.scale.at/blog/responsive-form-layout-css-grid */
  grid-template-columns: 90px 300px;
  grid-template-rows: 30px 80px 50px;
}

.form.header {
  display: grid;
  grid-template-columns: 220px 100px;
  grid-template-rows: 80px;
}

/* Image display section */


#img_gallery {
  justify-self: center;
  width: 600px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  grid-template-areas:
    "img_display"
    "delete"
    "nav";
}

#img_display {
  grid-area: img_display;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px 40px 400px;
  gap: 8px;
  grid-template-areas:
    "author"
    "title"
    "img";
}

#img_display.minimized {
  display: none;
}

/* Comment section */

.container.comment {
  width: 580px;
  min-height: 78px;
  display: grid;
  grid-template-columns: 500px 70px;
  grid-template-rows: 30px auto;
  grid-template-areas: 
    "comment_author delete"
    "comment_content delete";
  gap: 2px;
  border: 1px solid #000;
}

/* Navigation section */

.container.nav {
  padding: 8px;
  gap: 30px;
  justify-self: center;
  grid-area: nav;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container.nav.minimized {
  display: none;
}

/* Buttons and size definitions (used for buttons) */

.btn {
  justify-self: center;
  align-self:center;
}

.btn.delete {
  justify-self: center;
  grid-area: delete;
  background: red;
}

.signout { /* https://stackoverflow.com/questions/8357058/how-to-make-an-html-anchor-tag-or-link-look-like-a-button  */
  display: block;
  width: 80px;
  height:40px;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  color: black;
  justify-self: center;
  grid-area: delete;
  background: red;
  border: 1px solid #000;
}

.btn.minimize {
  display: block;
  background-color: green;
}

.btn.minimize.minimized {
  background-color: red;
}

.small_square {
  width: 70px;
  height: 70px;
}

.small_rectangle {
  width: 100px;
  height: 40px;
}

.large_rectangle {
  width: 400px;
  height: 80px;
}

/* Text styles */

.image.title {
  font-weight: bold;
  font-size: xx-large;
  grid-area: title;
}

.image.author {
  font-weight: bold;
  font-size: xx-large;
  grid-area: author;
}

.image.img {
  justify-self: center;
  grid-area: img;
  border: 1px solid #000;
  max-height: 400px;
  width: auto;
}

.comment {
  align-self: left;
  justify-self: left;
  padding: 4px;
}
.comment.author {
  font-weight: bold;
  font-size: x-large;
}

.comment.content {
  font-size: large;
  overflow-wrap: break-word; /* Making text stay within its assigned grid area https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap */
}

/* Other style */

.minimized {
  display: none; /* https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page */
}

.center {
  justify-self: center;
}