@font-face {
  font-family: Bayshore;
  src: url('/assets/Bayshore.woff') format('woff');
}

:root {
  --color-primary: #2c3e50;
  --body-background: #D7509A;
  --body-text: #2c3e50;
  --heading-color: #2c3e50;
  --subtle-color: #6f6f6f;
}

body {
  /** source: http://markdotto.com/2018/02/07/github-system-fonts/ **/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--body-text);
  max-width: 1000px;
  padding: 10px;
  padding-top: 0;
  margin: auto;
  background: var(--body-background);
  background: linear-gradient(328deg, rgba(233,52,240,1) 0%, rgba(234,67,135,1) 100%, rgba(0,212,255,1) 100%);
  background-attachment: fixed;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

a:visited {
  color: var(--color-primary);
}

a:hover {
  text-decoration: none;
}

.box {
  background-color: white;
  border: 2px solid var(--body-text);
  box-shadow: 3px 3px var(--body-text);
  padding: 20px;
  margin-bottom: 10px;
}

header {
  text-align: center;
}

.main-header {
  font-family: Bayshore;
  font-size: 6.5em;
  margin-bottom: 0;
  text-shadow: var(--body-text) 3px 3px 1px;
  transform: rotate(-5deg);
  letter-spacing: 3px;
}

.main-header a {
  text-decoration: none;
  color: #E0E752;
}

@keyframes color-change {
  0% { color: #1abc9c }
  10% { color: #2ecc71 }
  20% { color: #3498db }
  30% { color: #9b59b6 }
  40% { color: #f1c40f }
  50% { color: #e67e22 }
  60% { color: #e74c3c }
  70% { color: #f39c12 }
  80% { color: #d35400 }
  90% { color: #ff00ff }
  100% { color: #c0392b }
}

.main-header a:hover {
  animation: color-change 3s infinite;
}

h2 {
  font-size: 1.5em;
  margin-bottom: 0;
  margin-top: 0;
}

h2 a {
  color: var(--heading-color);
  text-decoration: none;
}

@media (max-width: 630px) {
  .main-header {
    font-size: 4em;
  }
}

h1, h2, h3, h4, h5, h6, strong {
  color: var(--heading-color);
}

li {
  padding: 5px 0;
}

.no-bull {
  list-style-type: none;
  margin-left: -20px;
}

blockquote {
  font-style: italic;
}

.nav {

}

.nav__list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.nav__list--item {
    flex: 1;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-right: 10px;
}

.nav__list--item:last-child {
    margin-right: 0;
}

.nav__list--item a {
    text-decoration: none;
}

.nav__list--item a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
  .nav__list {
    flex-wrap: wrap;
  }

  .nav__list--item {
    flex-basis: 50%;
    margin-right: 0;
    padding: 5px;
  }

  h2 {
    font-size: 1.3em;
  }
}

footer {
  font-size: 0.8em;
  text-align: center;
}

.post img {
  text-align: center;
}
.post-list {
  list-style-type: none;
  margin-left: -30px;
}

.post-date, .microblog_time {
  color: var(--subtle-color);
  margin-bottom: 10px;
}

.microblog_time {
  margin-top: -10px;
}

.microblog_timeline {
  margin-left: 35px;
}

.microblog_text img {
  display: none;
}

.post-excerpt {
  font-size: 0.9em;
  font-style: italic;
}

p,
ul {
  margin-top: 0;
}

.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 430px) {
  .projects {
    grid-template-columns: repeat(1, 1fr);
  }
}

.project {
    position: relative;
    border: 2px solid var(--body-text);
    border-top: 35px solid var(--body-text);
    box-shadow: 3px 3px var(--body-text);
    padding: 35px 10px 40px 10px;
    background-color: white;
    padding: 20px;
    padding-top: 40px;
}

.project h2 {
  font-size: 1.1em;
}

.project p {
  margin-bottom: 0;
}

.project-image {
    position: absolute;
    top: -25px;
    left: 10px;
    background-color: var(--body-text);
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid var(--body-text);
}

.project-image img {
    height: auto;
    width: auto;
    max-height: 60%;
    max-width: 60%;
}

.project-logo-full img { max-width: 100%; max-height: 100%; }

/* buttons and forms from Sakura.css */
input, textarea {
  border: 1px solid #4a4a4a; }
  input:focus, textarea:focus {
    border: 1px solid #1d7484; }

textarea {
  width: 100%; }

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--body-background);
  color: white;
  border-radius: 1px;
  border: 1px solid var(--body-text);
  cursor: pointer;
  box-sizing: border-box; }
  .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
    cursor: default;
    opacity: .5; }
  .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
    background-color: #982c61;
    border-color: #982c61;
    color: #f9f9f9;
    outline: 0; }

textarea, select, input {
  color: #4a4a4a;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  margin-bottom: 10px;
  background-color: #f1f1f1;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
  textarea:focus, select:focus, input:focus {
    border: 1px solid #1d7484;
    outline: 0; }

input[type="checkbox"]:focus {
  outline: 1px dotted #1d7484; }

label, legend, fieldset {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }

pre {
  font-size: 14px!important;
}

.microblog-posts img {
  display: none;
}

.microblog-post {
  margin-left: 15px;
}

.microblog-post .post-date {
  margin-bottom: 0;
}

.microblog-photos {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.microblog-photo {
  display: flex;
  box-sizing: border-box;
  filter: grayscale(100%);
}

.microblog-photo:hover {
  filter: grayscale(0);
}

.microblog-photo:nth-child(odd) {
  transform: rotate(-6deg);
}
.microblog-photo:nth-child(even) {
  transform: rotate(3deg);
}

@media (max-width: 650px) {
  .microblog-photo:nth-last-child(-n+2) {
    display: none;
  }
}

.microblog-photo img {
  box-sizing: border-box;
  max-height: 400px;
  background-color: white;
  box-shadow: 2px 2px 2px var(--body-text);
}

.webring {
    font-size: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}