body {
  margin: 0;
  padding: 0;
}

nav {
  padding: 5px 20px;
}

nav a {
  color: #000;
  text-decoration: none;
}

nav span:not(.brand):hover {
  border-color: #000;
}

nav span:not(.brand) {
  margin-right: 12px;
  border-bottom: 1px solid #fff;
  transition: border-color 0.5s ease;
}

nav .brand {
  text-decoration: none;
}

.brand {
  font-family: "Alegreya", serif;
  font-size: 50px;
  margin-right: 20px;
}

.hero {
  font-family: "Alegreya Sans SC", sans-serif;
  width: 1130px;
  margin: 240px auto;
  text-align: center;
}

.hero-small-text {
  letter-spacing: 98px;
  font-size: 24px;
  font-weight: 900;
  padding-left: 128px;
}

.hero-large-text {
  margin-top: -38px;
  letter-spacing: -16px;
  font-size: 200px;
  font-weight: 100;
}

#photos {
  margin: 0 20%;
}

#photos .row {
  font-size: 0;
  display: flex;
}

.row img {
  width: 100%;
  height: auto;
}

.photo-container {
  position: relative;
}

.photo-title-container {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: 0.5s ease;
}

.photo-container:hover .photo-title-container {
  opacity: 1;
}

.photo-title {
  position: relative;
  font-size: 2vw;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Source Sans Pro", sans-serif;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#about {
  font-family: "Alegreya", serif;
  font-size: 20px;
  text-align: justify;
  margin: 0 auto;
  width: 33.333%;
  margin-top: 240px;
  margin-bottom: 240px;
}

.gradient-space {
  height: 480px;
  width: 100%;
  background: linear-gradient(#fff, #000);
}

#contact {
  background-color: #000;
  padding: 240px 0;
  display: flex;
}

#contact label {
  color: #fff;
}

form {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* justify-content: center;
  align-items: center; */
}

.form-spacer {
  flex: 1;
}

.inputs {
  display: flex;
  flex-direction: column;
  align-items: end;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 100;
  font-size: 16px;
  color: #000;
}
::-moz-placeholder {
  /* Firefox 19+ */
  font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 100;
  font-size: 16px;
  color: #000;
}
:-ms-input-placeholder {
  /* IE 10+ */
  font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 100;
  font-size: 16px;
  color: #000;
}
:-moz-placeholder {
  /* Firefox 18- */
  font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 100;
  font-size: 16px;
  color: #000;
}

input {
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: hidden;
  justify-content: space-between;
  width: 33.333%;
  align-self: flex-end;
  height: 28px;
  padding-left: 4px;
}

#name {
  margin-bottom: 24px;
}

textarea {
  margin: 24px 0;
  resize: none;
  display: block;
  padding-left: 4px;
}

.send-button {
  background-color: #000;
  border: 2px solid #fff;
  color: #fff;
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: 24px;
  width: 33.333%;
  align-self: center;
  transition: 0.5s ease;
}

.send-button:hover {
  background-color: #fff;
  /* border: 2px solid #fff; */
  color: #000;
  font-family: "Alegreya Sans SC", sans-serif;
  font-size: 24px;
  width: 33.333%;
  align-self: center;
}