:root {
     --light: #fafafa;
     --mid: #9f9f9f;
     --dark: #2a2722;

     --accent: #ff7b00;
     --placeholder: #cccccc;

     color-scheme: dark;
     --bg-color: var(--light);
     --text-color: var(--dark);
 }

 body {
     background: var(--bg-color);
     color: var(--text-color);
     font-style: normal;
     line-height: 1.5;
     min-height: 100vh;
 }

 .container {
     width: 100%;
     height: 100%;
     max-width: 1024px;
     margin: 0 auto;
     padding: 0 1rem;
 }


 article {
     position: relative;
     border: 1px solid var(--placeholder);
     padding: 2rem 1.5rem;
     border-radius: 0.75rem;
 }

 article:hover {
     cursor: pointer;
     border-color: var(--text-color);
 }


 main ul a,
 main ol a {
     color: var(--primary);
     text-decoration: underline;
 }



 input[type="search"] {
     width: 100%;
     padding: 1rem;

     background-color: var(--bg-color);
     border: 1px solid var(--text-color);


     border-radius: 10px;
     color: var(--text-color);
     outline: none;
 }

 input[type="submit"] {
     font-weight: 700;
     text-decoration: none;
     color: var(--text-color);
     background-color: var(--bg-color);
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
     height: 40px;
     width: fit-content;
 }

 input[type="submit"]:hover {
     background-color: var(--bg-color);
     transform: translateY(-2px);
     /* box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); */
 }

 form {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin-bottom: 30px;
 }

 input[type="text"],
 input[type="password"],
 input[type="file"],
 textarea,
 select {
     background-color: var(--bg-color);
     border: 1px solid var(--text-color);
     color: var(--text-color);
     border-radius: 10px;
     padding: 0.5rem 1rem;
     outline: none;
     width: 100%;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 input[type="text"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 input[type="file"]:focus,
 select:focus {
     border-color: var(--text-color);
     /* box-shadow: 0 0 0 3px rgba(103, 161, 255, 0.2); */
 }

 textarea {
     resize: vertical;
     min-height: 80px;
 }



 table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 1.5rem;
     background: var(--bg-color);
     border-radius: 10px;
     overflow: hidden;
 }

 th,
 td {
     padding: 1rem;
     border-bottom: 1px solid var(--placeholder);
     text-align: left;
 }

 th {
     background: var(--bg-color);
     font-weight: 700;
 }

 button,
 .btn {
     --btn-bg: var(--text-color);
     --btn-text: var(--bg-color);

     display: inline-flex;
     align-items: center;
     gap: 0.5rem;

     height: 40px;
     padding: 0.5rem 1rem;
     border-radius: 10px;

     font-weight: 700;
     text-decoration: none;
     cursor: pointer;

     background-color: var(--btn-bg);
     color: var(--btn-text);

     border: none;
     transition: background-color 0.2s ease, transform 0.2s ease;
 }

 .btn:hover {
     color: var(--btn-text);
     transform: translateY(-2px);
 }

 .btn:active {
     transform: translateY(0);
 }

 .btn:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 2px;
 }

 .btn--cta {
     --btn-bg: var(--accent);
     --btn-text: var(--bg-color);
 }

 .btn--secondary {
     --btn-bg: var(--bg-color);
     --btn-text: var(--text-color);
 }

 .btn--outline {
     --btn-text: var(--text-color);
     --btn-bg: transparent;
     border: 1px solid currentColor;
 }

 .btn--outline:hover {
     background-color: var(--dark);
     color: var(--light);
 }

 .btn--outline--light {
     --btn-text: var(--light);
     --btn-bg: transparent;
     border: 1px solid currentColor;
 }

 .btn--outline--light:hover {
     background-color: var(--light);
     color: var(--dark);
 }

 .logo {
     font-weight: 500;
     line-height: 1;
 }

 .placeholder {
     color: var(--placeholder);
 }

 .mid {
     color: var(--mid);
 }

 .placeholder:hover {
     text-decoration: none !important;
 }


    strong {
        font-size: inherit;
        font-weight: 700;
    }

    span {
        font-size: inherit;
    }

    ul,
    ol {
        display: flex;
        flex-direction: column;
        list-style: none;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    li {
        width: fit-content;
    }



    .nav-links a:not(.btn--outline),
    .hero-actions a:not(.btn--outline--light),
    .card a,
    article a,
    section a,
    li a {
        position: relative;
        color: var(--text-color);
        text-decoration: none;
    }

    .nav-links a:not(.btn--outline)::after,
    .hero-actions a:not(.btn--outline--light)::after,
    .card a::after,
    article a::after,
    section a::after,
    li a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background-color: var(--accent);

        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }


    .nav-links a:not(.btn--outline):hover::after,
    .hero-actions a:not(.btn--outline--light)::after,
    article a:hover::after,
    section a:hover::after,
    li a:hover::after,
    .card:hover a::after {
        transform: scaleX(1);
    }

    .tiny {
        font-size: 0.9rem;
    }

    .text-us{
        text-decoration: underline;
    }