/* Text Elements */

html {
  scroll-behavior: smooth;
}

a:link {
  color: #bfff80;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #00ff80;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #ffff80;
  background-color: transparent;
  text-decoration: underline overline;
}

a:active {
  color: #ff8000;
  background-color: transparent;
  text-decoration: underline;
}

p.paragraph {
  color: #66ffb3;
  margin-bottom: .25em;
  font-size: .80em;
  font-family: 'Andale Mono', AndaleMono, monospace;
  line-height: 1.4;
}

p.paragraph.paragraphs {
  color: #ffb366;
}

p.paragraph.paragraph-1 {
  color: #d9ff66;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: #000;
}

.flex-container > div {
  background-color: #000;
  width: 100%;
  margin: 5px;
  text-align: left;
  line-height: 18px;
  font-size: 15px;
}

p.paragraph.paragraph-2 {
  color: #66ffff;
}

p.paragraph.paragraph-3 {
  color: #dd8888;
}

p.paragraph.paragraph-4 {
  color: #8cff66;
}

p.paragraph.footer {
  color: #ffff66;
  text-align: center;
}

ul.unorder-list {
  padding-bottom: .35714285714285715em;
  padding-left: .8571428571428571em;
  width: auto;
  list-style-type: circle;
}

a.link-text {
  color: #ffff66;
  font-size: .75em;
  font-family: 'Andale Mono', AndaleMono, monospace;
  line-height: 1.4;
}

a.link-text.portfolio-text-link {
  color: #ffb366;
}

a.link-text.portfolio-text-link:hover {
  text-decoration: underline overline dotted yellow;
}

/* Interaction Elements */

a.link-button {
  padding: .75em .8333333333333334em;
  background-color: #313131;
  color: #d9ff66;
  font-size: .75em;
  font-family: 'Andale Mono', AndaleMono, monospace;
}

a.link-button.nav-item {
  margin-right: 0;
  margin-left: 0;
  width: 33%;
}

a.link-button.active.nav-item {
  font-weight: 600;
}

a.link-button.nav-item:hover {
  text-decoration: underline overline; 
}

/* Layout Elements */

body > .row > [class*='coffee-span-'].nav-bar {
  padding-top: 1.75em;
}

body > .row > [class*='coffee-span-'].footer {
  margin-top: 1.5625em;
  border-top: .0625em solid #333231;
}

body > .row > [class*='coffee-span-'].project-description {
  padding-bottom: 1.5625em;
}

body {
  background-image: url("../img/bgimg.jpg");
  padding-right: 1.875em;
  padding-left: 1.875em;
}

a.responsive-picture.logo > picture {
  margin: 0;
}

a.responsive-picture.logo {
  margin-right: auto;
  margin-left: auto;
  max-width: 18.5em;
}

a.responsive-picture.portfolio-image-link {
  margin-bottom: 1em;
  max-width: inherit;
}

a.responsive-picture.portfolio-image-link > picture {
  margin: 0;
}

.row > [class*='coffee-span-'] > .container.buttons-container {
  margin-right: auto;
  margin-left: auto;
  width: 80%;
}

div.responsive-picture.project-image {
  margin-bottom: 1em;
  max-width: none;
}

div.responsive-picture.project-image > picture {
  margin: 0;
}

li {
  margin-bottom: .75em;
  text-indent: -1em;
  font-size: .8571428571428571em;
  font-family: 'Andale Mono', AndaleMono, monospace;
}

.row > [class*='coffee-span-'] > .container {
  width: auto;
}

@media screen and (max-width: 68.6875em) {
  /* Layout Elements */

  body {
    padding-right: 1.25em;
    padding-left: 1.25em;
  }

  div.responsive-picture.project-image {
    margin-bottom: 1em;
  }

  .row > [class*='coffee-span-'] > .container.buttons-container {
    min-width: .625em;
    width: 60%;
  }
}

@media screen and (max-width: 33.375em) {
  /* Layout Elements */

  body {
    padding-right: .375em;
    padding-left: .375em;
  }

  .row > [class*='coffee-span-'] > .container.buttons-container {
    width: 100%;
  }
}