@font-face {
    font-family: 'year2000';
    src: url('font/year2000/YEARR___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ethnocentric';
    src: url('font/Ethnocentric/Ethnocentric-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

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

body, html, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, figure, figcaption, table, th, td, form, fieldset, legend, input, textarea, select, button {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: revert;
  margin-block-start: 0;
  margin-block-end: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}


.page-container {
	display: grid;
	grid-template-areas:
		'header'
		'about'
		'portfolio'
		'contact'
		'footer';
	overflow: auto;
}

.header {
	grid-area: header;
	position: relative;
}

.about {
	grid-area: about;
	position: relative;
	padding: 5em;
}

.portfolio {
	grid-area: portfolio;
	position: relative;
	padding: 5em;
}

.contact {
	grid-area: contact;
	position: relative;
	padding: 5em;
}

.footer {
	grid-area: footer;
	position: relative;
	
}

.title {
	position: relative;
	width: fit-content;
	margin: 0 auto;
	padding: 0.75em 0 0 0;
	display: block;
	font-family: 'Ethnocentric';
	color: #ffffff;
    font-size: clamp(0.5em,4.8vw,3em);
}


#colors {
    background: white;
	background: linear-gradient(180deg,rgba(64, 172, 255, 1) 23%, rgba(207, 225, 255, 1) 53%, rgba(112, 136, 255, 1) 54%, rgba(189, 61, 191, 1) 91%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-bar {
	position: relative;
	display: block;
	font-family: serif;
	width: fit-content;
	margin: 0 auto;
}

.link {
	display: inline-block;
	padding: 0.5em 2em;
	background-color: #0a3e3e;
	color: #afffff;
	text-decoration: none;
	font-size: 1.5em;
}

.link:hover {
	color: #ffffff;
	background-color: #045046;
}

.block {
	position: relative;
    display: block;	
}

.flex-block {
	position: relative;
    display: flex;
}

.container {
	padding: 1rem;
}


.fa:before {
	color: #1DA1F2;
	font-size:36px;
	padding: 0.25em;
  
}

.fa-twitter {
	color: #1DA1F2;
  
}


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	display:block;
}
  
.stars {
	background:#000 url('bg/stars1.png') repeat top center;
}

.twinkling {
	background:transparent url('bg/clouds1.png') repeat top center;
	animation:move-twink-back 400s linear infinite;
}

.glass {
	background: rgba(255, 255, 255, 0.19);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3.8px);
	-webkit-backdrop-filter: blur(10.8px);
	border: 1px solid rgba(255, 255, 255, 0.37);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3.8px);
	-webkit-backdrop-filter: blur(3.8px);
	border: 1px solid rgba(255, 255, 255, 0.37);
	color: #FFFFFF;
	margin: 1em 2em;
	overflow: auto;
}

.header {
	font-family: 'Ethnocentric';
	margin: 1em 1em 0em 1em;
}

.text {
	font-family: monospace;
	margin: 1.5em;

}

.planet {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
}

.planet::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-repeat: repeat-x;
	
}

.planet::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%,
		rgb(255 255 255 / 71%) -18%,
		rgb(255 255 255 / 0%) 38%,
		rgb(0 0 0 / 77%) 70%,
		rgb(255 255 255) 150%);
}

#icy {
	width: 17vw;
	height: 17vw;
	top: -3em;
	background-image: url('img/planet1.png');
	background-size: 200% 100%;
	background-repeat: repeat-x;
	animation: spin 20S linear infinite;
	box-shadow: 0 0 40px rgb(93 170 255 / 30%);
	transition: box-shadow .3s;
}

#icy:hover {
	box-shadow: 0 0 50px rgb(93 170 255 / 40%);
}

#hot {
	width: 22vw;
	height: 22vw;
	background-image: url('img/planet2.png');
	background-size: 200% 100%;
	background-repeat: repeat-x;
	animation: spin 20S linear infinite;
	box-shadow: 0 0 40px rgb(255 122 93 / 30%);
	transition: box-shadow .3s;
}

#hot:hover {
	box-shadow: 0 0 50px rgb(255 122 93 / 40%);
}

#temporate {
	width: 15vw;
	height: 15vw;
	top: -1em;
	background-image: url('img/planet3.png');
	background-size: 200% 100%;
	background-repeat: repeat-x;
	animation: spin 20S linear infinite;
	box-shadow: 0 0 40px rgb(69 221 255 / 30%);
	transition: box-shadow .3s;
}

#temporate:hover {
	box-shadow: 0 0 50px rgb(69 221 255 / 40%);
}

@keyframes spin {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200% 0;
	}
}

@media (min-width: 800px) {
	.header {
		grid-area: 1 / 1 / span 1 / span 5;
	}
	
	.about {
		grid-area: 2 / 2 / span 1 / span 1;
	}
	
	.portfolio {
		grid-area: 2 / 3 / span 1 / span 1;
	}
	
	.contact {
		grid-area: 2 / 4 / span 1 / span 1;
	}
	
	.footer {
		grid-area: 3 / 1 / span 1 / span 5;
	}
}