:root{--product-accent: yellow;--hero-colour: rgb(3, 3, 39)}.main-hero{background-color:var(--hero-colour);color:white;width:100%;padding-block:2rem;padding-inline:calc(max(1rem, calc((100% - 60rem) / 2)));display:flex;flex-direction:column;box-shadow:0px 0rem 2rem 2rem var(--hero-colour);margin-bottom:5rem}#special-boy-image{align-self:center;display:flex;flex-direction:row;justify-content:center}#special-boy-image>img{height:40rem;width:auto}#big-slogan{font-size:4rem;align-self:center;padding-inline:2rem}.accent-colour{color:var(--product-accent);text-shadow:0px 0px 0.1em var(--product-accent)}#selling-points{display:flex;flex-direction:row;justify-content:space-evenly;padding-top:1rem;gap:1rem;width:100%;font-size:1.5rem;text-align:center;flex-wrap:wrap}#instructions{display:flex;flex-direction:column;gap:2rem;width:100%;padding-inline:calc(max(1rem, calc((100% - 60rem) / 2)) + 1rem);padding-bottom:2rem}#instructions>*:nth-child(1){align-self:flex-start;font-size:2rem}#instructions>*:nth-child(2){align-self:center;font-size:3rem}#instructions>*:nth-child(3){align-self:flex-end;font-size:2rem}#field-info{background-image:url("/guy.jpeg");padding-inline:calc(max(1rem, calc((100% - 60rem) / 2)));padding-top:2rem;padding-bottom:4rem;background-position:15% 85%;background-size:150%;background-repeat:no-repeat;width:100%;height:32rem;display:flex;flex-direction:row;justify-content:flex-start}#field-info>#info-para{height:100%;width:25rem;background:white;border-radius:0.5rem;padding:1rem;font-size:1.25rem;max-width:100%}#field-info>#info-para>p{margin-block:0px;padding-block:0.5rem}#field-info>#info-para>h3{margin-block:0.5rem}#demo{width:100%;background:var(--hero-colour);box-shadow:0px 0rem 2rem 2rem var(--hero-colour);padding-inline:calc(max(1rem, calc((100% - 60rem) / 2)));color:white;padding-block:2rem;font-size:2rem;display:flex;flex-direction:column;gap:2rem}#demo>span{padding-left:1rem}#demo>video{align-self:center;border-radius:0.5rem;overflow:hidden;width:calc(100% - 2rem);height:auto}#order{padding-top:4rem;padding-bottom:2rem;padding-inline:calc(max(1rem, calc((100% - 60rem) / 2)));width:100%}#order>h2{font-size:2rem}#order>p{font-size:1.25rem}#order a{color:var(--titu-red)}@media screen and (max-width: 45rem){#field-info{flex-direction:column;background-size:cover;justify-content:flex-end;height:40rem}#field-info>#info-para{height:unset}}
