/* ************************************************************
    Formatting template shared between all pages
    Author: Joel Leckie

    File created: Jan. 2022
    Revisions: 

*/

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Lustria&family=Luxurious+Roman&family=PT+Mono&family=Ultra&family=Varela+Round&display=swap');
/*
font-family: 'Black Ops One', cursive;      //
font-family: 'Luxurious Roman', cursive;    //
font-family: 'PT Mono', monospace;          //
font-family: 'Courier Prime', monospace;    //
font-family: 'Lustria', serif;              //
font-family: 'Ultra', serif;                //
font-family: 'Varela Round', sans-serif;    //
*/
/*
BG1 (Dark Blue)  : #0A191E      BG2 (Dark Green) : #143C0A
FG1 (Light Green): #3CB42D      FG2 (Light Blue) : #AFE1FA
FG3 (Off White)  : #F3FBF7
*/

.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48}
/*
<span class="material-symbols-outlined">html</span>         // eb7e
<span class="material-symbols-outlined">css</span>          // eb93
<span class="material-symbols-outlined">javascript</span>   // eb7c
<span class="material-symbols-outlined">php</span>          // eb8f
*/

/*
Common Media Sizes:
  | 320px - 480px || 481px - 768px || 769px - 1024px || 1025px - 1200px || 1201px+     |
    Mobile           Tablet           Laptop            Desktop            LargeScreen
Common Breakpoints:
  | 320px   | 480px | 768px | 1024px | 1200px |     | 600px | 900px | 1200px |
    x-Small   Small   Medium  Large    X-Large        Small   Medium  Large
*/

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                        GENERAL FORMATTING                         ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
body {
    background-color: #0A191E; 
    color: #F3FBF7;
    font-family: 'Lustria', sans-serif;
    cursor: url(../MEDIA/LogoDragon.png), auto;
}

header {
    font-family: 'PT Mono', monospace;
    text-align: center;
    background-image: url(../MEDIA/Japan_Backdrop.jpg);
}
h1, h2 {font-weight: normal;}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            MOBILE VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
/* ~~~~~~~~~~~~~~~~~~~~ BODY ~~~~~~~~~~~~~~~~~~~~ */
body {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}
p {
    font-size: smaller;
}
h3 {
    font-size: medium;
} 

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    height: 84px;
    padding: 12px 8px;
    background-position: 10% 10%;
}
h1 {
    margin: 4px 0px 8px 0px; 
    font-size: 24px; 
}
h2 {
    margin: 0px 0px 4px 0px;
    font-size: min(4.75vw, 16px);
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    text-align: center;
    align-self: center;
    width: 75%;
    margin: 4px;
    padding: 0px;
    border: 2px solid goldenrod;
    border-radius: 56px 56px 8px 8px;
    background-color: #AFE1FA;
    color: #0A191E;
    font-size: small;
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV BAR ~~~~~~~~~~~~~~~~~~~~ */
nav {
    align-self: center;
    text-align: left;
    padding: 4px; margin: 4px;
    width: 90%;
    background-color: #143C0A;
    border: 8px groove #0A191E;
    display: block;
}

.navMenu {
    position: relative;
    margin: 8px;
}

.navButton {
    font-size: inherit;
    font-family: 'Black Ops One';
    color: #0A191E;
    text-align: left;
    height: 36px;
    width: 160px;
    padding: 4px;
    margin: 4px;
    border-width: thick;
    border-style: double;
    border-color: #0A191E;
    background-color: #3CB42D
}
.navButton:focus{
    background-color:#143C0A;
    color:#3CB42D;
}

.navBar {
    position: relative;
    display: inline-block;
    padding: 8px 4px;
}

.navLink {
    display: inline-block;
    position: relative;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 8px 12px;
    margin: 2px;
    line-height: 12px;
    font-size: 14px;
    font-family: 'Black Ops One';
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight:normal;
    border: 1px solid #0A101E;
    color:#0A191E;
}

.navLink:visited {color: #3CB42D; text-decoration-style: dashed;}
.navLink:hover {color: #AFE1FA; text-decoration-style: solid;}
.navLink:active {color:#F3FBF7; text-decoration-style: solid;}


/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            TABLET VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 481px) {
/* ~~~~~~~~~~~~~~~~~~~~ BODY ~~~~~~~~~~~~~~~~~~~~ */
body {
    row-gap: 4px;
}
    
/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    height: 104px;
    padding: 16px 12px;
    background-position: 25% 45%;
}
h1 {
    margin: 4px 0px 12px 0px; 
    font-size: 32px;
}
h2 {
    margin: 0px 0px 6px 0px;
    font-size: 22px;
}
    
/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    width: 60%;
    border-radius: 64px 64px 8px 8px;
    font-size: 14px;
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV BAR ~~~~~~~~~~~~~~~~~~~~ */
    nav {
        display: inline-flex;
        text-align: center;
        padding: 4px 20px 6px 4px;
        max-width: 90%;
        border-width: 12px;
    }
    
    .navMenu {
        margin: auto;
    }

    .navButton {
        width: 22vw;
        min-width: 128px;
        font-size: medium;
    }

    .navBar {
        position: absolute;
        display: block;
        text-align: left;
        padding: 2px;
    }

    .navLink {
        text-align: left;
        line-height: 20px;
        font-size: medium;
        padding: 2px 4px 6px;
        width: 160px;
        min-width: unset;
        background-color: #143C0A;
        border: 2px solid #3CB42D;
    }
}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            LAPTOP VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 769px) {
/* ~~~~~~~~~~~~~~~~~~~~ BODY ~~~~~~~~~~~~~~~~~~~~ */
body {
    display: grid;
    grid-template-columns: 5vw 1fr 5vw;
    row-gap: 6px;
}

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    grid-column: 1/end; 
    grid-row: 1/2;
    background-position: 0% 9%;
    height: 128px;
    padding: 12px;
}
h1 {
    margin: 8px 0px 16px 0px; 
    font-size: 36px;
}
h2 {
    margin: 0px 0px 8px 0px;
    font-size: 24px;
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    grid-column: 1/end; grid-row: 4/5;
    justify-self: center;
    width: 45%;
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV BAR ~~~~~~~~~~~~~~~~~~~~ */
nav {
    grid-column: 2/3; grid-row: 2/3;
    padding: 4px; margin: unset;
    justify-self: center;
    width: 95%; max-width: unset;
    border-width: 16px;
    border-style: ridge;
}

.navMenu{
    margin: 2px 12px;
}

.navButton{
    width: 160px;
    min-width: unset;
}

.navBar {}

.navLink {
    line-height: 28px;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

main {grid-column: 2/3; grid-row: 3/4;}

main p {
    border: 2px dashed #143C0A;
    border-radius: 16px;
    padding: 4px 8px;
    margin: 8px;
}

}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                           DESKTOP VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 1025px) {
/* ~~~~~~~~~~~~~~~~~~~~ BODY ~~~~~~~~~~~~~~~~~~~~ */
body {
    row-gap: 8px;
}

/*    .indexBox, .aboutBox, .schoolBox, .feedBox, .employBox, .accompBox {
    display: grid;
    grid-template-columns: 10vw 80vw 10vw;
    grid-template-rows: 15vh 15vh 1fr 1fr 25vh;
}
*/

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    background-position: 0% 37%;
    width: 95%;
    justify-self: center;
}
h1 {
    margin: 4px 0px 8px 0px; 
    font-size: 40px;
}
h2 {
    margin: 0px 0px 10px 0px;
    font-size: 26px
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    width: 25%;
    border-color: #0A191E;
    border-radius: 80px 80px 24px 24px;
    background-color: #F3FBF7;
    color: #0A191E;
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV BAR ~~~~~~~~~~~~~~~~~~~~ */
nav {
    display: inline-flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 8px 4px;
    width: 105%;
    border-color: #0A191E;
    background-color: #3CB42D;
}

.navMenu {margin: 2px;}

.navButton {
    font-size: 20px;
    height: 56px;
    width: 224px;
    text-align: center;
    border-width: 8px;
    border-style: ridge;
    border-color: #143C0A;
    background-color: #0A101E;
    color: #3CB42D;
}
.navBar{
    background-color: #0A101E; 
    padding: 4px;
    margin: -4px 4px;
    border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #143C0A;
    display: none;
}

.navButton:focus{
    background-color:#0A191E;
    color:#3CB42D;
}

.navButton:hover {
    background-color: #143C0A;
    color: #AFE1FA}

.navMenu:hover .navBar {
    background-color: #0A191E;
    display: block;
} 

.navLink {
    line-height: 32px;
    text-align: center; 
    font-size: 18px;
    width: 176px;
}

main {}

main p {
    border-color: #0A191E;
    border-radius: 24px;
}

}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                         LARGE SCREEN VIEW                         ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 1201px) {
/* ~~~~~~~~~~~~~~~~~~~~ BODY ~~~~~~~~~~~~~~~~~~~~ */
body {
    row-gap: 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    height: 136px;
    background-position: 6% 69%;
    width: 90%;
}
h1 {
    margin: 2px 0px 6px 0px; 
    font-size: 44px;
}
h2 {
    margin: 0px 0px 12px 0px;
    font-size: 28px
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    width: 25%;
    border-color: #0A191E;
    border-radius: 80px 80px 24px 24px;
    background-color: #F3FBF7;
    color: #0A191E;
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV BAR ~~~~~~~~~~~~~~~~~~~~ */


}