:root,
:root.yellow {
  --frame: #dab600;
  --text: #f8ed62;
  --button: #a98600;
  --hover: #e9d700;
  --bground: #7F781D;
}
 
:root.green {
  --frame: #4C9A2A;
  --text: #A4DE02;
  --button: #1E5631;
  --hover: #ACDF87;
  --bground: #005000;
}

:root.blue {
  --frame: #072F5F;
  --text: #58CCED;
  --button: #1261A0;
  --hover: #3895D3;
  --bground: #000090;
}

:root.red {
  --frame: #ff0000;
  --text: #ff7b7b;
  --button: #a70000;
  --hover: #ff5252;
  --bground: #900000;
}

:root.pink {
--frame: #FF00A7;
--text: #8EE6FF;
--button: #FF00A7;
--hover: #FF25DD;
--bground: #310025;
}

:root.grey {
  --frame: #868686;
  --text: #FFF;
  --button: #9B9B9B;
  --hover: #FFF;
  --bground: #242424;
}

:root.light {
  --frame: #868686;
  --text: darkgrey;
  --button: #9B9B9B;
  --hover: lightgrey;
  --bground: white;
}

/* General classes */

.logo {
	height: 150px;
	background:black;
	}

.logo:hover {
	background: var(--hover, #ACDF87);
	}

.top_icon {
	width:30px;
	background:var(--frame, #4C9A2A);
	}

.top_icon:hover {
	background:var(--hover, #ACDF87);
	}

h2 {
	font-size:30px;
	color: var(--frame, #4C9A2A);
	}
h3 {
	font-size:20px;
	color: var(--frame, #4C9A2A);
	}
h5 {
	font-size:15px;
	}
h6 {
	font-size:10px;
	}


.loginform
    {
    border: 1px solid var(--frame, #4C9A2A);
    border-radius: 5px;
    background:black;
    width:100%;
    margin:auto;'
    }

.box {
	width:100%;
	height:100%;
	border: 2px solid var(--frame, #4C9A2A); 
	padding: 5px; 
    border-spacing: 5px;
	border-radius: 5px; 
	background-color: black; 
	border-collapse: separate;
	}

.box:hover {
    box-shadow: 0 0 20px var(--hover, #ACDF87);
	border: 1px solid var(--frame, #4C9A2A); 
	}

.headline {
        font-family:'Times';
        font-size:40px;
        background-color:rgba(0,0,0,0.5);
		color:var(--text, #A4DE02);
}

hr {
        border-style: solid;
		border-width: 1px;
		border-color: var(--frame, #4C9A2A);
		width: 100%;
        }

a:link {
		color:var(--text, #A4DE02);
        text-decoration:none;
    }

a:active { 
		color:var(--text, #A4DE02);
        text-decoration:none;
	} 

a:visited { 
		color:var(--text, #A4DE02);
        text-decoration:none;
	}

a:hover { 
        text-decoration:none;
	}

td {
        font-family:'Times';
		background-color:black;
		opacity:1;
		color:var(--text, #A4DE02);
    }

table {
        width: 100%;
        text-decoration:none;
        font-size:30px;
		border-collapse: collapse;
		border-width: 0px;
		border-color: var(--frame, #4C9A2A);
		border-style: solid;
		vertical-align: middle;
    }

/* INPUT TYPES */

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid var(--hover, #ACDF87);
}


input[type="text"] {
        /*width: 50%;*/
        /*height: 30px;*/
    	padding: 10px 10px;
		margin:10px;
        border: 2px solid var(--button, #1E5631);
        border-radius: 5px;
        background-color: black;
        color:var(--text, #A4DE02);
        box-sizing: border-box;
        font-size:16px;
}

input[type="text"]:focus {
    outline: none;
    border:1px solid var(--frame, #4C9A2A);
    box-shadow: 0 0 10px var(--hover, #ACDF87);
  }

textarea {
        /*width: 50%;*/
        /*height: 30px;*/
    	padding: 10px 10px;
		margin:10px;
        border: 2px solid var(--button, #1E5631);
        border-radius: 5px;
        background-color: black;
        color:var(--text, #A4DE02);
        box-sizing: border-box;
        font-size:16px;
}

textarea:focus {
    outline: none;
    border:1px solid var(--frame, #4C9A2A);
    box-shadow: 0 0 10px var(--hover, #ACDF87);
  }


input[type="submit"] {
  color: var(--text, #A4DE02);
  border: 2px solid var(--button, #1E5631);
  background-color: black;
  
  padding: 12px;
  font-size:16px;
  border-radius: 5px;
  box-sizing: border-box;

  }

input[type="submit"]:hover {
	background-color:var(--frame, #4C9A2A);
}



/* BODY SETTINGS */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.background-container {
    width: 100%;
    min-height: 100vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family:'Times';
    font-size:30px;
	color:var(--text, #A4DE02);
	background-image: url('../pics/nsbackground.png');
    background-color:  var(--bground, black);
    background-repeat: repeat;
	z-index:1;

}

/* General website definition */

.website {
    width: 960px;
    margin: auto;
    text-align:center;
    align-content:center;
    background-color:black;
	opacity: 1;
	font-family:'Times';
	z-index:2;
}


/* Footer.php classes */

.footer {
	border-top: 1px solid var(--frame, #4C9A2A);
    border-bottom: 1px solid var(--frame, #4C9A2A);
    text-align:center;
	margin:auto;
    align-content:center;
    background:black;
    }
    

/* Index.php classes */
.zebra {
	tr:nth-child(even) {background-color: #f2f2f2;}
	}

table.idx_front {
    border: 0px solid var(--frame, #4C9A2A);
	margin:auto;
    text-align:center;
    border-collapse: separate;
	empty-cells: hide;
    /*background-color:rgba(0,0,0,0.5);*/
    }

td.idx_front {
    border: 0px solid var(--frame, #4C9A2A);
    text-align:center;
	border-spacing:10px 10px;
    border-collapse: separate;
	empty-cells: hide;
    background-color:rgba(0,0,0,0);
    }


.over:hover { 
	background-color:var(--frame, #4C9A2A);
    text-decoration:none;
	border:0px;
	}

.overborder:hover { 
	border:2px solid var(--frame, #4C9A2A);
    text-decoration:none;
	}


.space {
    width: 1%;
    }

.coin {
	box-sizing:border-box; 
	border:0px solid var(--frame, #4C9A2A);
	background-color: transparent; 
	padding: 5px;
	border-spacing:10px;
    vertical-align: middle;
    border-radius: 5px;
	text-align:center;
    }

.maincoin {
	width:25%;
	border:1px solid var(--frame, #4C9A2A);
    vertical-align: middle;
    border-radius: 5px;
    padding:10px;
	text-align:center;
    }

.voting {
	width:960px;
	margin:auto;
	border:1px solid var(--frame, #4C9A2A);
    vertical-align: middle;
    background-color:black;
    border-radius: 5px;
	padding:10px;
	text-align:center;
    }

.button {
	border: 2px solid var(--button, #1E5631);
	color: var(--text, #A4DE02);
	/*height: 30px;*/
	padding: 10px 10px;
	margin:0px 5px 0px 0px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	border-radius: 5px;
	text-align:center;
	font-family:'Times';
	font-size:16px;
    background-color:black;
    }

.button:hover {
    box-shadow: inset 0 0 20px var(--hover, #ACDF87);
	/*background-color:var(--frame, #4C9A2A);*/
    text-decoration:none;
	}

.coin:hover {
/*	background-color:var(--hover, #ACDF87);*/
	color:var(--text, #A4DE02);
    }
.coin1:hover {
    font-family:'Times';
	color:var(--text, #A4DE02);
    }


/* Default.php classes */
.def_dark_back {
		background-color:var(--button, #1E5631);
		}

.def_coinlogo {
        border:2px solid var(--frame, #4C9A2A);
        border-collapse: separate;
        border-spacing: 15px;
        border-radius: 5px;
	}

.def_border {
        width: 960px;
        margin:auto;
        text-decoration:none;
		background: black;
		opacity:1;
        border:2px solid var(--frame, #4C9A2A);
        border-collapse: separate;
        border-spacing: 15px;
        border-radius: 5px;
}

.def_bbottom {
        border-bottom:1px solid var(--frame, #4C9A2A);
}

.def_btop {
        border-top:1px solid var(--frame, #4C9A2A);
}

.def_bright {
        border-right:1px solid var(--frame, #4C9A2A);
}

.def_over:hover { 
		background-color:var(--hover, #ACDF87);
        text-decoration:none;
	}

.def_td { 
		background-color:#000000;
		opacity:1;
	}

.def_lnkover { 
		background-color:var(--frame, #4C9A2A);
        text-decoration:none;
	}

.def_lnkover:hover { 
		background-color:var(--hover, #ACDF87);
        text-decoration:none;
	}

/* Voting.pgp classes */

.vtg_button {
	border: 2px solid var(--frame, #4C9A2A);
	padding: 5px 5px;
	margin:10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	border-radius: 5px;
	text-align:center;
	font-family:'Times';
    background-color:black;
    }


/* Tier.php classes */

.tier_front {
    width:100%;
    border:1px solid var(--frame, #4C9A2A);
    text-align:center;
	border-spacing:10px;
    padding:10px;
	border-collapse: separate;
    }

.tier_coin {
	width:40%;
	margin:10px auto 10px auto;
	border:1px solid var(--frame, #4C9A2A);
    align-content: center;
    border-radius: 5px;
    padding:10px;
    }

/* Coltest tool */

.structure_input {
		text-align:right;
		background-color:lightgrey;
	    font-family:'Times';
	    font-size:16px;
		border-collapse:separate;
		border-radius:5px;

		}

.colinput {
		text-align:right;
		background-color:lightgrey;
	    font-family:'Times';
	    font-size:16px;
		border-collapse:separate;
		border-radius:5px;

		}
.colbutton {
		text-align:center;
		background-color:lightgrey;
	    font-family:'Times';
	    font-size:50px;
		border-collapse:separate;
		border-radius:5px;
		}

.colhead {
	font-family:Times;
	font-size:50px;
	text-decoration: underline;
	}

.col {
	text-align:center;
	/*padding:5px;*/
	}

.structure {
	width:75%;
	}

/* Header.php classes */
.header {
        width: 960px;
        border-top:1px solid var(--frame, #4C9A2A);
		background-color:black;
        border-collapse: separate;
        margin:auto;
}

.hdr_banner {
    /*width: 100%;*/
    max-height:150px;
    margin: auto;
    border:2px solid var(--frame, #4C9A2A);
    vertical-align: middle;
    border-collapse: separate;
    border-radius: 5px;
    }

div.leftbanner {
	position: fixed;
	left: calc(50% - 850px);
	top: calc(50% - 400px);
	max-width: 300px;
	max-height: 800px;
}
div.rightbanner {
	position: fixed;
	left: calc(50% + 550px);
	top: calc(50% - 400px);
	max-width: 300px;
	max-height: 800px;
}

img.vertbanner{
	max-width: 300px;
	max-height: 800px;

	margin:auto;

	border:1px solid var(--frame, #4C9A2A);
    border-collapse: separate;
    border-radius: 5px;
	}


/*
	max-width: 300px;
	max-height: 800px;

	border:1px solid var(--frame, #4C9A2A);
    border-collapse: separate;
    border-radius: 5px;
	padding: 5px; 
    border-spacing: 5px;
	background-color: black; 
  }
*/

/* SNOW */

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.snow_wrap{
	height: 150px;
	width: 100%;
	background:url('../images/pic.jpg');
	background-size: cover;
	background-position: center bottom; 
	overflow: hidden;
	position: relative;
}

.snow, .snow:before, .snow:after {
  position: absolute;
  top: -650px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: 
  radial-gradient(4px 4px at 100px 50px, #fff , transparent), 
  radial-gradient(6px 6px at 200px 150px, #fff, transparent), 
  radial-gradient(3px 3px at 300px 250px, #fff 50%, transparent), 
  radial-gradient(4px 4px at 400px 350px, #fff 50%, transparent), 
  radial-gradient(6px 6px at 500px 100px, #fff 50%, transparent), 
  radial-gradient(3px 3px at 50px 200px, #fff 50%, transparent), 
  radial-gradient(4px 4px at 150px 300px, #fff 50%, transparent), 
  radial-gradient(6px 6px at 250px 400px, #fff 50%, transparent), 
  radial-gradient(3px 3px at 350px 500px, #fff 50%, transparent);
  background-size: 650px 650px;
  animation: snow 3s linear infinite;
  content: "";
}

.snow:after {
  margin-left: -250px;
  opacity: 0.5;
  filter: blur(2px);
  animation-duration: 6s;
  animation-direction: reverse;
}

.snow:before {
	margin-left: -350px;
  opacity: 0.7;
  filter: blur(1px);
  animation-duration: 9s;
  animation-direction: reverse;
}

@keyframes snow {
  to {
    transform: translateY(650px);
  }
}

/* Blinking specifications */

.blink {
	-webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

.blink2 {
	-webkit-animation: 2s blink ease infinite;
    -moz-animation: 2s blink ease infinite;
    -ms-animation: 2s blink ease infinite;
    -o-animation: 2s blink ease infinite;
    animation: 2s blink ease infinite;
  }
  
  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--button, #1E5631);
  color: var(--hover, #ACDF87);
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: var(--hover, #ACDF87);
  color: var(--button, #1E5631);
}