body {
 font-family: Arial, Helvetica, sans-serif;
 background: #ffffff;
 color: #111111;
 margin: 0;
 padding: 48px 24px 80px;
 }
 
 .container {
 max-width: 1320px;
 margin: 0 auto;
 }
 
 h1 {
 font-size: 108px;
 font-weight: 900;
 letter-spacing: -4px;
 line-height: 0.95;
 margin: 0 0 18px;
 color: #111111;
 }
 
 .subtitle {
 font-size: 34px;
 line-height: 1.2;
 color: #667085;
 font-weight: 700;
 margin: 0 0 46px;
 }
 
 .box {
 background: #ececef;
 border: 6px solid #111111;
 box-shadow: 10px 10px 0 #111111;
 padding: 52px 56px 48px;
 }
 
 .select-wrap {
 margin-bottom: 38px;
 }
 
 label {
 display: block;
 font-size: 26px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #737b8c;
 margin-bottom: 16px;
 }
 
 select {
 width: 100%;
 box-sizing: border-box;
 font-size: 34px;
 font-weight: 800;
 color: #111111;
 background: #e3e9f3;
 border: 6px solid #111111;
 border-radius: 10px;
 padding: 18px 20px;
 appearance: auto;
 }
 
 select:focus {
 outline: none;
 box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.12);
 }
 
 button {
  background: #111111;
  color: #ffffff; /* your purple */

  border: 6px solid #111111;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  font-size: 30px;
  font-weight: 900;
  padding: 20px 40px;
  cursor: pointer;

  /* FIX 👇 */
  box-shadow: 10px 10px 0 #8B5CF6;
}
 
 button:hover {
 transform: translate(1px, 1px);
 box-shadow: 10px 10px 0 #F2D13D;
 }
 
 button:active {
 transform: translate(2px, 2px);
 box-shadow: 8px 8px 0 #111111;
 }
 
 #result {
 margin-top: 56px;
 }
 
 .result-card {
 background: #111111;
 color: #ffffff;
box-shadow: 10px 10px 0 #8B5CF6;
 padding: 42px 48px;
 text-align: left;
 }
 
 .result-card.warning {
 background: #fff4d6;
 color: #111111;
 border: 6px solid #111111;
 }
 
 .result-card.warning .result-kicker {
 color: #8a5a00;
 }
 
 .result-card.warning .result-wine {
 color: #111111;
 }
 
 .result-card.warning .result-label {
 color: #6f5a2f;
 }
 
 .result-card.warning .result-divider {
 background: #d8c8a0;
 }
 
 .result-kicker {
 color: #f2d13d;
 font-size: 22px;
 font-weight: 900;
 letter-spacing: 2px;
 text-transform: uppercase;
 margin-bottom: 18px;
 }
 
 .result-wine {
 font-size: 60px;
 line-height: 1.04;
 font-weight: 900;
 margin-bottom: 18px;
 }
 
 .result-divider {
 height: 2px;
 background: #8B5CF6;
 margin: 0 0 28px;
 }
 
 .result-section {
 margin-top: 24px;
 }
 
 .result-label {
 color: #9ba7be;
 font-size: 19px;
 font-weight: 900;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 10px;
 }
 
 .result-copy {
 font-size: 28px;
 line-height: 1.45;
 font-weight: 700;
 }
 
 .footer {
 margin-top: 72px;
 text-align: center;
 }
 
 .footer-inner {
 font-size: 19px;
 color: #8a93a5;
 font-weight: 700;
 letter-spacing: 0.5px;
 }
 
 .footer a {
 color: #8a93a5;
 text-decoration: none;
 border-bottom: 1px solid #8a93a5;
 padding-bottom: 1px;
 }
 
 .footer a:hover {
 color: #111111;
 border-color: #111111;
 }
 
 .divider {
 margin: 0 10px;
 opacity: 0.65;
 }
 
 @media (max-width: 900px) {
 body {
 padding: 28px 18px 60px;
 }
 
 h1 {
 font-size: 68px;
 letter-spacing: -2px;
 }
 
 .subtitle {
 font-size: 24px;
 margin-bottom: 30px;
 }
 
 .box {
 padding: 30px 24px;
 box-shadow: 10px 10px 0 #111111;
 }
 
 label {
 font-size: 20px;
 margin-bottom: 14px;
 }
 
 select {
 font-size: 24px;
 padding: 14px 16px;
 border-width: 4px;
 }
 
 button {
 width: 100%;
 font-size: 24px;
 padding: 18px 24px;
 border-width: 4px;
 box-shadow: 6px 6px 0 #111111;
 }
 
 #result {
 margin-top: 34px;
 }
 
 .result-card {
 padding: 28px 24px;
 box-shadow: 10px 10px 0 #111111;
 border-width: 4px;
 }
 
 .result-kicker {
 font-size: 18px;
 margin-bottom: 14px;
 }
 
 .result-wine {
 font-size: 40px;
 }
 
 .result-copy {
 font-size: 22px;
 }
 
 .footer {
 margin-top: 56px;
 }
 
 .footer-inner {
 font-size: 16px;
 line-height: 1.7;
 }
 
 .divider {
 margin: 0 6px;
 }
 }