/*
LINKLANE.NET - Version Green

made by [Secret Santa!] exclusively for the use of linklane.net
licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/
*/






/* SCROLLBAR */

::-webkit-scrollbar {
	height:0.5rem;
	width: 1rem;
}

::-webkit-scrollbar-corner {
	background: #000;
}

::-webkit-scrollbar-track-piece {
    background: #000;
}

::-webkit-scrollbar-thumb {
    width:0.5rem; 
	height:0.5rem;
	background: #55ff55;
	border: 0.25rem solid #000;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    width:0.5rem;
	height:0.5rem;
	background: #3cb33c;
}


/* PAGE LAYOUT */

html,
body {
	background: #000;
	margin: 0;
	padding: 0;
	font-size: 16px;
}


.container {
  display: grid;
  grid-template-columns: auto minmax(320px,1200px) auto;
  grid-template-rows: max-content max-content max-content auto max-content;
  margin: 0 auto;
  padding: 0;
  height: 100vh;
  width: 100%;
  grid-template-areas:
	"theme theme theme"
    "header header header"
	"nav nav nav"
    ". main ."
    "footer footer footer";
}

/* NAVIGATION AND THEME SELECT */

nav {
	grid-area: nav; 
	background: #3cb33c;
	text-align: center;
	padding: 1rem;
	font-size: 150%;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
}

nav a {
	margin: 0.25rem 1rem;
	text-decoration: none;
}

nav a:link,
nav a:visited,
nav a:active {
	color: #000;
    transition: all 0.4s;
}
	
nav a:hover {
	color: #fff;
    transition: all 0.4s;
	text-shadow: -1px 1px 2px #000;
}

.theme { 
	grid-area: theme; 
	background: #000;
	color: #fff;
	text-align: center;
	font-size: 90%;
	padding: 1rem 0.25rem;
	font-family: 'Montserrat Alternates', sans-serif;
}

.theme a:link,
.theme a:visited,
.theme a:active {
	color: #55ff55;
	text-decoration: none;
    transition: all 0.1s;
}
	
.theme a:hover {
	color: #d5ffd5;
	border-bottom: 0;
    transition: all 0.1s;
}
	
/* HEADER/HEAD IMG VARIABLES */

.img_green {
	max-width: 100%;
	max-height: auto;
	margin: 0;
	padding: 0;
	display: inline-block;
}  

 .img_orange {display: none;}
 .img_yellow {display: none;}
 .img_red {display: none;}
 .img_teal {display: none;}
 .img_blue {display: none;}
 .img_indigo {display: none;}
 .img_violet {display: none;}
 .img_pink {display: none;}	

header {
	grid-area: header; 
	background: #3cb33c;
	text-align: center;
	line-height: 0;
}

/* MAIN */

main {
	font-size: 110%; 
	grid-area: main;
	font-family: 'Montserrat', sans-serif;
	background: transparent;
	color: #fff; 
	line-height: 180%;
	padding: 3rem 0.5rem;
	text-align: justify;
}

main a {
	display: inline-block;
    position: relative;
	z-index: 3;
}

main a:link,
main a:visited,
main a:active {
	color: #55ff55;
	text-decoration: none;
    transition: all 0.2s;
}
	
main a:hover {
	color: #000;
    transition: all 0.2s;
}
	
main a::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 3px;
    width: 100%;
    height: 1px;
    background: linear-gradient(to left, #d5ffd5, #3cb33c);
    z-index: -1;
    transition: all 0.2s;
}

main a:hover::after {
	height: 90%;
	width: 100%;
}	

h1 {color: #55ff55;
	font-variant: small-caps;
	font-size: 300%;
	text-align: center;}

h2 {
	color: #3cb33c;
	font-size: 200%;
	letter-spacing: 2px;
	line-height: 200%;
	text-transform: uppercase;
	font-family: 'Montserrat Alternates', sans-serif;
	border-bottom: 1px dashed #666;
}
	
h2::before {
		content: url('../img/greenlink.png');
		margin-right: 1rem;
}

h3 {
	color: #d5ffd5;
	font-family: 'Montserrat Alternates', sans-serif;
}
		
ul {
    list-style:none;
	margin-left: 0.5rem;
}

ul li::before {
	content: "\25cf";
	background: radial-gradient(circle, #55ff55, #3cb33c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	display: inline-block;
	margin-right: 0.5rem;
}

ol {
	margin-left: 0.5rem;
}

ol li {
	margin-left: 1rem;
}

strong,
b {
	color: #3cb33c;
	font-family: 'Montserrat Alternates', sans-serif;
	letter-spacing: 1px;
}

em,
i {
	color: #d5ffd5;
	letter-spacing: 1px;
}

.linkto {
	text-align: center;
}

.linkto img {
	margin: 0.25rem 0.5rem;
}

.center { text-align: center; }

.right { text-align: right; }

.left { text-align: left; }

.big { font-size: 120%; }

.small { font-size: 85%; }



/* FOOTER */

footer {
	grid-area: footer; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	background: #666; 
	color: #fff;
	font-size: 85%;
	padding: 1rem;
	text-align: center;
	line-height: 140%;
	letter-spacing: 1px;
}

footer a:link,
footer a:visited,
footer a:active {
	text-decoration: none;
	color: #d5ffd5;
    transition: all 0.1s;
}
	
footer a:hover {
	color: #000;
	border-bottom: 1px solid #3cb33c;
    transition: all 0.1s;
}
	

/* FORMS */

label {
	display: block;
	font-weight: bold;
	letter-spacing: 1px;
}

input {
	display: block;
	margin-bottom: 1rem;
}

fieldset {
	border: 0;
	margin: 2rem auto;
	padding: 0;
	font-size: 115%;
	width: 90%;
}

.button {
	background: #3cb33c;
	color: #d5ffd5;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 0.25rem;
	border: 1px solid #000; 
	margin: 0.25rem 0;
	font-family: 'Montserrat Alternates', sans-serif;
	transition: all 0.25s;
}

.button:hover {
	background: #55ff55;
	color: #000;
	border: 1px solid #d5ffd5; 
	transition: all 0.25s;
}

.linkcode {
	width: 50%;
	height: 75px;
	background: #000;
	color: #fff;
	margin: 0.25rem auto;
	display: block;
	font-family: monospace;
	font-size: 100%;
}

.red { color: #f00; }