/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//   copyright (c) 2025-2026, marcus fehse                                                    //
//   all rights reserved.                                                                     //
//                                                                                            //
//   this file is part of a under construction website coded for   isidoo.net   by            //
//                                                                                            //
//        marcus fehse <marcus@fehse.com>                                                     //
//                                                                                            //
//                                                        last edited on 20–FEB-2026 by mrx   //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

@charset 'UTF-8';

@import url('../fonts/merriweather.css');

/* ----- variables ----- */

:root {
    --background-color: #111111FF;
    --deep-background-color: #000000FF;
    --duration-fadein: 2s;
    --font-family: 'Merriweather', georgia, serif;
    --font-size: var(--font-size-base); /* TODO(mrx): check @media too */
    --font-size-base: 2.0vmax;
    --full-line: 1.2rem;
    --letter-spacing: 0.01333rem;
    --line-height: calc(var(--font-size) * 1.75);
    --link-color: #9933FFCC;
    --link-color-alternative: #FF3399CC;
    --scroll-factor: 3.0;
    --spot-color: #FFFFFFCC;
    --text-color: #FFFFFF66;
}

/* ----- website style ----- */

html { /* foundation */
    background-color: var(--deep-background-color);
}

body { /* the content */
    /* background-color: var(--background-color); */
    color: var(--text-color);
}

canvas {
    left: 0;
    position: absolute;
    top: 0;
    z-index: -999;
}

footer {
    bottom: 0;
    color: var(--spot-color);
    position: absolute;
    text-align: center;
    width: 100vw;
    z-index: 999;
}

* {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: 300;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    padding: 0;
}

a {
    color: var(--link-color);
    font-weight: 400;
    padding: 0 calc(0.125 * var(--tab-size));
    text-decoration: none;
}

a:visited {
    color: var(--link-color);
}

a:hover,
a:focus,
a:active {
    color: var(--link-color-alternative);
    font-weight: 600;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.fade-in {
    -moz-animation: fadein var(--duration-fadein); /* firefox < 16 */
    -ms-animation: fadein var(--duration-fadein); /* internet explorer */
    -o-animation: fadein var(--duration-fadein); /* opera < 12.1 */
    -webkit-animation: fadein var(--duration-fadein); /* safari, chrome and opera > 12.1 */
    animation: fadein var(--duration-fadein);
}

.scroll-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 1;
}

.scroll-text {
    display: inline-block;
    font-size: calc(var(--font-size) * var(--scroll-factor));
    height: 100%;
    line-height: calc(var(--line-height) * var(--scroll-factor));
    padding: calc(1.33333 * var(--full-line)) 0;
    text-align: center;

    /* animation properties */
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);

    -moz-animation: my-animation 20.0s 3.33333s linear infinite;
    -webkit-animation: my-animation 20.0s 3.33333s linear infinite;
    animation: my-animation 20.0s 3.33333s linear infinite;
}

.flex-container {
    /* background-color: #FF00FF33; */
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.333333 * var(--full-line));
    justify-content: space-around;
    padding: calc(2.0 * var(--full-line)) calc(0.66667 * var(--full-line));
    position: relative;
    text-align: center;
}

.flex-container div {
    /* background-color: #FFFF0066; */
    padding: 0 calc(0.66667 * var(--full-line));
}

@-moz-keyframes my-animation { /* for firefox */
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(-100%); }
}

@-webkit-keyframes my-animation { /* for chrome */
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(-100%); }
}

@keyframes my-animation {
    from {
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}