/* 
BEM
Block - Standlone entity that has meaning on its own
Element - Parts of a block that have no standalone meaning. Tied to its own block. __
Modifiers - Flags on blocks or state. Use them to change appearance, behavior, or state. --

*/

/* Global site styles */

* {
  font-family: font-mono, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  --theme-100: #0b132b;
  --theme-200: #1c2541;
  --theme-300: #3a506b;
  --theme-400: #5bc0be;
  --theme-500: #6fffe9;
  /* --theme-100: #03256c;
  --theme-200: #2541b2;
  --theme-300: #1768ac;
  --theme-400: #06bee1;
  --theme-500: #ffffff; */

  --text: white;
  --text-secondary: black;
}

/* Overrides */

body {
  background: var(--theme-100);
  color: var(--text);
}

pre {
  padding: 8px;
  background-color: var(--theme-200);
  border-radius: 4px;
}
code {
  font-family: "Courier New";
  background-color: var(--theme-200);
}
img {
  max-width: 15rem;
  height: auto;
}

a {
  color: var(--theme-400);
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  img {
    max-width: 40rem;
    height: auto;
  }
}

::selection,
::-moz-selection {
  color: var(--text-secondary);
  background-color: var(--theme-400);
}

/* Blog styles */

.blog {
  display: flex;
  flex-direction: column;

  gap: 1em;
}

.blog__content {
  background: var(--theme-100);
  color: var(--text);
  line-height: 1.75em;
}

.blog__container {
  margin-bottom: 30em;
}

.blog__list-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 2px solid var(--theme-300);
  background: var(--theme-200);
  border-radius: 8px;
  padding: 8px;
}

.blog__list-item-content {
  margin-left: 8px;
}

.blog__list-item-cta {
  align-self: center;
  justify-self: center;
  margin-right: 8px;
}

.blog__list-item-cta:hover {
  cursor: pointer;
}

.blog__list-link,
.blog__list-link:visited {
  text-decoration: none;
  color: var(--text);
}

.blog__share-button {
  background-color: var(--theme-300);
  color: white;
  padding: 1em;
  border-radius: 6px;
  border: none;
}

.blog__share-button:hover {
  cursor: pointer;
  /* color, width, height, blur, size */
  box-shadow: var(--theme-500) 0px 0px 0px 2px;
}

/* Body styles */

.body {
  margin: 8px;
}

/* Editor styles */

.editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  gap: 1em;
}

@media only screen and (min-width: 768px) {
  .editor {
    flex-direction: row;
  }
}

.editor__title {
}

.editor__form {
}

.editor__form-textarea-input {
  background-color: var(--theme-200);
  color: var(--text);
  border: 1px solid var(--theme-400);
  padding: 1em;
}

.editor__form-text-input {
  padding: 1em;
  background-color: var(--theme-200);
  color: var(--text);
  border: 1px solid var(--theme-400);
}

.editor__preview-button {
  background: var(--theme-300);
  border: 4px;
  padding: 1em;
  color: var(--text);
  border: 1px solid var(--theme-400);
  border-radius: 4px;
}

.editor__preview-button:hover {
  background: var(--theme-200);
  cursor: pointer;
  color: var(--text);
}

.editor__preview-section {
  border: 2px solid black;
  padding: 4px;
}

.editor__preview-title {
}

.editor__preview-container {
  border: 2px solid var(--theme-300);
  padding: 8px;
  min-height: 50px;
  max-width: 32rem;
  min-width: 32rem;
  overflow-wrap: break-word;
}

/* Header styles */

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header__avatar {
  border-radius: 100px;
  height: 3em;
  width: 3em;
}

/* Layout styles */

.layout {
  margin: auto;
  padding: auto;
  margin-right: 1em;
  margin-left: 1em;
}

@media only screen and (min-width: 768px) {
  .layout {
    max-width: 40rem;
    margin: auto;
    padding: auto;
  }
}

.layout__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.layout__editor {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.layout__editor-header {
  max-width: 32rem;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Navigation styles */

.nav {
  display: flex;
  flex-direction: row;
  gap: 1.5em;
}

.nav__item {
  color: var(--text);
}

.nav__item:hover {
  text-decoration: underline;
  color: var(--theme-500);
}

/* Special Styles */
.my-name {
  display: none;
}

@media only screen and (min-width: 768px) {
  .my-name {
    display: block;
  }
}

/* End Special Styles */