/*
Title       : Default Stylesheet
Creation    : 13/11/21
Last Edit   : 16/02/2022

Description :
	Main file for styling webpages
    Contains the stylesheet for the header, menu, and footer of webpages.
*/

/* Color Variables */
:root {
    --background_0: #CB0077;
    --background_1: #7B0048;
    --background_2: #D854A1;
    --background_3: #37D12F;
    --highlight_0: #9751C0;
    --border_0: black;
    --text_0: #4aaa44;  /*37D12F*/
    --text_1: #9751C0;
    --canvas_border_0: #9751C0;
}

 /* Costum Font
 @font-face {
  font-family: MyWebFont;
  src: url('../fonts/Web437_IBM_VGA_8x16.woff');
}
*/

/**********************************
    DOMINATE ELEMENTS OF WEBPAGE
***********************************
Elements: html, body, *, *:before, *:after
html: root of the html document
body: contains all contents of an html document
*, *:before, *:after: selects all html elements in the document
*/
html {
    box-sizing: border-box;
    font-size: 18px;
    font-family: "Monospace";

    display: flex;
    align-items: top;
    justify-content: center;
}

body {
    /* size */
    min-height: 50vw;
    max-width: 800px;
    padding: 5% 1% 5% 1%;

    /* color */
    background-color: var(--background_0);
}

*, *:before, *:after {
    /* Normalize Document */
    box-sizing: inherit;
}

* {
    /* size */
    margin: 0;
    padding: 0;
}

/**********************************
            MAIN ELEMENTS
***********************************
Elements: Top Section, Bottom Section
Top Section: Contains the menu and the main section
Bottomw Section: contains the footer and the update
*/
#top_section {
    /* size */
    width: 100%;
    height: auto;
    

    /* flex-box */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#bottom_section {
    /* size */
    width: 100%;
    height: 15em;
    margin-top: 3%;

    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/**********************************
            TOP SECTION
***********************************
Elements: menu, main
menu: Contains the menu
main: contains the banners and content for the current page
*/
#top_section #menu {
    /* size */
    width: 15%;
    height: 500px;
    margin-top: 16%;
}

#top_section #main {
    /* size */
    width: 81%;
    height: auto; /* NO CHANGE */

    /* flex-box */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#top_section #menu, #top_section #main {
    /* color */
    background-color: var(--background_1);
    border: 2px solid var(--border_0);
}

/**********************************
            BOTTOM SECTION
***********************************
Elements: footer, update
footer: contains the footer
update: contains the recent update element
*/
#bottom_section #footer {
    /* size */
    width: 64%;
    height: 55%;
}

#bottom_section #update {
    /* size */
    width: 34%;
    height: 100%; /* NO CHANGE */
}

#bottom_section #footer, #bottom_section #update {
    /* color */
    background-color: var(--background_1);
    border: 2px solid var(--border_0);

    /* flex-box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/**********************************
            MENU
***********************************
Elements: link container
link container: contains the links of the menu
*/
#menu .link_container {
    /* size */
    width: 100%; /* if height or width changes, swap the rule in the media query */
    height: 20%;

    /* color */
    background-color: var(--background_0);

    /* flex-box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/**********************************
                MAIN
***********************************
Elements: content of main, banner header, banner bottom
content of main: contains the content of the current document
banner header: the banner at the top
banner bottom: the banner at the bottom
*/
#main .content_of_main {
    /* size */
    width: 100%;
    height: 64%;
    min-height: 500px;
    padding: 3% 6% 8% 6%;

    /* color */
    background-color: var(--background_0);

    /* flex-box */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 auto;
}

#main .content_of_main #introduction {
    /* size */
    width: 100%;
    height: 45%;
}

#main .content_of_main #connect {
    /* size */
    width: 100%;
    height: 20%;
}

#main .content_of_main #links {
    /* size */
    width: 100%;
    height: 30%;

    /* flex-box */
    flex-direction: column;
}

#introduction, #links {
    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#connect {
    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.connectimage {
    width: 100%;
}

.imagelink {
    width: 20%;
    padding: 1%;

    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
width of banners will always want to be the same as the container for the main info
height of the banners should change depending on the width
Use padding to control aspect ratio 1:6?

now the height of the content will have to fill the gaps?
*/
.banner_header, .banner_bottom {
    /* size */
    width: 100%;
    padding-top: 2%;

    /* color */
    background-color: var(--background_0);
}

#banner_header_img {
    /* size */
    width: 100%;
    height: 100%;
}

.banner_header {
    border-top-left-radius: 30%;
    border-top-right-radius: 30%;
    user-select: none;
}

.banner_bottom {
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    pointer-events: none;
    user-select: none;
}

/**********************************
               FOOTER
***********************************
Elements: container
container: contains the information of the footer
*/
#footer .container {
    /* size */
    width: 100%;
    height: 100%;

    /* color */
    background-color: var(--background_0);

    /* appearance */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    /* flex-box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/**********************************
               UPDATE
***********************************
Elements: title, information, container
title: title of recent update
information: about the recent update
contianer: container for title and information
*/
#update #title {
    /* size */
    height: 20%;
    width: 100%;

    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: center;
}

#update #information {
    /* size */
    height: 70%;
    width: 100%;
    padding: 3%;

    /* flex-box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

#update .container {
    /* size */
    width: 100%;
    height: 100%;

    /* color */
    background-color: var(--background_0);

    /* appearance */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;

    /* flex-box */
    display: flex;
    flex-direction: column;
}

/**********************************
               OTHER
***********************************
other: menu interaction, link decorations
menu interaction: contains behavior for interacting with the menu
link decorations: contains rules for links
*/

/* menu ineraction */
.link_container:hover {
    background-color: var(--highlight_3) !important;
}

#update .container:hover {
    background-color: var(--highlight_0);
}

/* link decorations */
#menu a, #update a {
    text-decoration: none;
    color: black !important;
}

#main a, #footer a {
    text-decoration: none;
    color: var(--text_0);
}

#main a:hover, #footer a:hover {
    color: var(--text_1);
}

i {
    color: black;
}

.signature {
    rotate: -10deg;
    font-size: x-large;
}

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

.img-style-1 {
    align-items: center;
    border: 2px solid;
}

.img-resize-1 {
    width: 80%;
}

.img-resize-2 {
    width: 60%;
}

.border-1 {
    border-bottom: 2px solid;
}

/**********************************
            MEDIA QUERIES
***********************************
/* In order for an absolute breakpoint (pixels) to work,
I need to have the meta tag control the layout for mobile browser
(pointer:coarse) is a secondary option for identifying mobile browsers
*/
/*@media (pointer:coarse) {*/
@media screen and (max-width: 650px) {
    html {
        /* size */
        width: 100vw !important;
        height: auto;
        min-height: 100vh !important;
        margin: 0 !important;
    }

    body {
        /* size */
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 1% 1% 0 1% !important;
    }

    #top_section, #bottom_section {
        width: 100% !important;

        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    /* menu */
    #top_section #menu {
        width: 100%;
        height: 100px;
        margin-top: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    #menu a {
        width: 20%;
        height: 100%;
    }

    #menu .link_container {
        width: 100% !important;
        height: 100% !important;
    }

    #menu .link_container .title {
        font-size: 11px;
    }

    /* main section */
    #top_section #main {
        width: 100%;
        height: auto;
        margin: 1% 0 1% 0;
    }

    /* Update */
    #update {
        visibility: hidden;
        height: 0;
        width: 0;
    }

    /* Footer */
    #bottom_section #footer {
        width: 100%;
        min-height: 40%;
    }
}