:root {
	/* Project Colors */
	  --color-cod-gray: #111;
	  --color-seashell: #f1f1f1;
	  --color-silver: #ccc;
	  --color-white: #fff;
	  --color-gallery: #eee;
	  --color-mercury: #e6e6e6;
	  --color-shalimar: #fff9c0;
	  --color-jelly-bean: #21759b;
	  --color-dove-gray: #666;
	  --color-royal-blue: #4169e1;
	  --color-fresh-eggplant: #800080;
	  --color-lucky-point: #191970;
	  --color-tundora: #404040;
	  --color-black: #000;
  
	  --c-background-button-netscape: var(--color-silver);
	  --c-link: blue;
  }
  
  body {
	box-sizing: border-box;
	background-color: teal;
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	gap: 1rem;
  }
  
  /* 90s Netscape button */
  .button--netscape {
	  align-items: center;
	  background: var(--c-background-button-netscape);
	  border-color: var(--color-gallery) var(--color-cod-gray) var(--color-cod-gray) var(--color-gallery);
	  border-radius: 0;
	  border-width: 2px;
	  cursor: pointer;
	  display: inline-flex;
	  font-family: "Times New Roman";
	  font-weight: 700;
	  min-height: 31px;
	  min-width: 88px;
	  padding: 2px 4px 2px 2px;
	  position: relative;
	  white-space: nowrap;
	
	/* Zoom */
	zoom: 1.5;
  
	  &:hover,
	  &:focus {
		  outline: 1px dotted var(--c-link);
	  }
  
	  &:active {
		  border-color: var(--color-cod-gray) transparent transparent var(--color-cod-gray);
	  padding: 4px 2px 0px 4px;
	  }
  
	  &::before {
		  align-items: center;
		  background: var(--color-royal-blue);
		  content: "😀";
		  display: flex;
		  flex: 0 0 24px;
		  font-size: 14px;
		  height: 23px;
		  justify-content: center;
		  line-height: 0;
		  margin-right: 4px;
		  overflow: hidden;
		  padding-top: 2px;
		  width: 24px;
	  }
  }
  
  .button--theme {
	&::before {
	  background: var(--color-cod-gray);
	  content: "💡";
	  text-shadow: 0 0 4px #FF6;
	}
  }
  
  .button--dark {
	background: var(--color-cod-gray);
	color: red;
	  border-top-color: var(--color-cod-gray);
	border-left-color: var(--color-cod-gray);
	
	&::before {
		  background: #660000;
	  content: "🎃";
	  text-shadow: 0 0 4px black;
	}
  }
  
  .button--text {
	font-size: 10px;
	
	& em {
	  color: red;
	  font-family: cursive;
	  display: block;
	  font-weight: bold;
	  font-size: 20px;
	  line-height: 1;
	  padding: 0 4px 0 2px;
	}
	
	&::before {
		  background: #006633;
	  content: "💸";
	  text-shadow: 0 0 9px yellow;
	}
  }
  
  .button--letter {
	
	font-size: 20px;
	line-height: 1;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px #000000;
	font-style: italic;
	
	&::before {
		  background: #003366;
	  content: "🌎";
	  text-shadow: 0 0 3px hsla(0deg, 0%, 100%, 0.5);
	  font-style: normal;
	}
  }