@charset "UTF-8";

:root {
  --bg-color: #e8fff4;
  --border-color: #2ac0b3;
  --duration: 1.4s;
  --box-width: 80px;
}
@property --custom-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
@property --custom-visibility {
  syntax: 'visible | hidden';
  initial-value: hidden;
  inherits: false;
}
body {
  background-color: var(--bg-color);
}
.container {
  max-width: 1024px;
  margin: 30px auto;
  padding: 50px;
  border: 3px solid var(--border-color);
  color: var(--text-color);
  transition: opacity var(--duration), visibility var(--duration);
  opacity: var(--custom-opacity);
  visibility: var(--custom-opacity);
}
.heading_1:hover + .container {
  --custom-opacity: 1;
  --custom-visibility: visible;
}
.container p {
  padding: 15px 0;
  line-height: 1.8;
}