:root {
  --color-primary: #4CB492;
  --color-secondary: #3C9074;
  --color-dark: #252A2D;
  --color-dark-light: #30373B;
  --color-discord: #5865F2;
  --color-white: #F6F8FA;
  --color-gray: #A8AAAB;
  --color-info-dark: #343D8E;
  --color-info: #3E51F9;
  --sidebar-width: 250px;
  --sidebar-padding: 20px;
}

@font-face {
  font-family: 'Default';
  src: url('assets/fonts/default_font.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional: Controls how the font loads */
}

*{
    box-sizing: border-box;
    font-family: 'Default', sans-serif;
}

body {
  background-color: var(--color-dark); /* text color */
  color: var(--color-white); /* background color */
  display: flex;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

source {
  border-radius: 10px;
}

.info-box {
  background-color: var(--color-dark-light);
  display: inline-flex;
  height: fit-content;
  border: 1px solid var(--color-gray);
  padding: 15px 20px;
  margin: 10px;
  border-radius: 10px;
  /* box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-content
{
  flex: 1;
  width: 100%;
  height: 100%;
}

.content-container {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

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

.section {
  justify-content: center;
  width: 100%;
  border-bottom: var(--color-dark-light) 1px solid;
  border-top: var(--color-dark-light) 1px solid;
}

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-dark-light);
  padding: var(--sidebar-padding);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0; /* Stick to the top of the viewport */
  height: 100vh; /* Make it full viewport height */
  overflow-y: auto; /* Allow scrolling inside the sidebar if content is taller */
}

.primary{
  background-color: var(--color-primary);
  color: var(--color-white);
}

.secondary{
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.discord-color{
  background-color: var(--color-discord);
  color: var(--color-white);
}

.spacer-20-px{
  height: 20px;
  width: 100%;
}

button{
  padding: 5px;
  border-radius: 5px;
  border: none;
}

/* Section Specific Layout Rules */

.ordina-section {
  display: flex;
  width: 100%;
}

.ordina-section .text-container {
  flex: 2; 
  width: 75%;
}

.ordina-section .info-box{
  flex: 2;
}

.what-does-it-do-section .text-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.short-feature-row {
  display: flex;
  width: 100%;
}

.short-feature-row .info-box {
  flex: 2;
  height: 100%;
  padding-bottom: 5px;
}

.feature-section {
  width: 100%;
}

.blue-info-box
{
  color: var(--color-info-dark);
  background-color: var(--color-info-dark);
  border: 1px solid var(--color-info);
  border-radius: 10px;
  margin: auto;
  height: fit-content;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 10px;
  /* box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); */
  display: flex;
  gap: 10px;
  width: 75%;
}

.blue-info-box > div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Keep the flex ratio */
}

.blue-info-box .icon {
  width: 100%;
  height: 100%;
}

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

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

/* Text */
h1, h2, h3 {
  margin: 0;
}

p {
  color: var(--color-gray);
  margin: 0;
  font-size: medium;
}

button{
  font-size: medium;
  cursor: pointer;
  padding: 10px;
}

a {
  color: var(--color-primary);
}

/* Mobile positioning styles */
@media (max-width: 900px) {
    /* .content-container {
    padding: 0 0;
  } */
  .sidebar {
    display: none;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .ordina-section {
    flex-direction: column;
  }

  .short-feature-row {
    flex-direction: column;
  }
}