/* #region Box Sizing */
html {
  font-size: 100%;
  box-sizing: border-box;
  height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* #endregion Box Sizing */
/* #region Setup HTML Defaults */
body {
  background-repeat: repeat;
  background: url("../images/background.png");
  color: #777;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
  height: 100vh;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

::-moz-selection {
  background: #53aeaa;
  color: white;
}

::selection {
  background: #53aeaa;
  color: white;
}

::-moz-placeholder,
::-webkit-input-placeholder {
  color: #bfbfbf;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button {
  display: none;
}

img {
  max-width: 100%;
  width: auto;
}

p {
  margin: 0 0 1rem;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

a:focus {
  outline: 0.125rem dotted #4aaaa5;
  outline-offset: 0.125rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

a {
  color: #4aaaa5;
  text-decoration: none;
}

a:hover {
  color: #3b8884;
  cursor: pointer;
  text-decoration: underline;
}

/* #endregion Setup HTML Defaults */
/* #region .site */
.site {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: auto 1fr 4rem;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* #endregion .site */
/* #region .site-header */
.site-header {
  background-color: #fff;
  border-bottom: 0.0625rem solid #ccc;
  box-shadow: 0 0.625rem 0.375rem -0.375rem #777;
  display: grid;
  margin-bottom: 2rem;
}

.site-header__wrap {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  height: 6rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 60rem;
}

.site-header__branding {
  align-self: end;
}

.site-header__title {
  font-kerning: normal;
  font-weight: 600;
  letter-spacing: 0.09375rem;
}

.site-header__title-link {
  background-color: #4aaaa5;
  color: white;
  padding: 1rem;
}

/* #endregion .site-header */
/* #region .site-content */
.site-content {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: 60rem;
}

/* #endregion .site-content */
/* #region .site-main */
.site-main {
  background-color: #fff;
  border: 0.0625rem solid #ddd;
  box-shadow: 0 0.625rem 0.375rem -0.375rem rgba(119, 119, 119, 0.6), 0 0.125rem 0.25rem 0 rgba(119, 119, 119, 0.6);
  padding: 2rem;
}

/* #endregion .site-main */
/* #region .site-footer */
.site-footer {
  background-color: #666;
  border-top: 0.5rem solid #4aaaa5;
}

.site-footer__wrap {
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  width: 60rem;
}

.site-footer__credit {
  color: #ccc;
  margin: 0;
  text-align: center;
}

/* #endregion .site-footer */
/* #region .article */
.article__image {
  float: left;
  margin-right: 1rem;
}

.article__header {
  border-bottom: 0.125rem solid #ddd;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.article__title {
  color: #4aaaa5;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-kerning: normal;
  font-size: 2rem;
  letter-spacing: 0.0625rem;
}

.article__content {
  font-weight: normal;
  line-height: 2;
}

/* #endregion .article */
/* #region .menu */
.menu {
  align-self: center;
  justify-self: end;
}

.menu__items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  border-right: 0.0625rem solid #d0d0d0;
  display: inline-block;
  padding: 0 1rem;
}

.menu__item:last-child {
  border-right: none;
}

.menu__link {
  color: #777;
  display: block;
  font-size: 0.8rem;
}

/* #endregion .menu */
/* #region .form */
.form__control-group {
  margin-bottom: 1rem;
}

.form__label, .form__input, .form__textarea {
  display: block;
  margin: 0;
  padding: 0;
}

.form__input, .form__textarea {
  border: 0.0625rem solid #ddd;
  color: #777;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem;
  width: 100%;
}

.form__input:focus, .form__textarea:focus {
  background: rgba(119, 119, 119, 0.1);
  border-left: 0.1875rem solid #4aaaa5;
  outline: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.form__input {
  height: 2rem;
}

.form__input::placeholder {
  color: #bfbfbf;
  font-size: 0.8rem;
}

.form__textarea {
  resize: none;
}

/* #endregion .form */
/* #region .button */
.button {
  background-image: linear-gradient(#ddd, #ccc);
  border: 0.0625rem solid #ccc;
  color: #666;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 2rem;
}

.button--rounded {
  border-radius: 0.1875rem;
}

.button--primary {
  background-color: #4aaaa5;
  background-image: none;
  border: 0.0625rem solid #4aaaa5;
  color: white;
}

/* #endregion .button */
/* #region .portfolio */
.portfolio {
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: 17.25rem;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.portfolio__link {
  box-shadow: 0 0.625rem 0.375rem -0.375rem rgba(119, 119, 119, 0.6);
  display: block;
  margin: 0;
  padding: 0;
}

.portfolio__link:focus {
  outline: none;
}

.portfolio__link:hover {
  text-decoration: none;
}

.portfolio__item {
  margin: 0;
  padding: 0;
}

.portfolio__image {
  margin: 0;
  padding: 0;
}

.portfolio__title {
  background-color: rgba(74, 170, 165, 0.8);
  color: white;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-kerning: normal;
  font-weight: normal;
  letter-spacing: 0.04375rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  position: relative;
  text-align: center;
  top: -3.5rem;
}

/* #endregion .portfolio */

/*# sourceMappingURL=style.css.map */