/* avoid uncessesary horz. & vert. scrollbar by hiding overflow. Do NOT do this on body !!! */
body, #page { margin: 0px; padding: 0px; text-align: center; }
#page { margin: auto; overflow: hidden;}

/* smaller-size screens content across full page width */
#container{ margin: 0px auto; padding: 10px 0px; width: 100%; }
.horzbar, #rows, #flexfooter { margin: 0px auto; padding: 0px; width: 100%; }
.horzbar { display: flex; flex-direction: row; }
#flexfooter { margin-top: 5px; justify-content: center; }

/* 6 blocks in horizontal bar; all same width */
[class*="col"]{ display: flex; margin: 0px; padding: 0px; height: 10px; width: 8.33%; }

/* always show header on 1 line */
#welcome { margin: 0px; padding: 5px 0px; width: 100%; justify-content: center; }

/* text on top/bottom of image */
#main { display: flex; flex-direction: column; margin: 0px; padding: 0px; }   

/* hide blank space at bottom of image; can NOT use "display: block" because text and image are flex boxes */
#d_image { margin: 0px; padding: 0px;  width: 100%; justify-content: center; line-height: 0px; }

/* set image at full page width, but maximize width as well */           
#dragon_in_egg { margin: 0px; padding: 0px; max-width: 601px; width: 100%; }

/* show 'under construction' texts on 2 lines 
   -> show the lines as 'column' 
   -> distance between the lines not necessary, but some spacing towards image and horz bar */
#d_construction { margin: 0px; padding: 10px 0px;  width: 100%; justify-content: center; }
#d_construction { display: flex; flex-direction: column;}
#construction, #apologies { margin: 0px; padding: 0px;  width: 100%; justify-content: center; }

/* for small-size screens copyright text on 2 lines; don't show separator when copyright on 2 lines  */
#flexfooter { display: flex; flex-direction: column; }
#copyright_my, #copyright_sep, #copyright_other{ margin: 0px; padding: 0px; text-align: center; }
#copyright_my, #copyright_other{ width: 100%; }
#copyright_sep{ width: 60px; display: none; }

/* tweaks for mid-size screens */
@media only screen and (min-width: 768px){
    /* Copyright text on single line; use separator for spacing */
    #flexfooter{ flex-direction: row; }
    #copyright_sep{ display: initial; }    
    #copyright_my, #copyright_other{ width: auto; }    
}

/* tweaks for mid-size screen only, don't change for bigger screens */
@media only screen and (min-width: 768px) and (max-width: 991px){
    /* show 'under construction' texts on 1 line -> as row, but with some distance between */
    #d_construction { display: flex; flex-direction: row;}
    #construction, #apologies {width: auto; }
    #construction {padding-right: 5px;}
    #apologies {padding-left: 5px;}
}

/* tweaks for bigger screens only */
@media only screen and (min-width: 992px){
    /* content across 85% of page */
    #container { width: 85%; }

    /* show 'under construction' text to left of image -> lines are already showing as column */
    #main { display: flex; flex-direction: row-reverse; padding: 0px 20px 20px 0px; }
    /* add some spacing between the 2 texts */
    #construction {padding-bottom: 20px; }
    #apologies {padding-top: 20px; }
}

/* link animations / colour changes to horizontal bar */
.col1{ animation-name:  animate_col1; }
.col2{ animation-name:  animate_col2; }
.col3{ animation-name:  animate_col3; }
.col1, .col2, .col3{ animation-duration: 3s; animation-iteration-count: infinite; }