* {
box-sizing:border-box;
}
@media (prefers-color-scheme: dark) {
:root {
--main-background:#0D1117;
--logo_main_colour1:#1A1A1A;
--logo_main_colour2:#D4D2D2;
--border_colour:#FFFFFF;
--text_colour:#E6EAF7;
--header_background:#010409;
--about-background:#DCDCF7;
--about-border:#DCDCF7;
}
}
@media (prefers-color-scheme: light) {
:root {
--main-background:#FFFFFF;
--logo_main_colour1:#FFFFFF;
--logo_main_colour2:#1A1A1A;
--border_colour:#000000;
--text_colour:#1A1A1A;
--header_background:#E5E5E5;
--about-background:#FFFFFF;
--about-border:#000000;
}
}
body {
font-family: Arial,sans-serif;
background:var(--main-background);
font-size:16px;
width:96%;
text-align:center;
}
main{
text-align:left;
}
header{
display:inline-block;
background:var(--header_background);
top:0px;
left:0px;
width:97vw;
padding:1em;
font-size:1.2rem;
}
footer {
display:inline-block;
background:var(--header_background);
left:0px;
width:97vw;
padding:1em;
padding-bottom:1em;
font-size:1.2rem;
margin-top:2em;
}
.logo-left {
display:inline;
background: var(--logo_main_colour2);
color:var(--logo_main_colour1);
padding-left:6px;
padding-right:1px;
border-top-left-radius:32px;
border-bottom-left-radius:32px;
border-top:solid 2px var(--border_colour);
border-bottom:solid 2px var(--border_colour);
border-left:solid 2px var(--border_colour);
text-decoration:none;
}
.logo-right {
display:inline;
background: var(--logo_main_colour1);
color:var(--logo_main_colour2);
padding-left:1px;
padding-right:6px;
font-style:italic;
border-top-right-radius:32px;
border-bottom-right-radius:32px;
border-top:solid 2px var(--border_colour);
border-bottom:solid 2px var(--border_colour);
border-right:solid 2px var(--border_colour);
text-decoration:none;
}
@media (width > 900px) {
#tagline{
color:var(--text_colour);
padding-bottom:0.7rem;
margin-top:0.2em;
font-size:1.3rem;
margin-right:1.5em;
float:right;
text-wrap:balance;
margin:0 auto;
}
.badges-container {
display: grid;
margin-top:0em;
margin-left:0%;
margin-right:4%;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-column-gap: 0px;
grid-row-gap:1px;
width:70%;
}
#logo {
position:relative;
font-family: Arial,sans-serif;
display:inline;
font-size:4rem;
width:auto;
cursor:pointer;
text-decoration:none;
float:left;
}
}
@media (width <= 900px) {
#tagline{
display:inline-block;
color:var(--text_colour);
padding-top:0.8em;
font-size:1.3rem;
margin-right:1.5em;
text-wrap:balance;
margin:0 auto;
}
.badges-container {
display: none;
}
#logo {
position:relative;
font-family: Arial,sans-serif;
display:inline;
font-size:4rem;
width:auto;
cursor:pointer;
text-decoration:none;
text-align:center;;
}
}
.about{
background:var(--about-background);
max-width:90%;
position:relative;
top:0.5rem;
margin: 0 auto;
border-radius:5px;
border-color:var(--about-border);
border:2px solid;
}
.about-link{
color:black;
font-weight:bold;
}
legend {
background-color:#4682B4;
padding-left:10px;
padding-right:15px;
padding-top:6px;
padding-bottom:6px;
border: 0px solid #1F1F57;
border-radius:9px;
font-size:1.3rem;
font-weight:bold;
color:#FFFFFF;
display:inline-flex;
}
#LoginImage{
float:left;
margin:1em;
width:300px;
height:300px;
aspect-ratio:1;
}
.items-container {
display: grid;
margin-left:4%;
margin-right:4%;
margin:0 auto;
margin-top:1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-column-gap: 6px;
grid-row-gap:6px;
width:90%;
max-width:1200px;
text-align:left;
}
.items-container > a > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
min-width:40%;
font-size:1rem;
color:#0D1117;
border-radius:5px;
}
.items-container > a > div:hover {
background-color: #DAC9C9;
margin: 10px;
padding: 20px;
min-width:40%;
font-size:1rem;
color:#0D1117;
border-radius:5px;
}
.icons{
width:48px;
height:48px;
margin-right:5px;
}
.title{
padding-left:8px;
font-size:2rem;
margin-bottom:15px
}
.ItemLink{
text-decoration:none;
}
#copyright {
float:right;
color:var(--text_colour);
margin-top:-3%;
margin-right:40px;
}
section{
color:var(--text_colour);
margin-left:5%;
margin-right:5%;
text-align:left;
}
.feature{
background:#C6FFD5;
max-width:90%;
position:relative;
top:0.5rem;
margin: 0 auto;
border-radius:5px;
color:#1A1A1A;
margin-bottom:1em;
border:0px;
}
.legend-text{
margin-left:6px;
position:relative;
margin-top:5%;
}
.badges-container > a > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
min-width:40%;
font-size:1rem;
color:#0D1117;
border-radius:5px;
}
.main-title{
font-size:2.5rem;
}
.sub-title{
font-size:1.5rem;
margin-left:2rem;
}
.sub-para{
margin-left:1.5rem;
}
.screenshot{
width:80%;
margin-left:2rem;
}
.sub-image{
margin-left:2rem;
max-width:40%;
}
.code{
background:#F6EFBD;
color:#1A1A1A;
padding-left:10px;
padding-right:10px;
font-family:"Courier New", Courier, monospace;
overflow:auto;
font-size:12px;
}
fieldset{
width:90%;
margin-left:5%;
background:#FFFFFF;
color:#070723;
text-align:left;
border-radius:17px;
border:0px;
margin-bottom:15px;
margin-top:1%;
}
fieldset legend{
color:#070723;
background:#FFFFFF;
padding:10px;
border-radius:17px;
border:2px solid #070723;
font-weight:bold;
}
#code {
background:#C0BE9C;
color:#4D4D4D;
padding:2px;
}
.manual-container {
display: flex;
flex-wrap: wrap;
margin-top:1em;
margin-left:4%;
margin-right:4%;
width:95%;
text-align:left;
}
.manual-container > .manual-index {
background-color:var(--header_background);
flex: 1 0 15em;
margin: 10px;
padding: 20px;
max-width:300px;
font-size:1rem;
color:var(--text_colour);
border-radius:5px;
text-decoration:none;
}
.manual-container > a > .manual-index-item {
background-color:var(--header_background);
margin: 10px;
padding: 20px;
font-size:1rem;
color:var(--text_colour);
border-radius:5px;
}
.manual-container > .manual-index > .manual-index-item {
padding:1px;
text-decoration:none;
color:var(--text_colour);
}
.manual-container > .manual-index > .manual-index-item > a{
padding:4px;
text-decoration:none;
color:var(--text_colour);
}
.manual-container > .manual-index > .manual-index-item > a:hover{
text-decoration:none;
background:var(--logo_main_colour2);
color:var(--main-background);
padding-top:0px;
padding-bottom:0px;
border-radius:6px;
}
.manual-container > .manual-page {
background-color:var(--header_background);
flex: 10 0 10em;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
font-size:1rem;
color:var(--text_colour);
border-radius:5px;
min-width:300px;
}
.ManualImage{
width:90%;
}
.nav-item {
vertical-align: top;
display: inline-block;
text-align: center;
width: auto;
margin-top:0px;
}
.nav-caption {
display: block;
font-size:0.8rem;
color:var(--text_colour);
}
.nav-item > a {
text-decoration:none;
}
.badges {
width:60px;
height:60px;
}
.screenshot {
width:95%;
}