/** main variables */
:root {
    --color-light:     #bbb;
    --color-dark:      rgb(148, 148, 148);
    --color-highlight: rgb(255 192 76);
    --bg-color-dark:   rgb(0, 0, 0);
    --bg-color-light:  rgb(50, 50, 50);
    --font-family:     Monospace;

    --size-sm:       1pt;
    --size-md:       3pt;
    --size-lg:       6pt;
    --size-xl:      12pt;
    --size-xxl:     20pt;

    --font-size-sm:  9pt;
    --font-size-md: 10pt;
    --font-size-lg: 12pt;
    --font-size-xl: 14pt;

    --space-sm:     0.1in;
    --space-md:     0.5in;
    --space-lg:     1.0in;
}

html {
    scroll-padding-top: 1in;
    scroll-behavior:    smooth;
    background-color:   black;
}

/** style */
body {
    color:       var(--color-light);
    font-family: var(--font-family);  
    background:  linear-gradient(0deg, var(--bg-color-dark) , rgba(255,255,255,0.05), var(--bg-color-dark));
    overflow-y:  auto;
    margin:      0;
    /* padding: var(--space-md); */
}

p, li, a {
    font-size: var(--font-size-md);
}

h1 {
    font-size: var(--font-size-xl);
}

h2, h3, h4, h5 {
    font-size: var(--font-size-lg);
}

a, a:visited {
    color: var(--color-light)
}

.m-1 {
    margin-top:    0.5in;
    margin-bottom: 0.5in;
}

.mb-1 {
    margin-bottom: 0.5in;
}

.text-align-center {
    text-align: center;
}

.w-100 {
    width: 100%;
}

main {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    margin-left:     auto;
    margin-right:    auto;

    max-width:       800px;
    padding-left:    var(--space-sm);
    padding-right:   var(--space-sm);

    border-image:    linear-gradient(to bottom, transparent, rgba(200,100,0,0.2) 100dvh, transparent) 1;
    border-width:    0 0 0 1px;
    border-style:    solid;

    background-color: rgba(0,0,0,0.33);
}

@keyframes logo-fade-in {
    0% {
        opacity: 0;
        scale: 1.0;
    }

    1% {
        opacity:   0;
        transform: scale(.98) translateY(10px);
    }

    100% {
        opacity:   1;
        transform: scale(1) translateY(0px);      
    }
}

#logo {
    animation:  logo-fade-in 3.0s ease-out;
    max-width:  80dvw;
    max-height: 50dvh;
}

p {
    font-size: var(--font-size-md);
}

#author {
    padding-top: 0;
}

table {
    tr:nth-child(even) {
        background-color: rgba(255,255,255,0.05);
    }
    tr:nth-child(odd) {
        background-color: rgba(255,255,255,0.1);
    }
    td {
        padding: 5px;
    }
    td:nth-child(1) {
        text-align: right;
    }
}


@keyframes header-fade-in {
    0% {
       opacity:    0;
    }

    50% {
       opacity:    0.3;
    }

    100% {
        opacity:   1;
        transform: translateY(0);      
    }
}

header {
    position:         sticky;
    z-index:          100;
    top:              0;
    margin:           0;
    padding:          10px 0 10px 0;
    display:          flex;
    flex-direction:   row;
    justify-content:  center;
    align-items:      stretch;
    background-color: var(--bg-color-dark);
    box-shadow:       0px 0px 200px 0px rgba(255,255,255,0.2);
    border-bottom:    1px solid var(--bg-color-light);
    animation:        header-fade-in 3s ease-in-out;

    * > #icon {
        position: relative;
        height:   48px;
    }

    #menu {
        display:        flex;
        flex-direction: row;
        align-items:    center;
        gap:            1rem;            

        a.menu-item {
            font-size:       var(--font-size-lg);
            transition:      0.5s;
            text-decoration: none;

            &:hover {
                text-decoration: underline 2px;
                text-underline-offset: 6px;
            }

            &.active {
                text-shadow: 0px 0px 4px rgba(255,255,255,0.5);
                color: var(--color-highlight);
                text-decoration: underline 2px;
                text-underline-offset: 6px;
            }

            * {
                pointer-events: none;
            }
        }   
    }
}


.fullheight {
    height: 100svh;
}

.align-items-center {
    align-items: center;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

#credits {
    font-size: 75%;
    opacity: 0.2;
}

section {

    display:        flex;
    flex-direction: column;   
    align-items:    start;
    width:          100%;
    padding:        var(--space-sm);

    h1 {
        color:         var(--color-light);
        border-radius: 0.2rem;
        border-left:   0.4rem solid var(--color-highlight);
        padding:       0.4rem;
        padding-left:  0.8rem;
        background:    linear-gradient(178deg, rgba(255,255,255,0.2), transparent 20%);
        width:         95%;  
    }
}

footer {
    /*position: fixed;*/
    bottom:     0;
    left:       0;
    right:      0;
    padding:    var(--space-sm);
    font-size:  var(--font-size-sm);
    text-align: center;
    color:      var(--color-dark);
}

#services {

    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            0.5in;

    h1 {
        flex: none;
    }

    .service {

    }
}


@keyframes fadeIn {
    0%    { opacity: 0.0; }
    50%   { opacity: 0.0; }
    100%  { opacity: 1.0; }
}

@keyframes shake {
    0%   { transform: translateY(0px);   }
    10%  { transform: translateY(10px); }
    20%  { transform: translateY(0px); }
}

@keyframes blink {
    0%   { opacity:   1.0; }
    50%  { opacity:   0.5; }
    100% { opacity:   1.0; }
}

#home-arrow {
    
    animation-name:            fadeIn, shake;
    animation-delay:           0s    , 5s;
    animation-duration:        5s    , 0.5s;
    animation-iteration-count: 1     , 2;

    img {
        height:       0.75in;
        aspect-ratio: 1;
    }
}

/** 
===============================
   When screen is portrait
===============================
*/
@media (max-aspect-ratio: 1) {

    .portrait-col {
        flex-direction: column;
    }
}