/* CSS built-in properties, pseudo-classes, and functions
 * This file provides examples of CSS standard properties and usage
 */

/* Common CSS Properties */
body {
  /* Box model properties */
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  
  /* Typography properties */
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  text-align: left;
  
  /* Visual formatting */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 1;
  
  /* Positioning and layout */
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  overflow: auto;
}

/* Flexbox layout */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.flex-item {
  flex: 1 1 auto;
  order: 1;
}

/* Grid layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.grid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

/* Transitions and animations */
.animated {
  transition: all 0.3s ease;
  animation: fadeIn 2s ease-in-out;
  transform: scale(1);
}

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

/* Media queries */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #eee;
  }
}

/* Pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }

button:focus { outline: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }

li:first-child { font-weight: bold; }
li:last-child { font-style: italic; }
li:nth-child(odd) { background-color: #f9f9f9; }

/* Pseudo-elements */
p::first-line { font-variant: small-caps; }
p::first-letter { font-size: 200%; }
div::before { content: "Before"; }
div::after { content: "After"; }

/* CSS custom properties (variables) */
:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --spacing-unit: 8px;
  --font-stack: 'Roboto', Arial, sans-serif;
}

.theme-element {
  color: var(--text-color);
  background-color: var(--main-color);
  padding: calc(var(--spacing-unit) * 2);
  font-family: var(--font-stack);
}

/* CSS functions */
.gradient {
  background: linear-gradient(45deg, red, blue);
  background: radial-gradient(circle, yellow, green);
  width: calc(100% - 20px);
  height: min(300px, 50vh);
  margin: max(10px, 1%);
  padding: clamp(10px, 5%, 50px);
}

.filters {
  filter: blur(5px) brightness(150%) contrast(200%);
  backdrop-filter: blur(10px);
}

.transforms {
  transform: translate(10px, 20px) rotate(45deg) scale(1.5);
  transform-origin: center;
}

/* CSS import */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Font face */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Supports query */
@supports (display: grid) {
  .grid-layout {
    display: grid;
  }
}

/* CSS counters */
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}