@import url('https://fonts.cdnfonts.com/css/ubuntu-mono');
@import url('https://fonts.cdnfonts.com/css/akron-sans-nbp');
@import url('https://fonts.cdnfonts.com/css/fruit-sale');
@import url('https://fonts.cdnfonts.com/css/upheaval');
@import url('https://fonts.cdnfonts.com/css/calculator');
/* start light mode styling */
:root {
--text: darkslategrey;
--border: lightgrey;
--accent: teal;
--bg: #dce3e1;
--gradientTop: white;
--gradientBottom: rgb(240, 248, 255, .8);
}
header {
background: url('https://i.imgur.com/2BA2hg9.jpeg');
}
/* end light mode styling */
/* start dark mode styling */
@media (prefers-color-scheme: dark) {
:root {
--text: white;
--border: #5a7678;
--accent: #74C365;
--bg: rgb(0,60,60,.8);
--gradientBottom: rgb(0, 50, 60);
--gradientTop: darkslategrey;
a:link { color: lightblue; }
}
header {
background: url('https://i.imgur.com/03NS47z.jpeg');
}
}
/* end dark mode styling */
* {
box-sizing: border-box;
}
body {
padding: 10px;
font-family: 'MS PGothic', sans-serif;
color: var(--text);
/* page background pattern */
background-color: var(--gradientTop);
background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg));
background-size: 20px 35px;
background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}
.container {
max-width: 55rem;
margin: 5vw auto 12px auto;
border: 6px ridge var(--border);
outline: 3px solid var(--gradientTop);
outline-offset: 4px;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
padding: 5px;
gap: 5px;
/* container background pattern */
background-color: var(--gradientBottom);
background-image: repeating-radial-gradient( circle at 0 0, transparent 0, var(--gradientBottom) 9px ), repeating-linear-gradient( var(--bg), var(--bg));
}
/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }
header {
background-size: cover;
background-position: center;
width: 100%;
height: 160px; /* change banner height here*/
border: 2px ridge var(--border);
border-radius: 5px;
position: relative;
}
header span {
font-size: 3vw;
position: absolute;
bottom: 0;
right: 10px;
margin: 10px;
font-weight: bold;
text-shadow: 1px 1px var(--text),
-1px 1px var(--text),
1px -1px var(--accent),
-1px -1px var(--accent);
color: var(--gradientTop);
}
nav {
border: 2px ridge var(--border);
border-radius: 5px;
padding: 5px;
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
text-align: center;
font-size: 1.25rem;
margin: 5px 5px 10px 5px;
font-family: 'Upheaval TT (BRK)', sans-serif;
}
nav a {
display: block;
margin: 5px;
background: linear-gradient(to right,var(--bg),var(--gradientBottom));
border-radius: 5px;
padding: 2px 7px;
text-decoration: none;
font-family: 'Calculator', sans-serif;
}
nav a:link, nav a:visited {
color: var(--text);
}
nav a:hover, nav a:focus {
background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}
/* optional button styling like in the preview */
div.small > img {
display: block;
margin: 5px auto;
border:2px ridge var(--border);
border-radius: 5px;
}
section {
border: 2px ridge var(--border);
border-radius: 5px;
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
padding: 5px;
}
footer {
text-align: center;
margin-bottom: 5vw;
font-size: 0.8rem;
}
footer a {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p {
margin: 5px;
line-height: 1.2;
}
h1 {
font-size: 1.4rem;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
border-bottom: 2px ridge var(--border);
padding-bottom: 5px;
font-family: 'Upheaval TT (BRK)', sans-serif;
}
h2 {
font-size: 1.05rem;
font-weight: normal;
text-align: center;
font-family: 'Upheaval TT (BRK)', sans-serif;
}
h3 {
font-size: 1.1rem;
}
h4 {
font-size: 1rem;
color: var(--accent);
padding-left: 12px;
}
/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }
a:hover, a:focus {
font-style: italic;
}
a:visited {
color: var(--accent);
}
::-webkit-scrollbar {
width: 14px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}
::-webkit-scrollbar-button {
display: block;
width: 14px;
height: 16px;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png");
border: 1.5px solid #888888;
border-radius: 5px;
}
.sjkfgksfg{
overflow-x:hidden;
overflow-y:scroll;
height:10em;
max-width:31em;
border: 1px solid #888888;
border-radius: 5px;
background-color: var(--gradientTop);
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
font-family: 'Ubuntu Mono', sans-serif;
}
/* hides the feed title */
p.rss-title {
display:none;
}
li.rss-item {
list-style-type:none; /* this removes the bullet points */
margin-bottom:20px; /* adds spacing under entry content */
margin-right:20px; font-size:20px; font-family: 'Fruit Sale', sans-serif;
}
/* this styles the blog title link */
li.rss-item a {
font-weight:bold;
letter-spacing:3px;
font-size:20px;
text-decoration:none; /* removes underline */
font-family: 'Akron Sans NBP', sans-serif;
}
/* this styles the date */
.rss-date {
display:inline-block; /* need this to add padding around each number */
padding-top:10px;
padding-bottom:10px;
font-style:italic;
font-weight: bold;
letter-spacing:2px;
font-size:15px;
align:justify;
}
/* hides the weird # of comments (displayed as 0 in demo) */
a.rss-item:last-child {
display:none;
}
/* music player */
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer04 {
position:fixed;
bottom:0;margin-bottom:25px;
left:0;margin-left:25px;
z-index:99;
}
#gt-player {
display:flex;
padding:15px;
/* main music player background color */
border-radius:3px 3px 0 0;
}
#gt-player > div {
align-self:center;
-webkit-align-self:center;
}
#music-controls {
user-select:none;
-webkit-user-select:none;
width:12px;
font-size:12px;
cursor:pointer;
color: var(--text);
/* page background pattern */
background-color: var(--gradientTop);
background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)); /* play & pause button color */
}
.pausee {display:none;}
#gt-barwrap {
margin-left:15px;
padding:5px 0;
cursor:pointer;
}
#gt-musicbar {
min-width:100px;
height:2px;
background:#31302E; /* music bar color (not played) */
border-radius:4px;
display:flex;
}
#gt-musictrack {
height:inherit;
/* music track color (played) */
border-radius:4px;
width:0;
background-color: var(--gradientTop);
background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg));
}
#gt-blob {
align-self:center;
-webkit-align-self:center;
margin-left:-4px;
width:8px;
height:8px;
border-radius:100%;
background:#ceccdb; /* music slider blob color */
}
#music-duration {
margin-left:15px;
font-family:consolas-alt;
font-size:12px;
letter-spacing:0.5px;
color: var(--text);
/* page background pattern */
background-color: var(--gradientTop);
background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)); /* music time text color */
}
#gt-songtext {
margin-top:0px;
padding:10px 15px;
background-color: var(--gradientTop); /* song title background color */
background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg));
border-radius:0 0 3px 3px;
font-family:consolas-alt;
font-size:12px;
line-height:1em;
color:white; /* song title color */
overflow:hidden;
}
@font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
input[type="checkbox"] {
pointer-events: none;
align:left;
}
.head1 {
color: green;
margin: 2rem;
float:left;
}
.head2 {
margin: 0rem;
margin-top: -1.5rem;
float:left;
}
.div1 {
margin-top: 0rem;
font-size:17px;
float:left;
font-family: 'Calculator', sans-serif;
}
.div2 {
margin-top: 0rem;
align:left;
}
/* UPDATES LOG*/
.tab {right:10px;bottom:0;position:fixed;width:200px;height:auto;max-height:520px;line-height:120%;z-index:99999;overflow-x:hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-y:scroll;
}
/* feel free to change the 'width', 'left', and 'line-height' but i wouldn't recommend changing anything else. */
/* updates tab image */
.tabs img {cursor:pointer;width:100%;
}
.tabs img:hover {filter:saturate(150%);-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
.tabs {-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
.tabs:hover {transform:rotate(17deg);-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
/* those three lines above are there if ya wanna get fancy with it (ie, the little rotate the starfish does and the increased saturation on hover). [feel free to delete '.tabs', '.tabs img:hover', and '.tabs:hover' if you don't tho]
transformations website: http://leaverou.github.io/animatable/
filter website: https://www.w3schools.com/CSSref/css3_pr_filter.asp */
/* box background and text */
.tab_content {color:#111;display:none;padding:20px;cursor:default;font-size:19px;font-family:'Akron Sans NBP', sans-serif;background:rgba(255,255,255,.50);
overflow:auto;
}
/* you don't have to use the rgba background, i use it to add transparency to the background [the .50 at the end]. you can replace it with 'background:#fff' to make it simpler. also 'Ubuntu' is a custom font i got from google: https://fonts.google.com/ */
/* title */
.tab_content h1 {line-height:20px;font-size:19px;margin:0;}
/* paragraph
*/
.tab_content p {text-align:justify;
}
/* bold */
.tab_content b {font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:3px;}
/* italic */
.tab_content i {font-style:italic;}
/* big text */
.tab_content big {font-size:19px;}
/* small text */
.tab_content small {font-size:9px;}
/* underlined */
.tab_content u {border-bottom:1px solid gray;}
/* divider
*/
.tab_content hr {opacity:.6;}
/* list - */
.tab_content ul {list-style-type:circle;padding:5px 27px;margin:0;}
.tab_content li {font-size:18px;}
/* links */
.tab_content a {border-bottom:2px solid orange;text-decoration:none;color:#111;-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
.tab_content a:hover {border-bottom:3px solid purple;color:#000;-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
/* CURSOR */
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-1/nat57.ani), url(https://cur.cursors-4u.net/nature/nat-1/nat57.png), auto !important;} /* End https://www.cursors-4u.com */
.box11{
overflow-x:hidden;
overflow-y:scroll;
height:10em;
float:left;
max-width:13em;
border: 1px solid #888888;
border-radius: 5px;
background-color: var(--gradientTop);
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
font-family: 'Ubuntu Mono', sans-serif;
margin-top:10px;
}
#scroll1 {
height: 110px;
width: 120px;
padding: 0px;
font-size: 16px;
overflow: hidden;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 3px solid #5c5a67;
}
/* USER SELECT */
html,body{
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
.box12{
overflow-x:hidden;
overflow-y:auto;
position: relative;
height:10em;
float:right;
width:17.5em;
border: 3px solid #888888;
border-radius: 5px;
background-color: var(--gradientTop);
background: linear-gradient(var(--gradientTop),var(--gradientBottom));
font-family: 'Ubuntu Mono', sans-serif;
margin-top:10px;margin-bottom:10px;
margin-right:2px; margin-left:5px;
}
::-webkit-scrollbar {
width: 5px;
background: transparent; /* make scrollbar transparent */
}
#statuscafe {
padding: .5em;
background-color: var(--gradientTop);
border: 1px solid midnightblue;
}
#statuscafe-username {
margin-bottom: .5em;
font-size:12px;
}
#statuscafe-content {
margin: 0 1em 0.5em 1em;
font-size:11px;
}