body {
  margin: 0;
}

main {
  border-radius: 0;
  box-shadow: none;
  background-color: var(--bg-highlight);
}

h1 {
  margin-top: 20px;
  margin-bottom: 20px;
}

h5 {
  margin-top: 0;
  margin-bottom: 0;
}

header {
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: black;
  color: white;
}

a:link,
a:visited,
a:hover,
a:active {
  color: light-dark(#333, white);
}

article {
  padding: 20px;
  padding-top: 0;
  background-color: var(--bg);
  margin: 20px;
  word-wrap: break-word;
}

.git-cat {
  vertical-align: middle;
  width: 20px;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 80%;
  margin: auto;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container > .first {
 flex: 75%;
} 

.flex-container > .second {
  flex: 25%;
  text-align: end;
}

.app-image{
  width:100%;
  object-fit: contain; 
  margin-top: 10px;
  border-radius: 12%;
}

.orca-article-text{
  margin: 30px;
}

@media (max-width: 850px) {
  main {
    width: 98vw;
}
  h1 {
    font-size: 10vw;
  
  }
    h2 {
    font-size: 7vw;
   
  }
  h5{
    text-align: center;
  }
  .flex-container {
    flex-direction: column;
  }
  .orca-article-text{
    margin: 0;
    margin-top: 10px;
  }
  blockquote{
    margin: 10px;
  }
}

@media (prefers-color-scheme: light) {
  .git-cat {
    filter: invert(0%);
  }
}

@media (prefers-color-scheme: dark) {
  .git-cat {
    filter: invert(100%);
  }
}