body {
	background-repeat: repeat;
}

.ethical-bg {
	background-image: url("/static/good_wallpaper.webp");
}

.unethical-bg {
	background-image: url("/static/evil_wallpaper.webp");
}

.skunk-picture {
	width: 100%;
}

.ethical-skunk {
	background-image: url("/static/ethical_skunk.png");
	background-position-x: 36%;
	width: 100%;
}

.ethical-skunk:hover {
	-webkit-box-shadow:0px 0px 60px 5px rgba(255,238,46,0.9);
	-moz-box-shadow: 0px 0px 60px 5px rgba(255,238,46,0.9);
	box-shadow: 0px 0px 60px 5px rgba(255,238,46,0.9);
	animation: breathe 2.5s infinite;
}

.unethical-skunk {
	background-image: url("/static/unethical_skunk.png");
	background-position-x: 61%;
	width: 100%;
	transform: rotate(13deg);
}

.unethical-skunk:hover {
	-webkit-box-shadow:0px 0px 60px 5px rgba(92,8,120,0.9);
	-moz-box-shadow: 0px 0px 60px 5px rgba(92,8,120,0.9);
	box-shadow: 0px 0px 60px 5px rgba(92,8,120,0.9);
	transform: rotate(13deg);
	animation: breathe-unethical 2.5s infinite;
}


.arthold {
	display: block;
	margin: 0 auto;
}

.frame {
	background-size: 88%;
	background-position-y: 50%;
	background-repeat: no-repeat;
}

.send-ethical, .send-unethical {
	cursor: pointer;
}

.frame:hover {
}

@media (prefers-reduced-motion: reduce) {
  .ethical-skunk:hover {
	  animation: none
  }

  .unethical-skunk:hover {
	  animation: none
  }
}


@media (orientation: portrait) {
	.arthold { width: 80%; }
	.plate { width: 40%; }
}

@media (orientation: landscape) {
	.arthold { width: 50%; }
	.plate { width: 25%; }
}

.plate {
	display: block;
	margin: 0 auto;
	margin-top: 1em;
}

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes breathe-unethical {
  0% { transform: scale(1) rotate(13deg); }
  50% { transform: scale(1.05) rotate(11deg); }
  100% { transform: scale(1) rotate(13deg); }
}

@font-face {
    font-family: 'Caveat';
    src: url('/static/Caveat-Regular.woff2') format('woff2'),
        url('/static/Caveat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.sticky {
	color:#000;
	background:#ffc;
	display:block;
	height:200px;
	width:200px;
	padding:1em;
	box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	text-align: center;
	align-content: center;
	text-decoration: none;
	font-family: Caveat, cursive;
	font-size: 24pt;
}

.unethical-stick:nth-child(1) {
	transform: rotate(3deg);
}

.unethical-stick:nth-child(2) {
	transform: rotate(-7deg);
}

.unethical-stick:nth-child(3) {
	transform: rotate(-4deg);
}

.unethical-stick:nth-child(4) {
	transform: rotate(8deg);
}

.unethical-stick-message {
	transform: rotate(3deg);
}

.ethical-stick:nth-child(1) {
	transform: rotate(-2deg);
}

.ethical-stick:nth-child(2) {
	transform: rotate(3deg);
}

.ethical-stick:nth-child(3) {
	transform: rotate(2deg);
}

.ethical-stick:nth-child(4) {
	transform: rotate(-1deg);
}

.ethical-stick-message {
	transform: rotate(1deg);
}

.flexy {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-top: 5em;
}

.flexed {
	flex: none;
}

a {
	text-decoration: none;
}