@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

* {
	border:0;
	margin:0;
	padding:0;
	outline:0;
	box-sizing:border-box;
	border-collapse:collapse;
	transition:.1s;
}

::selection {
	background:#FBCBDC;
	color: white;
	text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

::-webkit-scrollbar {
	width:6px;
}

::-webkit-scrollbar-thumb {
	background:#5315aeea; 
	border-radius:10px;
	background-image:url(sky.png);
	padding-top:30px;
}

body {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	background-image:url(sky.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-color:white;
	background-position:top left;
	background-attachment:none;
	font-family: "Varela Round", serif;
	font-size:14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	counter-reset:designfreaks;
}

table {
	font-size: inherit; 
	padding:5px;
}


a {
	color: #DDB7E4;
	text-decoration:none;
}

a:hover {
	color: #9D9DDC;
}

#particle-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.particle {
	position: absolute;
	background: radial-gradient(circle, white 0%, rgba(0, 0, 0, 0) 30%);
	border-radius: 50%;
	opacity: 0.6;
	animation-timing-function: linear;
	animation: fadeAndMove 60s infinite;
}

@keyframes fadeAndMove {
	0% {
		transform: translate(0, 0) scale(0);
		opacity: 0.0;
	}

	20% {
		transform: scale(0.5);
		opacity: 0.6;
	}

	40% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	75% {
		opacity: 0.9;
	}

	100% {
		transform: translate(calc(200vw - 100px), calc(200vh - 100px)) scale(0);
		opacity: 0;
	}
}

main {
	margin: 0 auto;
	width:1200px;
	height:90vh;
	padding:25px;
	background:rgba(255,255,255,.3);
	backdrop-filter:blur(10px);
	border-image: linear-gradient(to top, transparent 10%, #E2B8ED 50%, transparent 90%) 1;
	border-width: 1px;
	border-style: solid;
	outline:1px solid white;
	border-radius:35px;
	color:#5315aeea;
	box-shadow:0 0 10px rgba(0,0,0,.1);
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap:20px;
}

section {
	text-align:justify;
	max-height: calc(95vh - 85px);
}

h1, h2, .designfreaks_headline {
	color:white;
	letter-spacing:1px;
	font-size:14px;
	padding:10px 20px;
	margin-bottom:10px;
	text-transform:uppercase;
	text-shadow:0 0 10px #606caf, 0 1px 0 #606caf;
	letter-spacing:2px;
	background-image:url(sky.png);
	background-size:auto;
	background-color:white;
	background-position:center;
	border-radius:15px;
}

h2 {
	text-align:center;
	padding:10px 0;
}

.navigation {
	display:grid;
	grid-template-columns: 1fr 1fr;
}

.navigation a {
	color:grey;
	text-transform:uppercase;
	font-size:9px;
	padding:3px 0;
	background:#f2f2f2;
	border-top:1px solid #f8f8f8;
	border-left:1px solid #f8f8f8;
	border-right:1px solid #d9d9d9;
	border-bottom:1px solid #d9d9d9;
	border-radius:10px;
}

.navigation a:before {
	counter-increment:designfreaks;
	content: counter(designfreaks, decimal-leading-zero) ":";
	font-weight:900;
	color:#E2B8ED;
	padding:0 5px;
}

.navigation a:nth-of-type(n+10)::before {
	content: counter(designfreaks) ":";
}

.navigation a:hover {
	color: #5315aeea;
	text-shadow:1px 1px 1px rgba(0,0,0,.1);
	background:#FBCBDC;
	border:1px solid transparent;
}

.navigation a:hover:before {
	color: #5315aeea;
}

.box {
	padding:15px;
	border-radius:20px;
	background:rgba(255,255,255,.5);
	max-height: 100%;
}

.scrollbar {
	overflow:auto;
}

#sitename {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vh;
	height: 200px;
	transform: rotate(-90deg);
	transform-origin: bottom left;
	margin-left:210px;
	display: flex;
	justify-content: center;
	color:rgba(255,255,255,.3);
	align-items: center;
	text-align: center;
	font-size:125px;
	letter-spacing:-5px;
}

#sitename ::selection { color:inherit;background:transparent;text-shadow:none;}

svg text {
	stroke:rgba(255,255,255,.5);
	stroke-width: 1;
	animation: textborder 5s infinite alternate;
}

@keyframes textborder {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:rgba(255,255,255,.3);
  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill:rgba(255,255,255,.3);
  }
  
}

button {
	height:30px;
	width:62px;
	border:0;
	background:transparent;
}

button:hover {
    box-shadow:0px 0px 50px white;
	border-radius:100%;
}

#designfreaks_newsskin {
	display:grid;
	grid-template-columns:100px auto;
	align-items:center;
	gap:5px;
	
}

.designfreaks_date {
	background:#FCD3E5;
	color:rgba(255,255,255,.8);
	border-radius:10px 0 0 0;
	text-align:center;
	text-shadow:1px 1px 2px rgba(0,0,0,.3);
	padding:10px 0;
}

.designfreaks_headline {
	border-radius:0 10px 0 0;
	padding:10px 15px;
	margin:0;
}

.designfreaks_box {
	padding:15px;
	border-radius:0px;
	background:rgba(255,255,255,.2);
	height:100px;
}
	
.designfreaks_news {
	margin-top:5px;
	border-radius:0 0 10px 10px;
	background:rgba(255,255,255,.2); 
	padding:15px;
}

blockquote, input, textarea {
	width:100%;
	margin:5px auto;
	border:1px solid rgba(0,0,0,.2);
	outline:1px solid white;
	background-color:#FFCFDF;
	padding:8px;
	border-radius:10px;
	color:#863d56;
	font-family:arial;
	font-size:12px;
	text-shadow:1px 1px 1px #ffd1e0;
}

blockquote {
	width:80%;
	padding:0 20px;
	font-size:10px;
	text-transform:uppercase;
	text-align:center;
	line-height:15px;
}

blockquote:before, blockquote:after {
	content:"///\2003\2764\2003///";
	display:block;
	text-align:center;
	padding:5px 0;
}

input {
	width:40%;
}

textarea {
	min-height:100px;
}

@media only screen and (max-width: 600px) {
	main, section, .navigation {
		display:block;
		width:100%;
	}
	
	.navigation a {
		font-size:6pt;
	}
	
	main {
		overflow-y:auto;
		margin:120px 0;
		height:calc(100vh - 240px);
		width:100%;
		background:transparent;
		border:transparent;
		outline:transparent;
		box-shadow:none;
		backdrop-filter:none;
	}
	
	.navigation {
		padding-left:3%;
	}
	
	.navigation a {
		display:inline-block;
		width:32%;
		text-shadow:none;
	}
	
	#sitename {
		position:absolute;
		top:0px;
		width:100%;
		text-align:center;
		transform:rotate(0deg);
		margin:-60px 0 0 0;
		padding:0px;
		font-size:60px;
	}
	
	.box {
		color:#5315aeea;
		text-shadow:1px 1px 2px rgba(255,255,255,.4);
		font-size:8pt;
		background:rgba(255,255,255,.2) !important;
		margin-bottom:20px;
		backdrop-filter:blur(20px);
	}
	
	h1, h2 {
		text-align:center;
		text-shadow:0 0 10px rgba(96,108,175,.6), 0 1px 0 rgba(96,108,175,.6);
	}
	
	.designfreaks_date {
		height:32px;
	}
	
	.designfreaks_headline {
		height:32px;
		font-size:9px;
		text-align:left;
		text-shadow:1px 1px 0 rgba(0,0,0,.3);
		letter-spacing:1px;
	}


}

.jinnie {
    position: absolute;
    bottom: 0;

}

.jinnie img {
	border-radius: 50px;
}

.card-display .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 83%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-display .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.card-display:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}