/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 2. Remove default margin */
* {
    margin: 0;
}
body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    font-family:Arial, Helvetica, sans-serif;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    margin-bottom:1em;
    text-align:center;
}
/*
9. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

/* simple overrides */

:root {
    --border : rgba(0,0,0,0.1);
    --standard-border-radius: 0.5rem;
    --primary: 
}
body {
    /* grid-template-columns: 1fr min(80rem, 90%) 1fr; */
    display:block; /* negates grid above for now 
    /* grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh; */
}
input {
    width:100%;
}
aside {
    float:none;
    width:auto;
    margin-inline-start:0px;
    padding:var(--gap);
    font-size:inherit;
}
section {
    margin:0px;
    border-bottom:none;
    padding:0px;
}
section:first-of-type {
    margin-bottom:0px;
}
button, .button {
    margin-bottom:0px;
}
img, video {
    border-radius:0%;
}

.alert.notification {
    position: fixed;
    background: black;
    width: 100vw;
    padding: 1rem;
    text-align: center;
    opacity:1;
    color:white;
    text-align:center;
    button {
        display:none;
    }
    animation: fadeOut 1s ease-in 5s forwards; 
}

@keyframes fadeOut {
    /* At the start of the fade (after the 5s delay) */
    from {
        opacity: 1;
    }
    /* At the end of the fade (1s later) */
    to {
        opacity: 0;
        /* Optional: hide the element completely and remove it from the flow after the animation finishes */
        visibility: hidden; 
        /* The display property can be animated in modern browsers (Chrome 116+) */
        display: none; 
    }
}


body.alias_home { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 40px auto; padding: 0 20px; background-color: #f6f8fa; }

body.alias_home {
    .container { background: #fff; border: 1px solid #d0d7de; border-radius: 6px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    h1 { border-bottom: 1px solid #afb8c1; padding-bottom: 10px; color: #24292f; }
    h2 { color: #0969da; margin-top: 25px; }
    code { background: #afb8c133; padding: 0.2em 0.4em; border-radius: 6px; font-family: monospace; }
    .steps { padding-left: 20px; }
    .step-item { margin-bottom: 20px; }
    a { color: #0969da; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .note { background: #fff8c5; border: 1px solid #d4a72c; padding: 15px; border-radius: 6px; margin-top: 20px; }
    p, u {
        margin-top:1rem;
    }
}