/* ##################################################### */
/* ####################### Reset ####################### */
/* ##################################################### */
:root {
  --imagenet-primary: #fe7f50;
  --imagenet-light-gray: #dee2e6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
}

/* ##################################################### */
/* ################## Main Block Class ################## */
/* ##################################################### */
.imagenet-main {
  display: grid;
  align-content: space-between;
  height: 100vh;
  background-image: url(../img/backgrounds/background.jpg);
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

/* ##################################################### */
/* ################### Header Class #################### */
/* ##################################################### */
.imagenet-header {
  display: grid;
  justify-items: center;
  padding-block: 50px;
  border: solid var(--imagenet-light-gray);
  border-width: 1px 0;
  background-color: white;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}
.imagenet-header__logo {
  max-width: 450px;
}

/* ##################################################### */
/* ################### Body Class #################### */
/* ##################################################### */
.imagenet-body {
  display: grid;
  justify-items: center;
  text-align: center;
}
.imagenet-body__title {
  font-size: 50px;
  color: var(--imagenet-primary);
}
.imagenet-body__subtitle {
  text-transform: uppercase;
  font-size: 25px;
}

/* ##################################################### */
/* ################### Footer Class #################### */
/* ##################################################### */
.imagenet-footer {
  height: 20px;
  background-color: var(--imagenet-primary);
}