:root {
  --language-color-js: #f1e05a;
  --language-color-ts: #3178c6;
  --language-color-html: #e34c26;
  --language-color-css: #563d7c;
  --language-color-ejs: #a91e50;
  --language-color-py: #3572a5;
  --language-color-hbs: #f7931e;
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/roboto.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Sarabun";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/sarabun.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}

body {
  margin: 0;
  font-family: "Roboto", "Sarabun", sans-serif;
  background-color: #1a1a1a;
  font-size: 16px;
  font-variant-ligatures: none;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
}

.no-margin {
  margin: 0;
}

hr {
  border-top: 1px solid #686868;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

#mistertfy64-wordmark {
  margin: 16px 16px 0px 16px;
}

/* ALL >768px SCREEN SIZE START */
@media only screen and (min-width: 769px) {
  #main-content-container {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  #main-content__content-box-container--left {
    width: 25%;
  }

  #main-content__content-box-container--right {
    width: 75%;
  }
}
/* ALL >768px SCREEN SIZE END */

/* ALL <=768px SCREEN SIZE START */
@media only screen and (max-width: 768px) {
  .main-content__content-box-container {
    width: 100% !important;
  }
  #main-content-container {
    flex-direction: column;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  #main-content__content-box-container--left {
    width: 100%;
  }
  #main-content__content-box-container--right {
    width: 100%;
  }

  .main-content__content-box {
    /* height: calc(95% + 24px); */
    width: calc(100% - 8px);
    padding: 4px;
    margin: 4px 4px 4px 4px !important;
    box-sizing: border-box;
  }

  #activity-container {
    display: grid !important;
    grid-auto-rows: min-content !important;
  }
}
/* ALL <=768px SCREEN SIZE END */

.project-box {
  width: 100%;
  height: 16%;
  border-style: solid;
  border-color: #888888;
  background-color: #cccccc;
  overflow: hidden;
  padding: 4px;
}

.main-content__content-box-container {
  display: flex;
}

.main-content__content-box {
  background-color: #cccccc;
  border: 2px solid #888888;
  margin: 8px;
  /* height: calc(95% + 24px); */
  /* width: calc(100% - 8px); */
  padding: 4px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.main-content__content-box > hr {
  margin: 2px;
}

h1 {
  font-weight: normal;
  font-size: 32px;
}

h2 {
  font-weight: normal;
  font-size: 24px;
}

#activity-container {
  display: grid;
  grid-auto-rows: min-content;
}

.activity-entry {
  margin: 0 2px;
  position: relative;
}

.activity-entry:nth-of-type(even) {
  background-color: #cccccc;
}

.activity-entry:nth-of-type(odd) {
  background-color: #bebebe;
}

.activity-entry__content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  position: relative;
}

.activity-entry__content__date {
  text-align: right;
  align-content: flex-end;
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
  align-items: flex-end;
  height: auto;
  align-self: flex-end;
}

.activity-entry__link {
  align-content: flex-start;
  flex-direction: row;
  display: flex;
  flex-grow: 1;
  height: auto;
  align-self: flex-start;
}

.text--small {
  font-size: 10px;
}

.text--subtitle {
  margin: 0px;
  font-weight: normal;
}

.language-box--js {
  background-color: var(--language-color-js);
  color: #000000;
}

.language-box--ts {
  background-color: var(--language-color-ts);
  color: #ffffff;
}

.language-box--ejs {
  background-color: var(--language-color-ejs);
  color: #ffffff;
}

.language-box--css {
  background-color: var(--language-color-css);
  color: #ffffff;
}

.language-box--html {
  background-color: var(--language-color-html);
  color: #ffffff;
}

.language-box--py {
  background-color: var(--language-color-py);
  color: #ffffff;
}

.language-box--hbs {
  background-color: var(--language-color-hbs);
  color: #000000;
}

.status-box--dormant {
  background-color: #ab2222;
  color: #ffffff;
}

.status-box--inactive {
  background-color: #ab2222;
  color: #ffffff;
}

.status-box--active {
  background-color: #28f828;
  color: #000000;
}
.language-box,
.status-box {
  margin: 2px 2px;
  padding: 0 4px;
}

.information-box-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -2px;
}

.image-button {
  border: 2px solid #000000;
  display: block;
  flex-grow: 1;
  width: fit-content;
}

.image-button a {
  text-decoration: none;
  width: 0px;
  height: 0px;
  font-size: 0px;
}

.image-button img {
  display: block;
  width: 100%;
}

footer > a {
  color: #c5c5c5 !important;
  text-decoration-color: #c5c5c5 !important;
  text-decoration: underline;
}

footer > a:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
  text-decoration: underline;
}

.vertical-aligned {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-entry {
  margin: 0 2px;
}

.project-entry--large {
  margin: 8px 2px 0 2px;
}

#wordmark-container {
  display: flex;
  justify-content: center;
}

.social-link {
  margin: 0 2px;
}

a:link {
  color: #0000ee;
}

a:visited {
  color: #551a8b;
}

a:link:active,
a:visited:active {
  color: #ff0000;
}