/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
/* Colors: */
/*backgrounds*/
--content-background-color: #fbfeff;
--sidebar-background-color: #f6f6f6;
/*fonts*/
--text-color: #3d3d3d;
--sidebar-text-color: #3d3d3d;
--link-color:#3d3d3d;
--tab-color:#fff;
--newsbg:#fff9ef;
/*links*/
--link:#e9e9e9;
--tab-click: #d53331;
/* Fonts */
--font: Helvetica, sans-serif;
--heading-font: Helvetica, sans-serif;
--nav-font:'timtastic';
--news-title:'Old Newspaper';
--newstext:Times New Roman;
--title:"timtastic";
--font-size: 0.875em;

/* Other Settings: */
--margin: 5px;
--padding: 24px;
--border: 0px solid;
--round-borders: 5px;
--sidebar-width: 300px;

--inout-color:#cc0000;/*in #73d216*/ /*out  #cc0000*/
--inout-text:" out";/* in*/ /* out*/ /*must have space*/
}


@font-face {
font-family: 'Old Newspaper'; /*news title*/
src: url('https://files.catbox.moe/lekd0c.ttf'); /*URL to font*/
}


@font-face {
font-family: 'timtastic'; /*links title*/
src: url('https://files.catbox.moe/xj4mvy.ttf'); /*URL to font*/
}


/* -------------------------------------------------------- */
/* ALL ENCOMPINSING */
/* -------------------------------------------------------- */

/*grid*/
.layout,
nav,
.navlinks,
.doc,
.audiobox,
.griddle
/**/
{
display: grid; 
}


/*flex*/
body,
.navlinks button,
.linkflex
/**/
{
display: flex;
}

/*font awesome*/
.hometext::before,
.linktext::before,
.arttext::before,
.blogtext::before,
.moretext::before,
.in::before
/**/
{
font-family: "Font Awesome 5 Free";
padding-right:5px;
display: inline-block;
vertical-align: middle;
font-weight: 900;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
box-sizing: border-box;
}

body {
align-items: flex-start;
justify-content: center;
min-height: 100vh;
margin: 0;
line-height: 1.2; 
/*variables*/
font-size: var(--font-size);
padding: var(--margin);
color: var(--text-color);
font-family: var(--font);
/*colors*/
background:var(--sidebar-background-color);
}


/* Links: */

a,
a:visited,
a:hover,
a:visited:hover,
a:focus
{
font-weight:bold;
text-decoration:center;
padding:1px;
padding-left:5px;
padding-right:5px;
text-decoration: none;
/*variables*/
font-family:var(--nav-font);
}

a,
a:visited{
background:var(--link);
/*colors*/
color: var(--link-color);
}

a:hover,
a:visited:hover,
a:focus{
background:var(--tab-click);
/*colors*/
color: var(--tab-color);
}

h1{
font-size:30px;
font-family:var(--title);
}


/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
width: 100%;
grid-gap:3px;
grid-template: "header header" auto "leftSidebar main" auto "footer footer" auto / var(--sidebar-width) auto;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

@media (max-width: 800px) {/**/
.layout {
width: 100%;
grid-template: "header" auto  "leftSidebar" auto "rightSidebar" auto "main" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
} 
/**/}

main {
grid-area: main;
overflow-y:scroll;
/*variables*/
border-radius: var(--round-borders);
padding: var(--padding);
/*colors*/
background: var(--content-background-color);
}




/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
grid-area: header;
font-size: 1.2em;
/*variables*/
border-radius: var(--round-borders);
background: var(--sidebar-background-color);
/*colors*/
border: var(--border);
}

.header-content {
padding: var(--padding);
}

.header-title {
font-size: 50px;
font-weight: bold;
z-index:1;
/*variables*/
font-family: var(--header-font);
}


.header-title img{
max-width:300px;
max-height:100px;
display: block;
margin-left: auto;
margin-right: auto;
}



/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
grid-area: aside;
overflow: hidden;
/*variables*/
border: var(--border);
border-radius: var(--round-borders);
/*colors*/
background: var(--sidebar-background-color);
}

/*mobile friendly*/
@media (max-width: 800px) {
aside{
padding:5px;
}
}

aside{
padding:3px;
}


.left-sidebar {
grid-area: leftSidebar;
}

.right-sidebar {
grid-area: rightSidebar;
}


.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}




/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 3px;
}

nav,
.navlinks button{
font-size:18px;
font-family:var(--nav-font);
}


.doc,
.audiobox,
.navlinks{
border-radius:8px;
padding:10px;
text-align:center;
background:var(--sidebar-background-color);
}

/*sidebar links*/
.navlinks{
overflow: hidden;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 8px;
}

.navlinks button{
border-radius:0px;
font-weight:bold;
text-decoration:center;
padding:3px;
padding-left:5px;
align-items: center;
justify-content: center;
}

.navlinks button,
aside a,
.audiobox a,
.doc a{
color: var(--text-color);
background: var(--sidebar-background-);
border:transparent;
}

.navlinks button.active,
.navlinks button:hover{
background-color:var(--tab-click);
color:var(--tab-color)!important;
}

.tabcontent {
display: none;
}

.hometext::before,
.linktext::before,
.arttext::before,
.blogtext::before,
.moretext::before,
.in::before
{
font-size:12px;
}

.hometext::before{
content:"\f015";
}

.linktext::before{
content:"\f0ac";
}

.arttext::before{
content:"\f1fc";
}

.blogtext::before{
content:"\f27a";
}

.moretext::before{
content:"\f05a";
}

.othertext::before{
content:"\f001";
}


.linktext,
.arttext,
.blogtext,
.moretext
{
text-decoration: line-through;
}
/*mini info box*/

.doc{
text-align:center;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 1px;
}

.doc img{
display: block;
margin-left: auto;
margin-right: auto;
max-height:200px;
max-width:200px;
}


/*online status*/
.in::before{
content: "\f111";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
font-size:12px;
}

.in::before{
background:var(--inout-color);
background: linear-gradient(to top, var(--inout-color) 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.in::after{
content:var(--inout-text);
font-weight:bold;
}


/*audio*/
audio{
border-radius:50px;
outline: none;
display: block;
margin-left: auto;
margin-right: auto;
}

.audiobox{
height:200px;
overflow:scroll;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 1px;
}

/* -------------------------------------------------------- */
/* TABS */
/* -------------------------------------------------------- */

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
line-height: 1.5;
height:80%;
}

/*mobile friendly*/
@media (max-width: 800px) {
main{
height:80%;
}
}


hr {
border:1.3px dashed var(--link);
}


/* -------------------------------------------------------- */
/* MAIN GRID */
/* -------------------------------------------------------- */


/*mobile friendly*/
  
.griddle{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1px;
max-width: 1200px;
}

@media (min-width: 600px) {/**/

.griddle{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;
}

/**/}


/*newsletter*/
.news h1{
font-family:var(--news-title);
}
.news{
padding:5px;
background:var(--newsbg);
}

.newscroll{
overflow:scroll;
height:250px;
font-size:14.5px;
}
.newscroll img{
 vertical-align: middle;
}

.newscroll,
.newscroll a{
font-family:var(--newstext)!important;  
}

.newscroll a,
.newscroll a:visited{
font-weight: normal;
background:var(--link);
color:var(--link-color);
}

.newscroll a:hover
.newscroll a:visited:hover{
padding-right:5px;
background:var(--border-color);
}

/*image links*/

/*mobile friendly*/

.linkflex a{
background:transparent;
}

.linkflex{
flex-direction: column;
flex-wrap: nowrap;
justify-content: normal;
align-items: center;
align-content: center;
}
.linkflex img{
max-height:100px;
max-width:100px;
}

@media (min-width: 600px) {
.linkflex{
flex-direction: row;
flex-wrap: nowrap;
justify-content: normal;
align-items: center;
align-content: normal;
}
.linkflex img{
max-height:40px;
max-width:40px;
}
/**/}

/* -------------------------------------------------------- */
/* LINKS TAB */
/* -------------------------------------------------------- */

/*tables*/
table.customTable,
table.customTable td, 
table.customTable th,
table.customTable caption
/**/
{
border-width: 4px; 
border-style: solid;
/**/
background-color: #FFFFFF;
border-color: #EEEEEE;
color: #000000;
}

table.customTable td, 
table.customTable th,
table.customTable caption
{
padding: 5px;
}

table.customTable {
width: 80%;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}


table.customTable thead {
background-color: #FFFFFF;
}

table.customTable caption{
border-bottom:0px;
font-weight:bold;
font-family:var(--title);
font-size:23px;
/**/
background: #EEEEEE;
}