:root {
  --bg-color: rgb(30, 30, 30);
  --bg-contrast: #111111;
  --primary-highlight-text: rgb(87, 210, 179);
  --secondary-highlight-text: magenta;
  --primary-text: #dddddd;
  --contrast-text: #eeeeee;
}

html {
  font-size: 100%;
}

body {
  font-family: "Merriweather", serif;
  color: var(--primary-text);
  opacity: 0.9;
  background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
header,
footer,
table,
nav,
#hero {
  font-family: "Lato", sans-serif;
}

#technologies h3,
#services h3 {
  padding-top: 1.5rem;
}

img {
  max-width: 100%;
}

a {
  color: white;
  text-decoration-thickness: 0.1rem;
}

a:hover {
  color: var(--primary-highlight-text);
}

section {
  margin-bottom: 1.5rem;
}

h2 {
  margin-top: 1.5rem;
}

h2,
h3 {
  color: white;
}

hr {
  border-color: var(--primary-highlight-text);
}

button {
  font-size: 1.05rem;
  border: none;
  margin-right: 0.5rem;
  border-radius: 3px;
  padding: 0.4rem;
  background-color: black;
  border: 1px solid white;
  color: var(--primary-highlight-text);
}

button:hover {
  transition: 0.1s;
  background-color: #333333;
  border: 1px solid #666666;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero {
  background-image: url("../img/cr_delta.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-block {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .hero-block {
    flex-direction: row;
  }
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

header > a {
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0 2rem;
  text-decoration: none;
}

header > a:hover {
  color: var(--primary-highlight-text);
  /*color: rgb(234, 169, 115); */
}

#hero-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

#hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 12rem;
  padding: 2rem;
  text-align: center;
}

#hero-name {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-highlight-text);
}

.job {
  color: white;
  font-size: 1.1rem;
  font-family: "Merriweather", serif;
}

#about-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#headshot {
  flex: 0 0 50%;
  padding: 0 2rem;
}

#about-text {
  flex: 0 0 50%;
  padding-left: 0.5rem;
}

@media (min-width: 768px) {
  #about-me {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  #about-text {
    flex: 0 0 40%;
    padding-left: 0;
  }

  #headshot {
    flex: 0 0 35%;
    padding-right: 1rem;
  }
}

#services,
#technologies,
#portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.panel {
  width: 96%;
}

@media (min-width: 768px) {
  .panel {
    width: 90%;
  }
}

@media (min-width: 1024px) {
  .panel {
    width: 66%;
  }
}

@media (min-width: 768px) {
  .port-panel {
    width: 70rem;
    max-width: 98%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

article {
  background-color: var(--bg-contrast);
  color: var(--contrast-text);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.port-img {
  display: none;
}

@media (min-width: 1024px) {
  .port-wide {
    display: flex;
  }
  .port-img {
    display: inline;
    max-width: 30%;
  }
}

.port-text {
  padding: 1rem;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(234, 169, 115);
  background-image: url("../img/salton.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 75vh;
}

#footer-panel {
  color: white;
  padding-left: 1rem;
}

@media (min-width: 768px) {
  #footer-panel {
    width: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 8rem;
  }

  #footer-contact {
    font-size: 1.25rem;
    max-width: 40rem;
  }
}

#footer-contact h3 {
  color: white;
}

#footer-contact i {
  padding-right: 1rem;
  font-size: 1.8rem;
}

#footer-contact h3,
#footer-contact div {
  padding-bottom: 1rem;
}

#copyright {
  color: #aaaaaa;
  width: 100%;
  padding-left: 0.1rem;
  padding-bottom: 0.1rem;
  background: rgba(0, 0, 0, 0.3);
}

#copyright a {
  color: #aaaaaa;
}

@media (min-width: 768px) {
  #copyright {
    background: rgba(0, 0, 0, 0);
  }
}