@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/typography";

@layer base {
    :root {
        --background: #ffffff;
        --background-secondary: #5F456B;

        /* 1f2937 gray-800*/
        --foreground: #1f2937; /* gray-900 */
        --primary: #D45546;
        --redrust:  #c12110;
        --orangerust:  #cc4111;

        --border: #3A3A54;

        --card: #1D1D2A;
        --card-foreground: #FDCEF1;

        --radius: 0.5rem;
    }
    
    .dark {
        --background: black;
        --foreground: hsl(213, 31%, 91%);

        --muted: hsl(223, 47%, 11%);
        --muted-foreground: hsl(215.4, 16.3%, 56.9%);

        --accent: hsl(216, 34%, 17%);
        --accent-foreground: hsl(210, 40%, 98%);

        --popover: hsl(224, 71%, 4%);
        --popover-foreground: hsl(215, 20.2%, 65.1%);

        --border: hsl(216, 34%, 17%);
        --input: hsl(216, 34%, 17%);

        --card: hsl(224, 71%, 4%);
        --card-foreground: hsl(213, 31%, 91%);

        --primary: hsl(210, 40%, 98%);
        --primary-foreground: hsl(222.2, 47.4%, 1.2%);

        --secondary: hsl(222.2, 47.4%, 11.2%);
        --secondary-foreground: hsl(210, 40%, 98%);

        --destructive: hsl(0, 63%, 31%);
        --destructive-foreground: hsl(210, 40%, 98%);

        --ring: hsl(216, 34%, 17%);

        --radius: 0.5rem;
    }
}
   
@layer base { 
    * {
        @apply border-border; 
    }

    body {
        @apply bg-background text-foreground font-text;
        font-feature-settings: "rlig" 1, "calt" 1; 
    }

    h1, h2, h3, h4, h5 {
        letter-spacing: -0.03em;
        scroll-margin-top: 56px;
    }
    a.active {
        @apply text-primary;
    }
}
 
.infobox {
    @apply relative my-8 w-full rounded-lg border px-4 py-3 text-sm border-green-500/50 text-green-500 bg-green-50 dark:bg-green-950 dark:border-green-500  pl-10;
    
    &:before{
        content: '';
        width: 15px;
        height: 15px;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
        @apply translate-y-[-3px] absolute left-4 top-4;
    }
}

.section-colored {
    h1, h2 {
        @apply text-background;
    }
}
.dark {
    .section-colored {
    
            h1,
            h2 {
                @apply text-white;
            }
        }
}

.section {
    @apply px-2 sm:px-0;
    h1 {
        @apply font-semibold;
        @apply sm:text-6xl;
        @apply mb-8;
        letter-spacing: -0.05em;
    }
    h2 {
        @apply text-xl sm:text-3xl font-light;
        @apply mt-0;
    }
    pre {
        @apply my-0;
    }
}
.footer-links {
    a {
        @apply no-underline text-white mx-2;
    }
}
.fatbtn {
    @apply no-underline text-lg font-semibold text-foreground bg-background rounded-sm px-8 py-3; 
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    @apply px-2 md:px-0
}
.prose {
    ul {
        padding-inline-start: 1em;
    }
}



.navbar-form {
    position: relative;
  }
  
#suggestions {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: calc(100vw - 8rem);
    max-height: 500px;
    overflow: auto;
    @apply bg-background;
}

#suggestions a {
    display: block;
    text-decoration: none;
    padding: 0.75rem;
    margin: 0 0.5rem;
}

#suggestions a:focus {
    @apply bg-gray-100 dark:bg-zinc-700;
    outline: 0;
}

#suggestions div:not(:first-child) {
    @apply border-gray-200;
}

#suggestions div:first-child {
    margin-top: 0.5rem;
}

#suggestions div:last-child {
    margin-bottom: 0.5rem;
}

#suggestions a:hover {
    @apply bg-gray-100 dark:bg-zinc-800;
}

#suggestions span {
    @apply text-sm;
}

#suggestions span:first-child {
    @apply text-foreground;
    @apply font-semibold;
}

#suggestions span:nth-child(2) {
    @apply text-gray-700 dark:text-gray-400;
}

@media screen(sm) {
    #suggestions {
        width: 30rem;
    }

    #suggestions a {
        display: flex;
    }

    #suggestions span:first-child {
        width: 9rem;
        padding-right: 1rem;
        @apply border-gray-200;
        display: inline-block;
        text-align: right;
    }

    #suggestions span:nth-child(2) {
        width: 19rem;
        padding-left: 1rem;
    }
}

html .toggle-dark {
    display: block;
}

html .toggle-light {
    display: none;
}

html.dark .toggle-light {
    display: block;
}

html.dark .toggle-dark {
    display: none;
}