/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --white: #edededff;
  --blue: #78c0edff;
  --background-position-xe: url"/images/bluesilkbg.jpg";
  --background-repeat: repeat;
}

/*Falling Chikoritas!*/
	@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-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
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}

/**/

@font-face {
  font-family: poppins;
  src: url(Poppins-Regular.ttf);
}

body {
  background-color: var(--blue);
  font-family: poppins;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* ------------------------ HTML AND BODY DESIGN ------------------------ */
/* --- images --- */
img {
  border-radius: 20%;
  width: 200px;
}

/* --- button --- */
button {
  background-color: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 4%;
  font-size: 20px;
  padding: 10px;
}

/* --- text --- */
.h1 {
  font-size: 34px;
  font-weight: bold;
}

.h3 {
  font-size: 26px;
  font-weight: bold;
}

/* --- link color attributes --- */
a {
  color: var(--blue);
}

/* --- emphasis --- */
i {
  color: var(--blue);
}

mark {
  background-color: var(--blue);
  color: var(--white);
}

.blue {
  color: var(--blue);
}

/* ------------------------ GRID LAYOUT ------------------------ */
.grid-container {
  display: grid;
  grid-template-areas:
    "back back back back"
    "icon title title title"
    "links links links links"
    "infoL infoL infoR infoR"
    "xinfo xinfo xinfo xinfo"
    "images images images images"
    "more more more more"
    "more2 more2 more2 more2";
}

.grid-container > div {
  padding: 15px;
}

/* --- G1 // back --- */
.g1 {
  grid-area: back;
}

/* --- G2 // icon --- */
.g2 {
  grid-area: icon;
  text-align: center;
}

/* --- G3 // title --- */
.g3 {
  grid-area: title;
}

/* --- G4 // links --- */
.g4 {
  grid-area: links;
  text-align: center;
  border: 1px solid var(--blue);
}

/* --- G5 // left info --- */
.g5 {
  grid-area: infoL;
  text-align: : left;
}

/* --- G6 // right info --- */
.g6 {
  grid-area: infoR;
  text-align: right;
}

/* --- G7 // about/extra info --- */
.g7 {
  grid-area: xinfo;
  text-align: center;
}

/* --- G8 // images --- */
.g8 {
  grid-area: images;
}

/* --- G9 // more 1 --- */
.g9 {
  grid-area: more;
}

/* --- G10 // more 2 --- */
.g10 {
  grid-area: more2;
  border: 2px solid var(--blue);
}

/* ------------------------ OTHER CLASSES ------------------------ */
.links {
  padding: 5px;
  margin: 20px;
}

.previewcontainer {
  text-align: center;
}

.previewimg {
  padding: 3px;
}