* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
  color: #1a1a1a;
}
/* sets the body height of the browser, so that backgrounds and div heights work correctly. Color and background will almost certainly be altered; they are just placeholders */

body {
  text-rendering: optimizeLegibility;
  background: rgb(84, 122, 130);
  background: linear-gradient(
    180deg,
    rgba(84, 122, 130, 1) 0%,
    rgba(62, 172, 168, 1) 100%
  );
}
/* sets the base font size for the document; turns on kerning pairs and ligatures */

body,
ul,
ol,
dl {
  margin: 0;
}
article,
aside,
audio,
footer,
header,
nav,
section,
video {
  display: block;
}

/* ensures that older browsers will display HTML5 elements correctly */

h1 {
  font-size: 4.5rem;
  font-family: 9;
}
/* begins to set up font sizes relative to base rem – h1 has been used as an example */

p {
  -ms-word-break: break-word;
  word-break: break-word;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-size: var(--font-24);
}
/* sets hyphenation by default on paragraphs */

textarea {
  resize: vertical;
}
/* changes textarea resizing from "both" (UA default) to vertical only */

table {
  border-collapse: collapse;
}
td {
  padding: 0.5rem;
}
/* causes tables to actually look like tables */

img {
  border: none;
  max-width: 100%;
}

:root {
  --bg-grad-upper: #3eaca8;
  --bg-grad-lower: #547a82;
  --pale-bud: #e5eec1;
  --turq-green: #a2d4ab;
  --verdi: #3eaca8;
  --teal-blue: #547a82;
  --dark-liver: #5a5050;
  --hero-color: #cbe7d0;

  --font-bold: 700;
  --font-medium: 500;
  --font-reg: 400;
  --font-light: 300;

  --font-24: 1.5rem;
}
div.content {
  /* width: 80%; */
  margin: auto;
}
.hero {
  color: var(--hero-color);
  max-width: 60rem;
  margin: 10rem auto 1rem auto;
  transition: max-width 0.25s;
}
.hero h1 {
  margin-bottom: 0px;
  font-weight: var(--font-medium);
}
.hero p {
  max-width: 60rem;
  hyphens: none;
  font-weight: var(--font-light);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}
.external-links {
  display: flex;
  justify-content: flex-end;
}
.external-links svg {
  width: 3rem;
  margin: 0.5rem;
  fill: var(--hero-color);
  transition: filter 0.1s;
}
.external-links svg:hover {
  filter: brightness(110%);
}
.caret {
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
}
.caret a {
  text-decoration: none;
  color: var(--hero-color);
  transition: filter 0.1s;
}
.caret a:hover {
  filter: brightness(110%);
}
/* tab styling */

.tab {
  overflow: hidden;
  display: flex;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 1.1rem;
  color: var(--hero-color);
}

/* Change background color of buttons on hover */
.tab button:hover {
  /* background-color: #ddd; */
  border-bottom: 3px solid var(--pale-bud);
}

/* Create an active/current tablink class */
.tab button.active {
  /* background-color: #ccc; */
  color: var(--pale-bud);
  font-weight: var(--font-reg);
  border-bottom: 3px solid var(--pale-bud);
}

/* Style the tab content */
.tabcontent {
  margin-top: 1rem;
  display: none;
  padding: 6px 12px;
  border-top: none;
}
.header {
  display: flex;
  align-items: flex-start;
  color: var(--hero-color);
}
.line {
  width: 15rem;
  border-bottom: 2px solid var(--hero-color);
  margin-top: 3.75rem;
  margin-left: 1rem;
}
.experience {
  display: flex;
  flex-direction: column;
  max-width: 60rem;
  margin: auto;
  margin-top: 5rem;
  color: var(--hero-color);
  /* align-items: center; */
}
.experience h2 {
  font-weight: var(--font-medium);
  font-size: 2.5rem;
}
.ind-exp h3 {
  font-weight: var(--font-bold);
  margin-top: 0px;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}
.ind-exp h4 {
  font-weight: var(--font-light);
  margin-top: 0px;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  text-transform: uppercase;
}
.ind-exp ul li {
  font-weight: var(--font-light);
  margin: 5px;
  font-size: 1.25rem;
  /* width: 70ch; */
  filter: brightness(1.2);
}
.ind-exp span {
  color: var(--pale-bud);
  font-weight: var(--font-reg);
  /* filter: brightness(2); */
}
.example-links {
  display: flex;
  margin-top: 1rem;
  font-size: 1.15rem;
}
.example-links h4 {
  margin: 0px;
  padding: 0px;
}
.example-links a {
  text-decoration: none;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  color: var(--pale-bud);
}
.example-links a:hover {
  text-decoration: underline;
  font-weight: var(--font-thin);
}
.project-section {
  display: flex;
  flex-direction: column;
  max-width: 60rem;
  margin: auto;
  margin-top: 5rem;
}
.project-section h2 {
  font-weight: var(--font-medium);
  font-size: 2.5rem;
}
.project-card {
  background-color: var(--pale-bud);
  filter: saturate(50%);
  opacity: 0.85;
  width: 60rem;
  border-radius: 1rem;
  height: 100%;
  transition: opacity 0.1s;
  transition: width 0.25s;
  transition: transform 0.25s;
  box-shadow: 0px 0px 15px 8px rgba(64, 64, 64, 0.3);
  padding: 1.875rem;
  display: flex;
  justify-content: space-around;
  margin: 2rem;
}
.project-card:hover {
  opacity: 0.95;
  transform: translateY(-3px);
  box-shadow: 0px 5px 20px 8px rgba(0, 0, 0, 0.25);
  transform: scale(1.025);
}
.project-info {
  margin-right: 2rem;
}
.project-info h2 {
  font-size: var(--font-24);
  font-weight: var(--font-medium);
  margin-top: 0px;
}
.project-info p {
  font-weight: var(--font-light);
  font-size: 1.25rem;
}
.project-img {
  margin: auto;
  transition: 0.1s;
}
.project-img img {
  border-radius: 1rem;
}
.project-links {
  margin-left: 1rem;
}
.project-links a {
  text-decoration: none;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  color: var(--teal-blue);
}
.footer {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 1rem;
  color: var(--pale-bud);
}
.contact-button {
  background-color: var(--pale-bud);
  opacity: 0.8;
  border-radius: 1rem;
  height: auto;
  padding: 1rem;
}
.contact-button:hover {
  opacity: 0.95;
}
.contact-outer {
  text-decoration: none;
  color: rgb(20, 70, 0);
}

@media (max-width: 64rem) {
  .project-card {
    flex-direction: column;
    width: 90%;
  }
  .project-card:hover {
    transform: scale(1);
  }
  .project-img:hover {
    transform: scale(1);
  }
  .project-info {
    margin-bottom: 2rem;
  }
  .hero {
    max-width: 80%;
  }
  .project-img {
    max-width: 70%;
  }
}

@media (max-width: 35rem) {
  .line {
    display: none;
  }
  .tab {
    flex-direction: column;
  }
}