/* 
    IMPORTANT!!

    Make sure to separate Layout and Design styling
    Just to make CSS rules reusable and manageable

 */


/* $$ Fonts */
@import url(fonts.css);
html, input, button {
    font-size: 0.95em;
}

/* $$ Primary Look */
html{
    /* layered background */
    background-color: #0000000c;
    background: url(/img/bg-stripe-09.png);
    background-attachment: fixed;
    /* pick a better font */
    font-family: 'Zen Maru Gothic', 'National Park', 'Segoe Fluent Icons', sans-serif;
    margin: 0;
    --maxWidth: 1024px;
    transition: width 250ms;
}

body {
    margin: 0;
    padding: 0;
}

.window {
    box-sizing: border-box;
    margin: 4px;
    margin-bottom: 0.75em;
    padding: 0.3em;
    border: 3px solid #fff;
    border-radius: 4px;
    color: #fff;
    background-color: #5a5a5a;
    box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.5);
    background-color: var(--win-bg-flat);
    background: linear-gradient(0deg, var(--win-bg-bot) 0%, var(--win-bg-mid) 10%, var(--win-bg-top) 100%);
}

.window h2 {
    margin: 8px 0;
    font-family: 'National Park';
    font-weight: 800;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: var(--inset-bg);
    font-size: 2.25em;
}

.window h3 {
    margin-bottom: 0;
    border-bottom: 1px solid #00000088;
}
.window p {
    margin: 0;
    margin-bottom: 1em;
}

.window ::selection{
    background-color: var(--inset-bg);
    color: var(--win-bg-top);
}
.window{
    --win-bg-flat: #c2c2c2;
    --win-bg-top: #fff;
    --win-bg-mid: #dadada;
    --win-bg-bot: #949494;
    --inset-bg: #7e7e7e;
}
.col_turquoise{
    --win-bg-flat: #13FFF0;
    --win-bg-top: #fff;
    --win-bg-mid: #13FFF0;
    --win-bg-bot: #31ada2;
    --inset-bg: #008377;
}
.col_yellow{
    --win-bg-flat: #FEF478;
    --win-bg-top: #fff;
    --win-bg-mid: #ffef0a;
    --win-bg-bot: #E68F2E;
    --inset-bg: #E68F2E;
}
.col_purple{
    --win-bg-flat: #833ab4;
    --win-bg-top: #fff;
    --win-bg-mid: #833ab4;
    --win-bg-bot: #180550;
    --inset-bg: #180550;
}
.col_pink{
    --win-bg-flat: #ec026d;
    --win-bg-top: #fff;
    --win-bg-mid: #ec026d;
    --win-bg-bot: #b30839;
    --inset-bg: #a5051d;
}
.col_blue{
    --win-bg-flat: #2c97f9;
    --win-bg-top: #fff;
    --win-bg-mid: #2c97f9;
    --win-bg-bot: #0a48a3;
    --inset-bg: #0a48a3;
}
.col_green{
    --win-bg-flat: #0aa32b;
    --win-bg-top: #fff;
    --win-bg-mid: #94f92c;
    --win-bg-bot: #0aa32b;
    --inset-bg: #05791e;
}
.col_red{
    --win-bg-flat: #a30a39;
    --win-bg-top: #fff;
    --win-bg-mid: #f92c2c;
    --win-bg-bot: #a30a39;
    --inset-bg: #a30a39;
}
.col_orange{
    --win-bg-flat: #ff6708;
    --win-bg-top: #fff;
    --win-bg-mid: #ffab00;
    --win-bg-bot: #ff6708;
    --inset-bg: #e13100;
}
.col_lightPink{
    --win-bg-flat: #ff496b;
    --win-bg-top: #fff;
    --win-bg-mid: #ff95b6;
    --win-bg-bot: #ff496b;
    --inset-bg: #ff0032;
}
.col_blurple{
    --win-bg-flat: #6a00ff;
    --win-bg-top: #fff;
    --win-bg-mid: #9350ff;
    --win-bg-bot: #6a00ff;
    --inset-bg: #2a00b5;
}
.col_deepCyan{
    --win-bg-flat: #466a68;
    --win-bg-top: #fff;
    --win-bg-mid: #00a2a2;
    --win-bg-bot: #466a68;
    --inset-bg: #004d48;
}

.window-content {
    overflow: hidden;
    background-color: #fff;
    color: rgb(43, 43, 43);
    margin: 0px 4px 8px;
    padding: 12px;
    box-shadow: inset 0px 0px 3px 0px #00000088, 0px -2px 2px 2px hsla(0, 0%, 0%, 0.44), 0px 2px 2px 2px #ffffff;
}

footer {
    /* background: #000000; */
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 91%, rgba(0, 0, 0, 0.7) 100%); */
    /* padding-top: 1.5em; */
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.85em;
}

footer>.window{
    max-width: calc(var(--maxWidth) - 8px);
    margin-left: auto;
    margin-right: auto;
    /* 
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; 
    */
}
footer>.window>.window-content{
    cursor: auto;
    /*
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 4em;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; 
    */
}

/* Primary Look End */

/* $$ Mid Content Layout */
#mid {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxWidth);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 1em;
    transition: all 250ms;
}

main {
    flex: 1;
}

aside {
    flex: 0 1 420px;
}

@media (max-width: 1024px) {
    html {
        --maxWidth: 640px;
    }
    #mid {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
    }
    main, aside {
        flex: 1;
    }
}

@media (max-width: 720px) {
    html {
        --maxWidth: 530px;
    }
}
/* Mid Content Layout END */

/* $$ Header + Navbar combo */
header {
    margin-bottom: 1em;
}
header h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'National Park', 'Segoe Fluent Icons', sans-serif;
    font-size: 4em;
    max-width: var(--maxWidth);
    margin-left: auto;
    margin-right: auto;
}
header h1 a {
    text-decoration: none;
    color: #ffffff;
    text-shadow: -2px 2px 8px #31ada2;
}
header section {
    /* FIXME: just here for backup */
    cursor: auto;
    background: linear-gradient(0deg, #e4f3f4 0%, #ffffff 100%);
    padding: 4px;
    border-top: 1px solid #A5D7DC;
    border-bottom: 1px solid #A5D7DC;
    box-shadow: 0px 2px 3px 1px hsla(0, 0%, 0%, 0.25);;
}
header section nav {
    max-width: var(--maxWidth);
    margin-left: auto;
    margin-right: auto;
}
header section nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* padding-left: 6em; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    
    transition: all 250ms;
}
header section nav ul li {
    /* FIXME:background-color: ; */
    cursor: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

header section nav ul li:not(:last-child)::after {
    content: "";
    border-left: 1px solid #00000033;
    height: 1em;
    margin-left: -1px;
    /* margin-right: 1em;  */
    color: #0000006b;
  }

header section nav ul li a{
    margin-left: -1px;
    --rad: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: underline;
    color: #525252;
    border: 1px solid #A5D7DC00;
    transition: 250ms cubic-bezier(0, 0.55, 0.45, 1);
    min-height: 2em;
    padding: 0 2.5em;
    box-sizing: border-box;
    border-radius: var(--rad)
}
header section nav ul li a:hover{
    border-color:#1ba895;
    background: linear-gradient(0deg, #a2f1eb 0%, #ffffff 90%);
}
header section nav ul li a:active{
    background: linear-gradient(180deg, #31ada252 0%, #05625952 68%, #13fff052 68%, #ffffff 100%);
    background-color: #1ba895;
    color: #ffffff;
}

@media (max-width: 720px) {
    header section nav ul {
        /* padding-left: 3em; */
        cursor: auto;
    }
}
@media (max-width: 480px) {
    header section nav ul {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }
}

/* Header + Navbar combo End */

/* $$ Form and Buttons */
input, button {
    font-family: 'Zen Maru Gothic', 'National Park', 'Segoe Fluent Icons', sans-serif;
}

input[type=checkbox], input[type=radio]{
    accent-color: var(--win-bg-bot);
}

button{
    -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0,0,0,0.164); 
    box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0, 0, 0, 0.164);
    border-color: #353535;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    background: linear-gradient(0deg, #b3b3b3 0%, #e7e7e7 10%, #ffffff 100%);
    padding: 2px 12px;
}
button:hover{
    -webkit-box-shadow: inset 0px 0px 0px 1px #ffa600, 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0,0,0,0.164);
    box-shadow: inset 0px 0px 0px 1px #ffa600, 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0,0,0,0.164);
}
button:active{
    background: linear-gradient(0deg, #e7e7e7 0%, #b3b3b3 20%, #b3b3b3 100%);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0,0,0,0.164); 
    box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.164), 0px -1px 1px 0px rgba(0, 0, 0, 0.164);
}