* {margin:0; padding:0; border:0;}
body {font-family:Arial, Helvetica, Sans-serif; font-size:16px;}
button {cursor:pointer;}

.page-wrapper {margin-top:5vh;}
/*.full-page {min-height:100vh;}*/
.page-title {font-size:4em; margin-top:1.5em;}
.page-title span {display:inline-block; text-align:left;}
.big-sym {font-size:30vw; color:#e40001;}
.section-content {padding:2em;}
h2 em {font-weight:normal;}
.list {margin-left:1.5em;}

.bg-1 {background:linear-gradient(57deg,#ccc 18%,#ddd 18.015%,#eee 18.01%);}

.text-center {text-align:center;}

.typed {
	font-size:.7em;
	background: -webkit-linear-gradient(-70deg,#db469f,#2188ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color:transparent;
}

#modal{
	position:fixed; width:100%; height:100%; 
	background:rgba(255,255,255,0.9); 
	align-items:center; justify-content:center;
	top:0; left:0;
}
#modal>div{
	display:flex;
	flex-grow:1;
	flex-direction: column;
	align-items:center;
	justify-content: center;
}
#modal .big-sym{
	margin-top:1em;
	font-size:1em;
	border-bottom-style:dotted;
}
.flex{
	display:flex;
}
#modal button{
	font-size:2em;
	padding:1em 2em;
	box-shadow:0 0 1em 0 rgba(0,0,0,0.5);
	margin:1em;
	border-radius:.5em;

}
#modal .flex>button{
	background:#57cb89;
	color:#fff;
	cursor:pointer;
}

#modal .flex>.hiccup>button{
	background:#fe8989;
	color:#fff;
	position:relative;
}
#modal .flex>.hiccup:hover>button{
	top:-10em;
}
#modal .close{
	background:none;
	color:#333;
	box-shadow:none;
	margin-top:auto;
}
#alert{
	position:fixed;
	bottom:0; left:0;
	padding:1em;
	width:100%;
	background:linear-gradient(#ffbc2d, #ffc738);
	color:#000;
	box-shadow:0 0 1em 0 rgba(0,0,0,0.5);
	font-size:2em;
	text-align:center;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff;
}

.contact {color:#e40001; font-size:.35em; text-decoration:none; border-bottom:1px dotted #e40001; }
.contact:hover {border-bottom-style:solid;}
.feedback {margin-left:1em; background:none;}

.tags {position:relative; width:400px; height:400px; border-radius:50%; margin:5em auto;}
.tags h1 {padding-top:6em; color:#ccc; letter-spacing:3px;}
.tags li {position:absolute; left: 150px; top: 150px; list-style:none; width:9em; height:9em; font-size:.7em; background-color:#ccc; text-align:center; border-radius:50%; box-sizing:border-box; padding-top:4em; transition:.5s; opacity:.75;}
.tags li:hover {font-size:1.2em; z-index:2; opacity:.9; cursor:default;}

.tags li:nth-child(1) {animation: orbit1 30s linear infinite; background-color:#e44d26; color:#fff;}
@keyframes orbit1 {
	from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
.tags li:nth-child(2) {animation: orbit2 30s linear infinite; background-color:#046cb3; color:#fff;}
@keyframes orbit2 {
	from { transform: rotate(22.5deg) translateX(200px) rotate(-22.5deg); }
	to   { transform: rotate(382.5deg) translateX(200px) rotate(-382.5deg); }
}
.tags li:nth-child(3) {animation: orbit3 30s linear infinite; background-color:#9c27b0; color:#fff;}
@keyframes orbit3 {
	from { transform: rotate(45deg) translateX(200px) rotate(-45deg); }
	to   { transform: rotate(405deg) translateX(200px) rotate(-405deg); }
}
.tags li:nth-child(4) {animation: orbit4 30s linear infinite; background-color:#3491d4; color:#fff;}
@keyframes orbit4 {
	from { transform: rotate(67.5deg) translateX(200px) rotate(-67.5deg); }
	to   { transform: rotate(427.5deg) translateX(200px) rotate(-427.5deg); }
}
.tags li:nth-child(5) {animation: orbit5 30s linear infinite; background-color:#a6110c; color:#fff;}
@keyframes orbit5 {
	from { transform: rotate(90deg) translateX(200px) rotate(-90deg); }
	to   { transform: rotate(450deg) translateX(200px) rotate(-450deg); }
}
.tags li:nth-child(6) {animation: orbit6 30s linear infinite; background-color:#555; color:#fff;}
@keyframes orbit6 {
	from { transform: rotate(112.5deg) translateX(200px) rotate(-112.5deg); }
	to   { transform: rotate(472.5deg) translateX(200px) rotate(-472.5deg); }
}
.tags li:nth-child(7) {animation: orbit7 30s linear infinite; background-color:#39b54a; color:#fff;}
@keyframes orbit7 {
	from { transform: rotate(135deg) translateX(200px) rotate(-135deg); }
	to   { transform: rotate(495deg) translateX(200px) rotate(-495deg); }
}
.tags li:nth-child(8) {animation: orbit8 30s linear infinite; background-color:#eb4a4b; color:#fff;}
@keyframes orbit8 {
	from { transform: rotate(157.5deg) translateX(200px) rotate(-157.5deg); }
	to   { transform: rotate(517.5deg) translateX(200px) rotate(-517.5deg); }
}
.tags li:nth-child(9) {animation: orbit9 30s linear infinite; background-color:#555; color:#fff;}
@keyframes orbit9 {
	from { transform: rotate(180deg) translateX(200px) rotate(-180deg); }
	to   { transform: rotate(540deg) translateX(200px) rotate(-540deg); }
}
.tags li:nth-child(10) {animation: orbit10 30s linear infinite; background-color:#1e4714; color:#fff;}
@keyframes orbit10 {
	from { transform: rotate(202.5deg) translateX(200px) rotate(-202.5deg); }
	to   { transform: rotate(562.5deg) translateX(200px) rotate(-562.5deg); }
}
.tags li:nth-child(11) {animation: orbit11 30s linear infinite; background-color:#bb9e75; color:#fff;}
@keyframes orbit11 {
	from { transform: rotate(225deg) translateX(200px) rotate(-225deg); }
	to   { transform: rotate(585deg) translateX(200px) rotate(-585deg); }
}
.tags li:nth-child(12) {animation: orbit12 30s linear infinite; background-color:#f54d27; color:#fff;}
@keyframes orbit12 {
	from { transform: rotate(247.5deg) translateX(200px) rotate(-247.5deg); }
	to   { transform: rotate(607.5deg) translateX(200px) rotate(-607.5deg); }
}
.tags li:nth-child(13) {animation: orbit13 30s linear infinite; background-color:#ccc;}
@keyframes orbit13 {
	from { transform: rotate(270deg) translateX(200px) rotate(-270deg); }
	to   { transform: rotate(630deg) translateX(200px) rotate(-630deg); }
}
.tags li:nth-child(14) {animation: orbit14 30s linear infinite; background-color:#001b26; color:#06c8fd;}
@keyframes orbit14 {
	from { transform: rotate(292.5deg) translateX(200px) rotate(-292.5deg); }
	to   { transform: rotate(652.5deg) translateX(200px) rotate(-652.5deg); }
}
.tags li:nth-child(15) {animation: orbit15 30s linear infinite; background-color:#261300; color:#ff7c00;}
@keyframes orbit15 {
	from { transform: rotate(315deg) translateX(200px) rotate(-315deg); }
	to   { transform: rotate(675deg) translateX(200px) rotate(-675deg); }
}
.tags li:nth-child(16) {animation: orbit16 30s linear infinite; background-color:#341223; color:#ff408d;}
@keyframes orbit16 {
	from { transform: rotate(337.5deg) translateX(200px) rotate(-337.5deg); }
	to   { transform: rotate(697.5deg) translateX(200px) rotate(-697.5deg); }
}

@media(max-width:480px){
	.page-title {font-size:2.25em; padding:0 1em;}
	.tags {left:25%;}
	.tags-wrap {overflow:hidden;}
	#modal .flex>.hiccup:hover>button{
		top:-100vh;
	}
	#alert{
		font-size:1.5em;
	}
}