@charset "UTF-8";
* {
  box-sizing: border-box; }

blockquote {
  background: #2a213a;
  color: #eff2f0;
  border-left: 2px solid #6dcedf;
  margin: 0.5em 0px;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’"; }

blockquote:before {
  color: #6dcedf;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em; }

cite {
  display: block;
  font-style: italic;
  text-align: right; }
  cite:before {
    content: "— "; }

blockquote p {
  display: inline; }

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #120f1a;
  color: white;
  text-align: center;
  z-index: 99;
  margin-top: 2rem;
  height: 80px; }
  footer .icons {
    margin-top: 1rem; }
    footer .icons a {
      padding: 0.4rem; }
      footer .icons a:hover {
        color: #6dcedf;
        transition: all 0.5s ease-out; }

/* Add a black background color to the top navigation */
.topnav {
  background-color: #7d5d7d;
  overflow: hidden;
  height: 2 rem;
  box-shadow: 0 2px 4px 2px rgba(20, 20, 20, 0.562);
  max-width: 1200px; }

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.5rem; }

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #6dcedf;
  color: #1e182a; }

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #7d5d7d;
  color: #1e182a; }

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none; }

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none; }
  .topnav a.icon {
    float: right;
    display: block; } }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative; }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0; }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left; } }

body,
html {
  height: 100%; }

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), url("../img/mtfuji.jpeg");
  /* Set a specific height */
  height: 50%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: 2rem; }

/* Place text in the middle of the image */
.hero-text {
  margin-top: 0rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; }
  .hero-text h1 {
    font-size: 3rem; }

.hero-button {
  /* Positioning and sizing */
  display: block;
  width: 200px;
  /* Padding and margins */
  padding: 1em;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  /* Text styles */
  /* Border styles */
  border: 2px solid white;
  border-radius: 20px;
  /* Background styles */
  background-color: rgba(30, 24, 42, 0.8); }
  .hero-button a {
    color: #eff2f0;
    text-decoration: none;
    font-size: 1.5em; }

.hero-banner-quote {
  display: none; }

@media screen and (min-width: 361px) {
  .hero-banner-quote {
    display: block; }
  .hero-button {
    width: 300px; } }

body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; }

body,
p {
  font-size: 1rem; }
  @media screen and (min-width: 361px) {
    body,
    p {
      font-sizr: 1.2rem; } }
  @media screen and (min-width: 769px) {
    body,
    p {
      font-size: 1.4rem; } }
  body include mediaXl,
  p include mediaXl {
    font-size: 2rem; }

footer {
  font-size: 1rem;
  color: #8f4e63; }

h1,
h2,
h3,
h4 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #eff2f0;
  margin: 0;
  font-weight: 400;
  /*           x   y   blur color */ }

h1 {
  text-shadow: 1.5px 2px 1.5px #1e182a;
  font-size: 2rem; }
  @media screen and (min-width: 769px) {
    h1 {
      font-size: 4rem;
      line-height: 1;
      margin-bottom: 1rem; } }

h2,
h3,
h4,
h6 {
  font-size: 1.25rem; }
  @media screen and (min-width: 769px) {
    h2,
    h3,
    h4,
    h6 {
      font-size: 2rem; } }
  @media screen and (min-width: 1171px) {
    h2,
    h3,
    h4,
    h6 {
      font-size: 2.5rem; } }

h4 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-variant: small-caps;
  font-weight: 800;
  font-size: 1rem; }

h6 {
  color: #7d5d7d; }

blockquote {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic; }

.text-secondary {
  color: #8f4e63; }

.about-info {
  display: grid;
  grid-template-areas: "bioimage" "bio";
  grid-template-columns: 1fr; }

@media screen and (min-width: 769px) {
  .about-info {
    grid-template-areas: "bioimage bio bio";
    grid-template-columns: repeat(3, 1fr); } }

.bio-image {
  grid-area: bioimage;
  margin: auto;
  border-radius: 50%;
  border: solid 3px #8f4e63; }

.bio {
  grid-area: bio;
  font-size: 1.5rem; }

.jobs-info {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "job1" "job2" "job3"; }
  @media screen and (min-width: 769px) {
    .jobs-info {
      grid-template-areas: "job1 job2 job3";
      grid-template-columns: repeat(3, 1fr); } }
  .jobs-info .job-1 {
    grid-area: job1; }
  .jobs-info .job-2 {
    grid-area: job2; }
  .jobs-info .job-3 {
    grid-area: job3; }
  .jobs-info .job {
    background: #2a213a;
    padding: 0.5rem;
    border-bottom: #8f4e63 5px solid; }

.projects {
  display: grid;
  grid-gap: 0.7rem;
  /*                     " three times one fractional" */
  grid-template-columns: repeat(3, 1fr); }
  .projects .project-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #6dcedf;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 1px 1px 0 #eff2f0;
    transition: 0.3s; }
    .projects .project-card .project-image {
      width: 100%;
      transform: scale(1);
      transition: 0.3s ease-in-out; }
      .projects .project-card .project-image:hover {
        width: 100%;
        transform: scale(1.1); }
    .projects .project-card .project-heading {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(30, 24, 42, 0.5);
      width: 100%; }
    .projects .project-card .project-links {
      display: grid;
      padding-top: 1rem;
      padding-bottom: 1rem;
      color: #eff2f0; }
      .projects .project-card .project-links a {
        line-height: 2.5rem;
        color: #6dcedf; }

.projects {
  grid-template-columns: repeat(1, 1fr); }

@media screen and (min-width: 361px) {
  .projects {
    grid-template-columns: repeat(2, 1fr); } }

@media screen and (min-width: 769px) {
  .projects {
    grid-template-columns: repeat(3, 1fr); } }

@media screen and (min-width: 1171px) {
  .projects {
    grid-template-columns: repeat(4, 1fr); } }

.contact-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 1rem; }
  .contact-boxes .contact-box {
    width: 100%;
    padding: 0.25rem 2.5rem;
    margin-bottom: 1rem; }
    .contact-boxes .contact-box-heading {
      color: #6dcedf; }
    .contact-boxes .contact-box-content {
      color: #eff2f0; }
  @media screen and (min-width: 769px) {
    .contact-boxes .contact-box {
      width: auto;
      border: 3px white solid;
      padding: 1.5rem 2.5rem; } }

body {
  background: #1e182a;
  color: #eff2f0;
  height: 100%;
  margin: 0;
  line-height: 1.5; }

html body {
  max-width: 1200px;
  margin: auto; }

a {
  text-decoration: none;
  color: #7d5d7d; }

header {
  position: fixed;
  z-index: 2;
  width: 100%; }

main {
  padding-top: 4rem;
  padding-bottom: 5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  min-height: calc(100vh - $footer-height); }
  main .icons {
    margin-top: 1rem; }
    main .icons a {
      padding: 0.4rem; }
      main .icons a:hover {
        color: #6dcedf;
        transition: all 0.5s ease-out; }
  main#home {
    overflow: hidden; }
    main#home h1 {
      margin-top: 20vh; }

.btn, .btn-dark, .btn-light {
  display: block;
  padding: 0.5rem 1rem;
  border: 0;
  margin-bottom: 0.3rem; }
  .btn:hover, .btn-dark:hover, .btn-light:hover {
    background-color: #eff2f0; }

@media screen and (min-width: 361px) {
  main {
    align-items: center;
    text-align: center; }
  h1 {
    line-height: 1;
    margin-bottom: 1rem; } }