html { background-color: #E3ECDE; background-image: url("static/website/images/background.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } body { background-color: transparent; font-family: "Goudy Bookletter 1911", serif; font-weight: 400; font-style: normal; } h1,h2,h3 { font-family: "Merienda", serif; font-optical-sizing: auto; font-weight: 700; font-style: bold; } h1 { /* color: ##b0dE71; */ /* #B63F31 */ /* color: #423222; */ color: white; text-shadow: 5px 5px 5px black; /* #E3ECDE; */ font-size: 5.0vw; font-weight: 900; /* text-align: justify; */ text-align: center; line-height: 80%; /* -webkit-text-stroke: 1px black; */ } p.buttons { text-align: center; bottom: 5%; left:50%; margin-left:-150px; position: absolute; } a.playbutton { box-shadow: 0px 1px 10px 5px #E3ECDE; background: linear-gradient(to bottom, #7D9D3C 5%, #405122 100%); background-color: rgba(0, 0, 0, 0); background-color: #7D9D3C; border-radius: 12px; border: 1px solid #405122; display: inline-block; cursor: pointer; color: #ffffff; font-family: "Goudy Bookletter 1911", serif; font-size: 24px; padding: 14px 37px; text-decoration: none; text-shadow: 0px 1px 0px #283966; margin-left: auto; margin-right: auto; } @media screen and (max-width: 480px) { h1 { font-size: 8.0vw; } p.buttons { bottom: 1%; left:50%; margin-left:-120px; } #play { padding: 6px 12px; } #instructions { display: none; } } #scrolled-instructions { display: none; /* display: none; */ /* position: fixed; */ /* top: 10%; */ /* left: 10%; */ max-width: 700px; padding: 50px; margin-left: 70px; background-image: url("cozy/static/website/images/parchment-paper.png"); background-repeat: no-repeat; /* background-size: cover; */ background-size:100% 100%; }