/*

  🅶 🅴 🅽 🅴 🆁 🅰 🅻

  This are the general styles 
  for the whole webpage.

  Since the whole page uses it
  I'll mark it here.

  🅶 🅴 🅽 🅴 🆁 🅰 🅻

*/
  :root {
  --bgmain: #fae1f0;
  --bg: #e6b6ca;
  --bgaccent: #d3788f;
  --border: #fffbe9;
  --textaccent: #f8b332;
  --text: #0f0113;
  --text: #17041d;
  --button: rgb(141, 82, 110);
  --font: 'Writting', Arial, Helvetica, sans-serif;
  --fontbold: 'HornetBold', Arial, Helvetica, sans-serif;
  }

  * {
  box-sizing: border-box;
  }
  ::-webkit-scrollbar {
  width: 10px;
  }

  ::-webkit-scrollbar-track {
  background: var(--bg); 
  }

  ::-webkit-scrollbar-thumb {
  background: var(--button); 
  }

  ::-webkit-scrollbar-thumb:hover {
  background: var(--bgmain); 
  }

  @font-face {
  font-family: "Writting";
  src: url("fonts/BadComic-Regular.woff") format("woff");
  }



  img {
  image-rendering: crisp-edges;
  max-width: 100%;
  }

/*

  🅻 🅰 🆈 🅾 🆄 🆃
  
  This is for the general
  mainpage's layout.

  This is mostly design
  choices made by me, so it 
  is different than the
  document formatting.

  🅻 🅰 🆈 🅾 🆄 🆃

*/

  h1, h2, h3, h4, h5, h6, p {
  margin: 5px;
  line-height: 1.2;
  text-align: center;
  }

  header {
  display: flex;
  justify-content:space-between ;
  background-color: var(--bg);
  image-rendering: pixelated;
  width: 100%;
  height: 3rem;
  }

  header img {
    max-width: 3rem;
  }
  

  #bar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    margin: 5px;
  }

  #bar-right {
    display: flex;
    flex-direction: row;
    padding: 5px;
    margin: 5px;
  }

  #pfp {
    width: 100%;
    object-fit: contain;
    mix-blend-mode: color-burn;
  }
  
  .bold {
    font-family: var(--font);
    font-weight: bold;
  }

  body {
    display: block;
    margin: 0;
    background-color: var(--bgmain);
    color: var(--text);
    font-family: var(--font);
  }
  
  div {
  display: block;
  unicode-bidi: isolate;
  }

  .container {
  max-width: 75%;;
  margin: 5vw auto 12px auto;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  gap: 5px;
  /* - - - */
  }

  .small {
  max-width: 9rem;
  background-color: var(--bg);
  }

  .ring {
  display: flex;
  justify-content:center;
  flex-direction: row;
  align-items: center;
  }


  .buttonp {
    margin: 5px;
  }

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

  a:visited {
    text-decoration: none;
    color: var(--textv);
  }
  #mainpage {
    display: flex;
    flex-direction: column;
    text-wrap-mode:wrap;
  }
  embed {
    width: 100%;
    height: 12remcontent;
  }
  nav {
    background-color: var(--bgaccent);
    width: 100%;
    height: 4rem;

  }

  .content {
    margin: 2rem;
  }

  .items {
    display: flex;
    justify-content: center;
  }

  .sections {
    background-color: var(--button);
    height: 1.4rem;
    padding-left: 16px;
    padding-right: 16px;
  }
  .card {
    min-width: 9rem;
  }

  .half {
  background-color: var(--bg);
  flex: 1 1 50%;
  height:inherit;
  }

  .full {
  background-color: var(--bg);
  flex: 1 1 100%;
  }
  #upper {
    height: 4vh;
  }