/* #region general */
body {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
}

/* #endregion general */

/* #region header */
header {
  width: 85%;
  max-width: 1400px;
  margin: 2em auto;
}

h1 {
  text-align: center;
}

/* #endregion header */

/* #region main (element only) */

main {
  width: 85%;
  max-width: 1400px;
  margin: 2em auto;
  display: flex;
  flex-direction: column;
}

/* #endregion main (element only) */

/* #region file upload form */

form {
  margin-bottom: 2em;
  align-self: center;
}

.file-input-label {
  padding: 0.5em 1em;
  background: lightblue;
  color: blue;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
}

/* #endregion file upload form */

/* #region process div - includes user-img, resize-form, and result-el */
.process {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
}

/* A div with the original image uploaded by the user */
.user-img {
  width: 20%;
}

/* of the user image and the new, produced image */
figcaption {
  margin-top: 1em;
  text-align: center;
}

/* The dimensions (width, height) of the user image */
.orig-sizes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The resize form the user should fill, for resizing his image */
.resize-form {
  display: flex;
  flex-direction: column;
}

h2 {
  text-align: center;
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 1em;
}

/* A div with a header, methods radio buttons, and aspect ratio checkbox */
.resize-method {
  margin: 0 auto;
  padding: 0;
}

/* Methods radio buttons */
.resize-methods {
  display: flex;
  justify-content: space-evenly;
  gap: 3em;
}

/* Input fields of type number */
input[type="number"] {
  border-style: none none solid none;
  width: 8em;
}

/* Hover and focus states for enabled input fields of type number */
input[type="number"]:not([disabled]):hover,
input[type="number"]:not([disabled]):focus {
  background-color: lightblue;
  color: darkgreen;
}

/* A div element that contains the resize button element */
.resize-button-el {
  align-self: center;
  margin-top: 1em;
}

/* The resize button */
.resize-button {
  padding: 0.5em 1em;
  background: lightblue;
  color: blue;
  border: 1px solid black;
  border-radius: 10px;
  cursor: auto;
  opacity: 0.2;
}

/* The resize button - once it is enabled */
.resize-button:not([disabled]) {
  cursor: pointer;
  opacity: 1;
}

/* The div that contains the new, resized image */
.result-el {
  width: 20%;
  display: flex;
  flex-direction: column;
}

/* A download button for downloading the resized image */
.download-btn {
  background: lightblue;
  color: blue;
  text-align: center;
  padding: 1em 0.5em;
  border-radius: 10px;
  border: 1px solid black;
}

/* #endregion process */

/* General classes for hiding content and implying accent color */
.hide {
  display: none;
}

.not-visible {
  visibility: hidden;
}

.accent-color {
  color: blue;
  font-weight: 700;
}

/* General classes - end */

/* #region footer */
footer p {
  text-align: center;
}

/* #region media queries */
@media (max-width: 880px) {
  /* Show the process div as a block, instead of flex */
  .process {
    display: block;
  }

  /* Center the original image, and set the width to 70% */
  .user-img {
    margin: 0 auto;
    width: 70%;
  }

  /* Center the result div, and set the width to 70% */
  .result-el {
    margin: 0 auto;
    width: 70%;
  }
}

/* #endregion media queries */