/* 
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: #6f97c9;
  --theme-500: #87b8f5;
  --theme-600: #cbdef5;
  /* --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);
  padding: 16px;
  margin: 0;
}

@media only screen and (min-width: 768px) {
  body {
    padding: 0;
    margin: 0;
  }
}

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;
}

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


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

a:hover {
  color:var(--theme-600);
  text-decoration:underline;
}

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

/* 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 {
}

ul.blog__list-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.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: 16px;
}


.blog__list-item-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog__list-item-title,
.blog__list-item-date,
.blog__list-item-description{
  padding: 0;
  margin: 0;
}

.blog__list-item-description: {
  line-height: 1.75em;
}

.blog__list-item-cta {
  align-self: center;
  justify-self: center;
  text-decoration: none;
}

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

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

button.blog__share-button {
  background-color: var(--theme-300);
  color: white;
  padding: 1em;
  border-radius: 6px;
  border: none;
  transition: all ease-in-out 200ms;
}

button.blog__share-button:hover {
  cursor: pointer;
  /* color, width, height, blur, size */
  box-shadow: var(--theme-600) 0px 0px 0px 2px;
  transition: all ease-in-out 200ms;
}

/* 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;
}

/* Footer styles */

.footer__container {
  margin: 0;
  padding-top: 24px;
  padding-bottom: 16px;
}

/* Layout styles */

div.layout {
  margin: auto;
  display: flex;
  flex-direction: column;
}

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

main.layout__main-content {
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */
}


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

@media only screen and (min-width: 768px) {
  .layout__header {
    max-width: 40rem;
    padding: 24px 0px;
  }
}

.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);
  text-decoration: none;
}

.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 */

/* Home page styling (index.html) */

h1.home__tagline {
  margin: 0;
  padding: 0;
}

.home__section {
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 36px;
  margin: 36px 0px;
}

ul.home__links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.home__links-item {}

img.home__avatar {
  border-radius: 1000px;
}