/* bundle.css */

/* Base Styles */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --dark-color: #2c3e50;
  --light-color: #fffbf0;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  /* Vibrant Blue */
  --link-color: #09f;
  --link-hover-color: #06f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Ruth-Ukraine';
  /* src: url('/fonts/ruth-ukraine/Roboto-Ruth-Ukraine.ttf') format('truetype'); */
  src: url('/fonts/ruth-ukraine/Vollkorn-Ruth-Ukraine-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ruth-Ukraine';
  src: url('/fonts/ruth-ukraine/Vollkorn-Ruth-Ukraine-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: 'CamingoCode';
  src: url('/fonts/camingocode/webfonts/CamingoCode-Regular.woff2') format('woff2'),
       url('/fonts/camingocode/webfonts/CamingoCode-Regular.woff') format('woff'),
       url('/fonts/camingocode/ttf/CamingoCode-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'CamingoCode';
  src: url('/fonts/camingocode/webfonts/CamingoCode-Bold.woff2') format('woff2'),
       url('/fonts/camingocode/webfonts/CamingoCode-Bold.woff') format('woff'),
       url('/fonts/camingocode/ttf/CamingoCode-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'CamingoCode';
  src: url('/fonts/camingocode/webfonts/CamingoCode-Italic.woff2') format('woff2'),
       url('/fonts/camingocode/webfonts/CamingoCode-Italic.woff') format('woff'),
       url('/fonts/camingocode/ttf/CamingoCode-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'CamingoCode';
  src: url('/fonts/camingocode/webfonts/CamingoCode-BoldItalic.woff2') format('woff2'),
       url('/fonts/camingocode/webfonts/CamingoCode-BoldItalic.woff') format('woff'),
       url('/fonts/camingocode/ttf/CamingoCode-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: 'Ruth-Ukraine', 'CamingoCode', sans-serif;
  line-height: 1.6;
  color: var(--dark-color);
  background-color: var(--light-color);
	padding: 2rem; /* Added padding to the body for overall spacing */
}

/* Typography */
h1, h2, h3 {
  margin-bottom: 1rem;
  margin-top: 2rem;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

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

a:hover, a:active {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* Layout */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 2rem 0;
}

ul,ol li a {
  transition: var(--transition);
}

li {
  list-style: circle;
  margin-bottom: 0.5rem; /* Adjust margin bottom for list items */
}

ol ol {
  padding-left: 1.5rem; /* Further indent nested lists */
  list-style-type: circle; /* Or use 'lower-alpha', 'decimal', etc. */
}


/* Buttons */
.btn {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn:hover {
  background: var(--secondary-color);
  transform: translateY(-3px);
}

/* Cards */
.card {
  background: white;
  margin: 1rem;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

/* Responsive Design */
@media (max-width: 768px) {
  ul,ol {
    flex-direction: column;
    align-items: center;
  }

  .container {
    width: 95%;
  }
}

code, pre, .monospace {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: #f3f4f6; /* Light gray background */
  border-radius: 3px;
  font-size: 0.92em;
  color: #bd2c00; /* Or a muted color like #6b7280 for less contrast */
  padding: 0.1em 0.3em;
}

pre > code {
  padding: 0;
}