:root {
  --bg1: #1d2021;
  --bg2: #282828;
  --bg3: #333333;
  --accent-dark: #4C7064;
  --accent-bright: #5ea28dff;
  --text-faint: #B2C0A0;
  --text-alt: #BABF7C;
  --text: #D0C6A5;
  --text-strong: #8DA99C;
  --font: "inputsans", Tahoma, sans-serif;
  --font-mono: "inputmono", monospace;
}

@media (orientation:portrait) {
.header {
    width: 85%;
    height: 100%;
	}
.content {
    width: 85%;
    height: 100%;
	}}

@media (orientation:landscape) {
.header {
    width:55%;
    height: 50%;
	}
.content {
    width:55%;
    height: 50%;
	}}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

@font-face {font-family: 'inputsans';
src: url(https://fruitcombo.neocities.org/assets/fonts/sans-serif/InputSans-Regular.woff);
font-style: normal;font-weight: normal;}

@font-face {font-family: 'inputsans';
src: url(https://fruitcombo.neocities.org/assets/fonts/sans-serif/InputSans-Italic.woff);
font-style: italic;font-weight: normal;}

@font-face {font-family: 'inputsans';
src: url(https://fruitcombo.neocities.org/assets/fonts/sans-serif/InputSans-Bold.woff);
font-style: oblique;font-weight: bold;}


@font-face {font-family: 'inputmono';
src: url(https://fruitcombo.neocities.org/assets/fonts/mono/Input-Regular.woff);
font-style: normal;font-weight: normal;}

@font-face {font-family: 'inputmono';
src: url(https://fruitcombo.neocities.org/assets/fonts/mono/Input-Italic.woff);
font-style: italic;font-weight: normal;}

@font-face {font-family: 'inputmono';
src: url(https://fruitcombo.neocities.org/assets/fonts/mono/Input-Bold.woff);
font-style: oblique;font-weight: bold;}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

body 
{
  background-color: var(--bg1);
  color: var(--text);
}

::-moz-selection {
  color: var(--text-faint:);
  background: var(--accent-dark);
}
::selection {
  color: var(--text-faint:);
  background: var(--accent-dark);
}

img {
  border-radius: 5px;
  max-width:100%;
  margin: 5px;
}

hr {
  border: 1px solid var(--accent-dark);
  border-radius: 7px;
  width:75%;
  margin-top: 3em;
  margin-bottom: 3em;
}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

p {
    font-family: var(--font);
    font-size: 1.1em;  
    color: var(--text);
}

b {
    color: var(--text-strong);
    font-weight: bold;
}

strong {
    color: var(--text-strong);
    font-weight: bold;
}

i {
    color: var(--text-strong);
    font-style: italic;
}

em {
    color: var(--text-strong);
    font-style: italic;
}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

a { text-decoration: 2px underline var(--accent-dark); }
a:link { color: var(--accent-bright); }
a:visited { color: #69978F; }
a:hover { color: #88BFAF; }
a:active { color: #fff; } 

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color:var(--text-alt);
    text-align: center;
    line-height: 1.25;
    font-weight: 600;
	}
h1 { font-size:2.1em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.1em; }

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

ul {
  list-style-type:circle solid;
  width:90%;
  margin:auto;
}

li {
    font-family: var(--font);
    font-size: 1.1em;  
    text-align: left;
    color: var(--text);
    line-height: 1.75;
  padding: 1%;

}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */

blockquote {
    font-family: var(--font);
    font-size: 1.1em;  
    text-align:left;  
    color: var(--text);
    line-height: 1.25;
  background-color: var(--bg3);
  border: 0px solid black;
  border-left: 2px solid var(--accent-faint);
  border-radius: 10px;
  padding: 2%;
  width: 90%;
  margin: auto;
  margin-bottom: 5%;
}

code /* inline */ {
    font-family: var(--font-mono);
    font-size: 1.1em;  
    text-align:left;  
    color: var(--text-faint);
  background-color: var(--bg3);
  border: 0px solid black;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.codeblock /* block */ {
    font-family: var(--font-mono);
    font-size: 1.1em;  
    text-align:left;  
    color: var(--text-faint);
    line-height: 1.25;
  background-color: var(--bg3);
  border: 0px solid black;
  border-radius: 10px;
  padding: 3%;
  width: 90%;
  margin: auto;
}

codecomment {
    color: var(--accent-bright);
}

/* ▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ */
    
.header {
  border: 1px solid var(--bg3);
  border-radius: 10px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 0.2%;
  padding-bottom: 0.2%;
    text-align:center;
    font-family: var(--font);
    font-size: 1.1em;  
    line-height: 1.75;
    color: var(--text);
  background-color: var(--bg2);
  margin: auto;
  margin-top: 5%;
  }

.content {
  border: 1px solid var(--bg3);
  border-radius:10px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 1%;
  padding-bottom: 3%;
    text-align:left;
    font-family: var(--font);
    font-size: 1.1em;  
    line-height: 1.75;
    color: var(--text);
  background-color: var(--bg2);
  margin: auto;
  margin-top: 3%;
  margin-bottom: 5%;
  }