/* Created by - Aye Chan Aung Thwin */

/* https://www.dafont.com/seven-segment.font */
@font-face {
    font-family: SevenSegFont;
    src: url(../font/DSEG7ModernMini-Bold.ttf);
}


/* https://www.1001fonts.com/short-descenders-fonts.html */
@font-face {
    font-family: DaggerSquareFont;
    src: url(../font/DAGGERSQUARE.otf);
}

/* https://all-free-download.com/font/download/zado_6919034.html */
@font-face {
    font-family: ZadoFont;
    src: url(../font/Zado.ttf);
}

/* https://www.dafont.com/astronomus.font */
@font-face {
    font-family: AstroFont;
    src: url(../font/Square\ One.ttf);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* heading */
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-h4: 0.7rem;
    --fs-h5: 0.501rem;
    --fs-h6: 0.4167rem;
    --fs-body: 1rem;

    /* fonts */
    --ff-dagger-square-font: DaggerSquareFont;
    --ff-dot-font: ZadoFont;
    --ff-seven-seg-font: SevenSegFont;
    --ff-astro-font: AstroFont;

    --border-dark: 
    -1px -1px 0 black,
    0 -1px 0 black,
    1px -1px 0 black,
    1px 0 0 black,
    1px 1px 0 black,
    0 1px 0 black,
    -1px 1px 0 black,
    -1px 0 0 black;

    --cl-1: #848484;
    --cl-2: #2F586A;
    --cl-3: #01B5D0;
    --cl-4: #ED063E;
    --cl-5: #FFAD26;
    --cl-6: rgb(11, 150, 11);
}

@media (min-width: 700px) {
    :root {
        /* heading */
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-h4: 1rem;
        --fs-h5: 0.75rem;
        --fs-h6: 0.5rem;
        --fs-body: 0.5rem;
    }
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
    margin: 0 auto;
    font-size: var(--fs-h3); 
}
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

body {
    margin: 0 auto;
    background: rgb(25, 25, 25);
}

section {
    display: block;
    margin: 3rem auto;
    justify-content: center;
}

p {
    font-size: var(--fs-h3);
    margin: 0 auto;
    text-indent: 2em;
    line-height: 2rem;
    text-align: justify;
    color: white;
}

.code {
    margin: 0 auto;
    color: yellow;
    text-shadow: var(--border-dark);

    font-size: 1.25rem;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

.equation {
    color: green;
    font-weight: bold;
    font-style: italic;
    text-shadow: var(--border-dark);
}

.comment {
    color: grey;
    font-style: italic;
    text-shadow: var(--border-dark);
}

.fyi {
    color: var(--cl-4);
    text-shadow: var(--border-dark);
}

.container {
    display: block;
    margin-left: 50px;
    margin-right: 50px;
    font-size: var(--fs-h3);
}

.title-design {
    display: block;
    margin: 0 auto;
}

.title-design .main-title {
    text-align: center;
    margin: 0 auto;
    font-family: var(--ff-dagger-square-font);
    padding-top: 2rem;

    color: white;

    text-shadow: var(--border-dark);
}

.title-design .main-title span:nth-child(1) {
    color: var(--cl-1);
}

.title-design .main-title span:nth-child(2) {
    color: var(--cl-2);
}

.title-design .main-title span:nth-child(3) {
    color: var(--cl-3);
}

.title-design .main-title span:nth-child(4) {
    color: var(--cl-4);
}

.title-design .main-title span:nth-child(5) {
    color: var(--cl-5);
}

.title-design .main-title span:nth-child(6) {
    color: var(--cl-6);
}

.title-design .main-subtitle {
    text-align: center;
    margin: 0 auto;
    font-family: var(--ff-dagger-square-font);
    padding-bottom: 2rem;

    color: white;

    text-shadow: var(--border-dark);
}

.title {
    display: inline;
    padding: 2px;
    color: white;
    text-shadow: var(--border-dark);
    border-radius: 5px;
    border: 1px solid white;
}

.animation-container {
    display: flex;
    justify-content: center;
    margin: 1rem auto;
}

.screen {
    --screen-color: #03414b; 

    position: relative;

    width: 320px;
    height: 180px;
    border: 2px solid black;
    background: var(--screen-color);

    overflow: hidden;
}

.screen .bird-name {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);
}

.bird {
    --bird-LR: 50;
    --bird-TB: 50;

    --bird-size: 50;
    --bird-ear: 50;
    --bird-throat: 50;

    --is-hidden: visible;

    position: absolute;
    width: calc(var(--bird-size) * 1%);
    height: calc(var(--bird-size) * 1%);

    top: calc(var(--bird-TB) * 1%);
    left: calc(var(--bird-LR) * 1%);

    transform: translate(-50%, -50%);

    border: 2px dashed black;

    background: transparent;
}

.bird::before {
    content:'';
    position: absolute;
    width: 25px;
    height: 50px;

    top: calc(var(--bird-ear) * 1%);
    left: -12px;

    transform: translate(-50%, -50%);
    border-radius: 50px 0 0 50px;

    background: black;

    visibility: var(--is-hidden);
}

.bird::after {
    content:'';
    position: absolute;
    width: 25px;
    height: 50px;

    top: calc(var(--bird-throat) * 1%);
    right: -37.5px;

    transform: translate(-50%, -50%);
    border-radius: 0 50px 50px 0;

    background: black;

    visibility: var(--is-hidden);
}

.bird-name {
    top: -22px;
}

.pipe {
    --left-pipe-length: 50;
    --mid-pipe-length: calc(var(--bird-throat) - var(--bird-ear));
    --right-pipe-length: calc(100 - var(--left-pipe-length));
    
    --hide-left-pipe: 0;
    --hide-mid-pipe: 0;
    --hide-right-pipe: 0;

    --hide-pipes-color: var(--screen-color);

    --color-pipe: red;
}

.left-pipe {
    position: absolute;
    width: calc(var(--left-pipe-length) * 1%);
    height: 2px;

    top: calc(var(--bird-ear) * 1%);
    transform: translateY(calc(var(--bird-ear) * -1%));

    background: var(--color-pipe);
}

.left-pipe::after {
    content:'';
    position: absolute;

    width: calc(var(--hide-left-pipe) * 1%);
    height: 100%;

    background: var(--hide-pipes-color);
}

.mid-pipe {
    position: absolute;
    width: 2px;
    height: calc(var(--mid-pipe-length) * 1%);
    
    top: calc(var(--bird-ear) * 1%);

    left: calc(var(--left-pipe-length) * 1%);
    transform: translateX(-50%);

    background: var(--color-pipe);
}

.mid-pipe::after {
    content:'';
    position: absolute;

    width: 100%;
    height: calc(var(--hide-mid-pipe) * 1%);

    background: var(--hide-pipes-color);
}

.right-pipe {
    position: absolute;
    width: calc(var(--right-pipe-length) * 1%);
    height: 2px;

    right: 0;

    top: calc(var(--bird-throat) * 1%);
    transform: translateY(calc(var(--bird-throat) * -1%));

    background: var(--color-pipe);
}

.right-pipe::after {
    content:'';
    position: absolute;

    width: calc(var(--hide-right-pipe) * 1%);
    height: 100%;

    background: var(--hide-pipes-color);
}

.input {
    --from-top: 0;
    --from-left: 0;
    --end-point: 0;
    --hide-until: 0;

    position: absolute;

    top: calc((var(--bird-ear) + (var(--from-top))) * 1%);
    left: calc(var(--from-left) * 1%);

    transform: translate(-50%, -50%);

    text-shadow: var(--border-dark);

    /* z-index: 10; */
}

.sample {
    --bird-LR: 47;

    --bird-size: 35;
    --bird-ear: 50;
    --bird-throat: 50;
}

.sample-input-1 {
    --from-left: -55;
}

.sample-input-2 {
    --from-left: 160;
}

.idiot {
    --bird-size: 60;
    --bird-ear: 50;
    --bird-throat: 50;
}

.idiot-input {
    --from-left: -20;
}

.kestrel-a {
    --bird-size: 70;
    --bird-ear: 30;
    --bird-throat: 70;
}

.kestrel-a-input {
    --from-left: -17;
}

.kestrel-b {
    --bird-TB: 63;
    --bird-size: 30;
}

.kestrel-b-input {
    --from-left: -40;
}

.kestrel-b .pipe {
    visibility: hidden;
}

.kestrel1-a {
    --bird-LR: 60;

    --bird-size: 55;
    --bird-ear: 20;
    --bird-throat: 60;
    
    z-index: 1;
}

/* .kestrel1-a .pipe {
    --left-pipe-length: 40;
} */

.kestrel1-a-input {
    --from-top: -30;
    --from-left: -39;
}

.kestrel1-b {
    --bird-LR: 60;

    --bird-TB: 55.5;
    --bird-size: 35;
}

.kestrel1-b .pipe {
    visibility: hidden;
}

.idiot1 {
    --bird-size: 15;
}

.bird-name.kite {
    content:'';
}

.kite-a {
    --bird-size: 70;
}

.kite-a-input {
    --from-left: -17;
}

.kite-a .pipe .left-pipe {
    visibility: hidden;
}

.kite-b {
    --bird-size: 30;
}

.kite-b-input {
    --from-left: -40;
    --end-point: 210;
    --hide-until: 172;
}