@font-face {
    font-family: 'customfont';
    src: url('./ChristmasChocho.woff2') format('woff2'),
         url('./ChristmasChocho.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html{
	scroll-behavior:smooth;
}
html{
  user-select: none;
}
body{
	margin: 0;
	width: 100%;
	font-family: trebuchet ms;
 	background-image: linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%), url("../images/backg.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#body{
	
}

:root {
  --background-color: transparent;
  --text-color: hsl(0, 0%, 100%);
}

.wrapper {
  display: grid;
  place-content: center;
  background-color: var(--background-color);
  min-height: 100vh;
  font-family: "Oswald", sans-serif;
  font-size: clamp(0.8rem, 1rem + 8vw, 7.3rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-color);
  margin-top: -300px;
}

.wrapper > div {
  grid-area: 1/1/-1/-1;
}
.topCC {
  clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottomCC {
  clip-path: polygon(0% 59%, 100% 50%, 100% 100%, 0% 100%);
  color: transparent;
  background: -webkit-linear-gradient(-89deg, #31302e 55%, white 73%);
  background: linear-gradient(-89deg, #black 55%, white 73%);
  background-clip: text;
  -webkit-background-clip: text;
  transform: translateX(-0.02em);
}

.body{
	flex: 1;
	border: solid;
	border-image-slice: 1;
  	border-width: 1px;
	border-image-source: linear-gradient(rgba(0,0,0,0));
}

.decorative{
	background-size: 50%;
	background-image: linear-gradient(to right, red, green, red);
	animation: gradientx 30s linear infinite;
	animation-direction: alternate;
	height: 7px;
	border: none;
	text-align: center;
	margin-top: 0px;
	margin-bottom: -3px;
}

#new{
	margin-top: 90px;
	padding: 5px; 
	margin-left: auto; 
	text-align: center;
	font-size: 1vw;
	background: gold;
}

.navbar{
	font-size: 18px;
	position: fixed;
	display: block;
	width: 100%;
	padding: 20px 0px 0px 0px;
	z-index: 999;
	background: black;
	/*background-size: 50%;
	background-image: linear-gradient(to right, red, green, red);
	animation: gradientx 60s linear infinite;
	animation-direction: alternate;*/
	/*background-image: linear-gradient(to right, rgba(255,0,0,0.75) 0%, rgba(255,0,0,0.75) 25%, rgba(255,0,0,0) 40%, rgba(255,0,0,0) 60%, rgba(255,0,0,0.75) 75%), url("navbarimg.jpg");
	background-size: cover;
	background-repeat: no-repeat;*/
}

@keyframes gradientx {
	0%{
		background-position: -1000%;
	}
}

.menuBtn{
	background: transparent;
	padding: 10px 10px;
	transition: 0.3s;
	color: white;
	border: none;
	font-family: trebuchet ms;
	float: right;
	display: block;
}

.menuBtn:hover{
	cursor: pointer;
	background: rgba(0,0,0,0.1);
	transition: 0.3s;
}

.countdown{
	position: initial;
	text-align: center;
	color: white;
	font-family: customfont;
}

#countdown{
	font-size: 12vw;
	font-family: customfont;
}

#christmascoming{
	margin: auto;
	text-align: center;
	font-size: 2vw;
	color: white;
}

a{
	text-decoration: none;
	color: white;
	transition: 0.5s;
}
a:hover{
	color: #999999;
	transition: 0.5s;
}

#christmascountdown{
	margin-top: 15vw;
}

#mainBtnInv{
	width: 100px;
	height: 60px;
	background-image: url("/images/plus.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px;
	margin-right: 10px;
	background-color: transparent;
	border: 3px solid white;
	border-radius: 15px;
	transition: 0.3s;
	font-size: 18px;
	color: transparent;
	font-family: trebuchet ms;
}

#mainBtnInv:hover{
	color: white;
	font-size: 18px;
	cursor: pointer;
	background-color: rgba(255,0,0,0.2);
	transition: 0.3s;
}

#mainBtnServer{
	width: 100px;
	height: 60px;
	background-image: url("/images/discord.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px;
	margin-right: 10px;
	background-color: transparent;
	border: 3px solid white;
	border-radius: 15px;
	transition: 0.3s;
	font-size: 18px;
	color: transparent;
	font-family: trebuchet ms;
}

#mainBtnServer:hover{
	color: white;
	font-size: 18px;
	cursor: pointer;
	background-color: rgba(255,0,0,0.2);
	transition: 0.3s;
}

#nav_name{
	float: left;
	display: inline-block;
	padding: 0px 20px;
}

#nav_home, #nav_count, #nav_info, #nav_dash, #nav_logged{
	float: right;
	display: inline-block;
	padding: 13px 20px;
}

#main{
	margin-left: auto;
	margin-right: auto;
	margin-top: 13vw;
	display: block;
	text-align: center;
	vertical-align: middle;
	height: fit-content;
}

#bigText{
	font-weight: bolder;
	background: -webkit-linear-gradient(left, red, green, red);
	background-size: 72%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient 20s linear infinite;
	animation-direction: alternate;
}

@keyframes gradient {
	0%{
		background-position: -1000%;
	}
}


#smalltext{
	text-align: left;
	width: 50%;
	font-size: 20px;	
}

#name,#icon{
	display: inline-block;
	vertical-align: middle;
	color: white;
	text-align: left;
	padding: 0px 20px;
	font-size: 4vw;
}

#iconmain{
	width: 20vw; 
	border-radius: 50%;
}

.footer{
    padding: 50px 0px;
    background: black;
    text-align: center;
    width: 100%;
}

#containers{
	display: block;
	color: white;
	padding: 20px 0px;
}

#paulA {
    position: relative;
    background-size: 50%;
    background-position-x: 160px;
    background-position-y: center;
    background-repeat: no-repeat;
}

#paulA::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/server.png");
    background-size: 50%;
    background-position-x: 160px;
    background-position-y: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0; 
}

#feonA{
	position: relative;
	background-size: 50%;
	background-position-x: 160px;
	background-position-y: center;
	background-repeat: no-repeat;
}

#feonA::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/code.png");
    background-size: 50%;
    background-position-x: 160px;
    background-position-y: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0; 
}

.authors div {
    position: relative;
    z-index: 1; 
}

footer{
	margin-top: 100px;
}

.as{
	display: inline-block;
	padding: 10px 30px;
}

.discord{
	padding: 20px 35px;
	border-radius: 15px;
	color: white;
	background: #36393F;
	text-decoration: none;
	font-size: 22px;
	border: 5px solid #272a2e;
	transition: 0.3s;
}

.discord:hover{
	background: #3e4757;
	transition: 0.3s;
}

.authors{
	vertical-align: middle;
	height: fit-content;
	min-width: 200px;
	max-width: 300px;
	display: inline-block;
	color: white; 
	/* background: #36393F; */
	background: rgba(255,255,255,0.1);
	/* border: 1px solid rgba(255,255,255,0.5); */
	border-radius: 3px;
	padding: 20px 30px;
}

#nav_info:hover #toShowInfo{
}

.owner{
	position: relative;
}

.toShow{
	margin-left: -65px;
	margin-top: -40px;
	visibility: hidden;
	background: black;
	color: white;
	text-align: center;
	padding: 10px 22px;
	border-radius: 10px;
	position: absolute;
	z-index: 1;
}

.toShow2{
	margin-left: -50px;
	margin-top: -65px;
	visibility: hidden;
	background: black;
	color: white;
	text-align: center;
	padding: 10px 22px;
	border-radius: 10px;
	position: absolute;
	z-index: 1;
}

button:hover{
	cursor: pointer;
}

.owner:hover .toShow{
	visibility: visible;
}
.owner:hover .toShow2{
	visibility: visible;
}

#info{
	margin: auto;
	text-align: center;
	color: white;
	background: black;
}

#stats{
	margin: auto;
	display: inline-block;
	padding: 0px 30px;
	text-align: center;
	color: white;
}

#smallstats{
	font-size: 1.5vw;
}

#bigstats{
	font-size: 3.5vw;
}

#information{
		font-size: 1.3vw; 
		width: 70%; 
		color: white; 
		margin: auto; 
		text-align: center;
	}


/* Terms and privacy  */
#containertermsprivacy{
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#tpcont{
	display: inline-block;
	margin: auto;
	text-align: center;
	font-size: 1.5vw;
	color: gray;
	width: 10%;
}

.inactivet{
	color: darkgray;
}


	::-webkit-scrollbar {
		  width: 3px;
      height: 3px;
		}

		::-webkit-scrollbar-track {
		  background: green;
		}

		::-webkit-scrollbar-thumb {
		  background: red;
		}

#guilds{
  text-align: center;
  margin: auto;
  width: 75%;
}

#individualG{
    margin: 20px;
    display: inline-block;
    border-radius: 10px;
    background: rgba(0,128,0,0.5);
    border: 3px solid red;
    color: white;
    padding: 20px;
    width: 30%;
  }

 #individualG2{
    margin: 20px;
    display: inline-block;
    border-radius: 10px;
    background: rgba(0,128,0,0.5);
    border: 3px solid red;
    color: white;
    padding: 20px;
    width: 25%;
    vertical-align: middle;
  }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////  */
@media screen and (max-width: 699px) {
	/* mai mic */
	.navbar{
		text-align: center;
		padding: 10px 0px;
		transition: 0.3s;
	}

	#iconmain{
		width: 50vw; 
		border-radius: 50%;
	}

	.inactive{
		display: none;
		text-align: right;
	}

	.as{
		display: block;
	}
/*
	#nav_name{
		display: none;
	}*/

	#nav_dash, #nav_home, #nav_count, #nav_info, #nav_logged{
		float: none;
		display: block;
	}

	.authors{
		display: block;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}

	#main{
		height: auto;
	}

	#bigText{
		font-weight: bolder;
		background: -webkit-linear-gradient(right, red, green, red);
		background-size: 90%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: gradient 10s linear infinite;
		animation-direction: alternate;
	}

	@keyframes gradient {
		0%{
			background-position: -1000%;
		}
	}

	#smalltext{
		width: 50%; 
		font-size: 20px;
		text-align: center;	
		margin: auto;
	}

	#name,#icon{
		display: block;
		vertical-align: middle;
		padding: 20px 0px;
		color: white;
		text-align: center;
		font-size: 10vw;
	}

	#stats{
		display: block;
		padding: 20px 0px;
	}
	#smallstats{
		font-size: 4.5vw;
	}

	#bigstats{
		font-size: 6.5vw;
	}
	#information{
		font-size: 3vw; 
		width: 70%; 
		color: white; 
		margin: auto; 
		text-align: center;
	}
	#tpcont{
		display: block;
		margin: auto;
		text-align: center;
		padding: 10px 0px;
		font-size: 3vw;
		width: 40%
	}
	#new{
		margin-top: 85px;
		padding: 5px; 
		margin-left: auto; 
		text-align: center;
		font-size: 3vw;
		background: gold;
	}
  
  #guilds{
    display: block;
    margin: auto;
    text-align: center;
  }
  
  #individualG{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 80%;
  }
  #individualG2{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 80%;
  }

}

@media screen and (min-width: 700px) {
	/* mai mare */
	.menuBtn{
		display: none;
	}
	.navbar{
		transition: 0.3s;
	}
}

/*/// SNOW ///*/
.intro,
.intro a{
  color:#fff;
}
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 0.2em;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}

.copyright {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}