/* Typography imported from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sekuya&display=swap");

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

:root {
  /* colours */
  --darkred: rgb(163, 40, 40);
  --cream: rgb(255, 209, 196);
  --lightorange: rgb(232, 139, 96);
  --orange: rgb(190, 87, 19);
  --goldyellow: rgb(238, 181, 131);
  --darkbrown: rgb(66, 36, 36);
  /* fonts */
  --headerfont: "Sekuya", sans-serif;
  --bodyfont: "Rubik", sans-serif;
  /* font sizes */
  --largetitle: 4rem;
  --resheader-mobile: 2rem; /* resume header size for mobile */
}

a {
  color: var(--cream);
  text-decoration: none;
  font-style: oblique;
  padding: 0.25rem;
}

a:hover {
  text-decoration: none;
  font-style: normal;
  background: var(--cream);
  color: var(--darkred);
}

body {
  font-family: var(--bodyfont);
  background: var(--darkbrown);
}

h3 {
  font-weight: bold;
  font-size: 1.5rem;
}

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

p {
  padding-top: 0.5rem;
}

ul {
  padding: 1.5rem;
}

.subheading {
  font-size: 1.5rem;
  margin-top: 2rem;
}

/* INDEX STYLES (Web Ring) */
.hero {
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url(sm-star-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-wrap {
  font-family: var(--headerfont);
  color: var(--cream);
  background: var(--darkred);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
}

.bodytext {
  font-family: var(--bodyfont);
  font-size: 1rem;
  color: var(--cream);
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
}

.darkbg {
  background: var(--darkbrown);
}

.ring-links {
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  font-family: var(--headerfont);
}

.link-buttons {
  background: var(--darkred);
  justify-content: center;
  text-align: center;
  padding: 1rem;
  margin: 1rem;
  border-radius: 1.5rem;
}

.sm-link {
  font-size: 1rem;
  margin: 0.5rem;
}

/* ABOUT STYLES */
.about-wrap {
  font-family: var(--headerfont);
  color: var(--cream);
  background: var(--darkred);
  padding: 1.5rem;
  font-size: 2rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
}

/* RESUME STYLES */
.resume-header {
  background: var(--darkred);
  padding: 2rem;
  font-weight: bold;
  color: var(--cream);
  margin-bottom: 1rem;
}

.back-nav {
  padding-bottom: 2rem;
}

.name {
  font-family: var(--headerfont);
  font-weight: 400;
  font-size: 3.25rem;
}

.position-title {
  font-size: 1.5rem;
  margin-top: 1.5rem;
}

/* resume section header styles */

.res-section-header {
  font-family: var(--headerfont);
  font-size: var(--resheader-mobile);
  margin-bottom: 1.5rem;
  padding: 1rem;
}
.orange {
  background: var(--orange);
  color: var(--goldyellow);
}
.red {
  background: var(--darkred);
  color: var(--lightorange);
}
.years {
  font-style: italic;
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
}

/* resume wrapper styles */
.res-wrapper {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.yellow-wrap {
  background: var(--goldyellow);
}
.lightorange-wrap {
  background: var(--lightorange);
}

.bulleted-item {
  list-style: disc;
  margin-left: 2rem;
  margin-bottom: 0.5rem;
}

/* Tablet view (768px to 991 px) */
@media (min-width: 768px) {
  /* INDEX STYLES */
  .ring-links {
    flex-direction: row;
  }
  /* ABOUT STYLES */
  .about-wrap {
    flex-direction: row;
  }
  .aboutcontent {
    max-width: 80%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* INDEX STYLES */
  .hero-wrap {
    font-size: var(--largetitle);
    flex-direction: row;
  }
  .subheading {
    font-size: 2rem;
    flex-direction: row;
  }
  .bodytext {
    font-size: 1.5rem;
  }
  .ring-links {
    font-size: 2rem;
  }

  /* ABOUT STYLES */
  .about-wrap {
    font-size: var(--largetitle);
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .aboutcontent {
    max-width: 50%;
  }

  /* RESUME STYLES */
  .res-wrapper {
    flex-direction: row;
  }
  .res-section {
    width: 50%;
  }
}