/*
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
*/

@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

FG1 (Dark Blue)  : #4854A0      FG2 (Dark Red)   : #A02010
*/

.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
*/

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                        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;
    justify-self: center;
}
h1, h2 {font-weight: normal;}
h1 {
    color: #4854A0;
    text-shadow: 
        0px -1px #B0B0D0, 0px 1px #c0c0e0,
        -1px 0px #b0b0b0, 1px 0px #b0b0b0,
        3px 3px 4px #403060, 4px 4px 4px #908060
}
h1 span {font-weight: bold;}

main {
    display: grid;
}

footer {
    text-align: center;
    align-self: center;
    justify-self: center;
    margin: 4px;
    padding: 0px;
    border: 2px solid goldenrod;
    background-color: #AFE1FA;
    color: Black;
}


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

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    padding: 12px 8px;
}
h1 {
    margin: 4px 0px 8px 0px;
    font-size: 22px;
}
h1 span {font-size: 26px;}
h2 {
    margin: 0px 0px 4px 0px;
    font-size: 14px;
}
h3 {font-size: medium;} 

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    width: 75%;
    border-radius: 56px 56px 8px 8px;
    font-size: 12px;
}


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

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

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {
    grid-column: 1/end; 
    grid-row: 1/2;
    padding: 10px;
}
h1 {
    margin: 4px 0px 14px 0px; 
    font-size: 32px;
}
h1 span {font-size: 36px;}
h2 {
    margin: 0px 0px 8px 0px;
    font-size: 22px;
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    grid-column: 1/end; grid-row: 4/5;
    width: 45%;
    font-size: 16px;
}
}

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

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

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    border-radius: 80px 80px 24px 24px;
    width: 25%;
    font-size: 16px;
}
}

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

/* ~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~ */
header {width: 90%;}
h1 {
    margin: 2px 0px 6px 0px; 
    font-size: 36px;
}
h1 span {font-size: 42px;}
h2 {
    margin: 0px 0px 12px 0px;
    font-size: 28px
}

/* ~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~ */
footer {
    width: 25%;
    border-radius: 80px 80px 24px 24px;
    font-size: 18px;
}
}