@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
		/* GLOBAL STYLING */
		body {
			margin:0;
			display:flex;
			height:100vh;
			align-items:center;
			background-color: black;
			color: #fae965;
			text-align: center;
			font-family: Rubik, "Rubik", sans-serif;
			overflow: hidden;
			box-sizing: border-box;
		}
		/* NOTICE AT THE BOTTOM */
		.bar {
			-webkit-animation: wipe-in-right 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
			animation: wipe-in-right 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
			animation-delay: 1s;
			animation-fill-mode: backwards;
			position: absolute;
			bottom: 0;
			background-color: #5a081c; 
			height: 20px;
			width: 100%;
			color: #fae965;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		/* ALL WEBSITE CONTENT */
		.container {
			width: 85vw;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
		}
		/* WEBSITE CONTENT, MINUS THE NOTICE AT THE BOTTOM */
		.gradient {
			background: #000000;
			background: -webkit-linear-gradient(180deg, rgba(12, 0, 0, 1) 0%, rgba(17, 4, 4, 1) 50%, rgba(255, 68, 68, 1) 100%);
			background: -moz-linear-gradient(180deg, rgba(12, 0, 0, 1) 0%, rgba(17, 4, 4, 1) 50%, rgba(255, 68, 68, 1) 100%);
			background: linear-gradient(180deg, rgba(12, 0, 0, 1) 0%, rgba(17, 4, 4, 1) 50%, rgba(255, 68, 68, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#FF4444", GradientType=0);
			-webkit-animation: fade-in 3s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
			animation: fade-in 3s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
			animation-fill-mode: backwards;
			animation-delay: 2s;
			height: 600px;
			overflow: auto;
			padding: 5vw;
			box-sizing: content-box;
		}
		/* HERO TEXT AND HEADING 1 */
		.enter, h1 {
			font-size: 6vw;
			color: #ff4444;
			text-align: center;
			font-weight: bold;
			font-style: italic;
			letter-spacing: -3px;
			font-kerning: none;
			text-transform: uppercase;
			line-height: 5vw;
			box-sizing: border-box;
		}
		.enter a, h1 a {
			color: #ff4444;
			text-decoration: none;
		}
		.enter a:hover, h1 a:hover {
			color: #fae965;
		}
		/* HEADING 2 */
		h2 {
			font-size: 2rem;
			font-weight: normal;
		}
		/* HORIZONTAL RULE / LINE */
    hr {
      background: linear-gradient(to right, #ff4444, #fae965);
      height: 5px;
      border-style: none;
    }
		/* SELECTED TEXT */ 
		::selection {
		  color: #5a081c;
		  background-color: #fae965;
		}
		/* IMAGE STYLING FOR RESPONSIVE DESIGN */ 
    img {
      max-width: 100%;
      height: auto;
    }  
		/* LOGO AND HEADER */
		header {
			padding-top: 30px;
			padding-bottom: 10px;
			position: sticky;
		}
		header img {
			margin-left: auto;
			margin-right: auto;
			display: block;
		}
		
		/* SECTION BLOCKS */
		section, article {
		  background-color: rgba(255, 68, 68, 0.5);
		  margin-bottom: 10px;
		  padding: 10px;
		  transition: all 0.3s ease;
		}
		
		/* ANIMATION: SECTION BLOCKS GET SHADOW ON HOVER */ 
		section:hover,
		article:hover {
		  box-shadow: 0px 0px 15px rgba(90, 8, 28, 1);
		}
		article {
		  text-align: left;
		}
		
		/* RESPONSIVE STYLING */
		@media only screen and (max-width: 700px) { /* FOR VERTICAL DISPLAYS NARROWER THAN 800 PIXELS */
			.enter, h1 {
			font-size: 9vw;
			padding-left: auto;
			padding-right: auto;
			line-height: 8vw;
			letter-spacing: -0.7vw;
			}
			.bar { 
				font-size: 1rem;
        word-wrap: break-word;
        height: fit-content;
			}
			h2 {
				font-size: 1.4em;
			}
			
			h3 {
			  font-size: 1.2em;
			}
			
		} 
		
		@media only screen and (orientation: landscape)
		and (max-device-width: 980px) { /* FOR MOBILE DISPLAYS NARROWER THAN 900 PIXELS IN LANDSCAPE ORIENTATION */
		  .gradient {
		    height: 30vw;
		  }
		}
		
		@media only screen and (min-width: 800px) {
		  section, article {
  		  padding-left: 6vw;
  		  padding-right: 6vw;
		  }
		}
		
		@media only screen and (max-width: 320px) {
		  header img { /* targets the logo */
		    width: 100%;
		    height: auto;
		  }
		}
		
		@media only screen and (min-width: 320px) {
		  header img { /* targets the logo */
		    width: 200px;
		    height: auto;
		  }
		}
		
		/* INPUT: THE BOX WHERE YOU COPY THE EMBED FOR MY ICON */
		input {
  		font-family: inherit;
      color: inherit;
      background-color: #5a081c;
      padding: 5px;
      box-sizing: border-box;
      border: inherit;
    }
    
		/* ANIMATION: ENTIRE WEBSITE FADE IN */
		@keyframes fade-in {
			0% {
				opacity: 0%
			}
			
			100% {
				opacity: 100%;
			}
		}
		
		/* ANIMATION: NOTICE AT THE BOTTOM, WIPES IN FROM THE LEFT */
		@keyframes wipe-in-right {
		  from {
			clip-path: inset(0 100% 0 0);
		  }
		  to {
			clip-path: inset(0 0 0 0);
		  }
		}

		[transition-style="in:wipe:right"] {
		  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
		}
		
    .blinkies img {
      image-rendering: pixelated;
    }

		/* LINK STYLING */
		a {
			color: #fae965;
			transition: all 0.3s ease;
		}
    /* ANIMATION: LINK CHANGES COLOR ON HOVER */ 
		a:hover, a:active,
		button:hover, button:active{
			color: #fae965;
			background-color: #ff4444;
			transition: all 0.3s ease;
		}

    button {
      background-color: #fae965;
      color: #ff4444;
      border: none;
      padding: 5px;
      font-family: inherit;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    /* HORIZONTAL LIST */ 
    ul#hlist li:not(:first-child)::before {
      content: "|";
      padding: 5px;
    }
    
    ul#hlist {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    ul#hlist > li {
      display: inline-block;
      text-align: center;
    }
    
    /* FIGURE */
    
    figure {
			  margin-left: 0;
			  margin-right: 0;
			}