<div class="screen">
  <div class="background"></div>
  <div class="stage">
    <div class="page">
      <svg class="cupcake"><use xlink:href="#cupcake"></use></svg>
      <h1>Creamy<br />Cupcakes</h1>
      <p>Who wouldn't want more of these?</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#food"></use></svg>
      <h1>Divine Doughnuts</h1>
      <p>Delicious icing and that soft pastry!</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#dessert"></use></svg>
      <h1>Precious Pancakes</h1>
      <p>Dripping with butter and maple syrup...</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#muffin"></use></svg>
      <h1>Magic Muffins</h1>
      <p>Succulent dough, bathed in soft icing!</p>
      <div class="button_fake">Fake</div>
    </div>
  </div>
  <button class="button button_prev">
    <svg class="arrow"><use xlink:href="#left-arrow"></use></svg>
  </button>
  <button class="button button_next">
    <svg class="arrow"><use xlink:href="#right-arrow"></use></svg>
  </button>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="right-arrow" viewBox="0 0 129 129"><title>right-arrow</title><path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" /></symbol>
  <symbol id="left-arrow" viewBox="0 0 129 129"><title>left-arrow</title><path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" /></symbol>
  <symbol id="cupcake" viewBox="0 0 55.277 55.277"><title>cupcake</title><path style="fill:#F75B57;" d="M8.654,20.016C5.117,16.479,4.708,11.163,7.74,8.131l0.914-0.914 c3.032-3.032,8.348-2.623,11.885,0.914c3.282,3.282,3.282,8.603,0,11.885S11.936,23.298,8.654,20.016z"/><path style="fill:#F98282;" d="M12.995,11.183c-1.084,0-2.167-0.412-2.993-1.237c-0.391-0.391-0.391-1.023,0-1.414 c0.39-0.391,1.023-0.391,1.414,0c0.87,0.869,2.287,0.869,3.157,0c0.391-0.391,1.024-0.391,1.415,0c0.39,0.391,0.39,1.024,0,1.414 C15.162,10.771,14.078,11.183,12.995,11.183z"/><path style="fill:#A46F3E;" d="M6.85,33.982l4.5,11.085c2.97,5.46,5.36,6.893,11.163,9.118c3.793,1.455,10.978,1.455,14.742,0 c5.742-2.219,8.171-3.616,11.112-9.023l4.551-11.18c-2.546-2.521-6.667,0.291-9.214,2.812c-2.533-2.521-6.634-0.726-9.167,1.795 c-2.533-2.521-6.634-2.521-9.167,0c-2.559-2.521-6.701-4.316-9.26-1.795C13.551,34.273,9.409,31.462,6.85,33.982z"/><path style="fill:#C18B5F;" d="M19.749,49.09c-0.376,0-0.736-0.213-0.906-0.576l-2.764-5.904c-0.234-0.5-0.019-1.096,0.482-1.329 c0.501-0.233,1.096-0.02,1.33,0.481l2.764,5.904c0.234,0.5,0.019,1.096-0.482,1.329C20.035,49.06,19.891,49.09,19.749,49.09z"/><path style="fill:#C18B5F;" d="M40.018,49.09c-0.142,0-0.287-0.03-0.423-0.095c-0.5-0.233-0.716-0.829-0.482-1.329l2.764-5.904 c0.233-0.501,0.831-0.719,1.33-0.481c0.5,0.233,0.716,0.829,0.482,1.329l-2.764,5.904C40.754,48.877,40.394,49.09,40.018,49.09z"/><path style="fill:#C18B5F;" d="M33.57,51.186c-0.051,0-0.104-0.004-0.156-0.012c-0.545-0.085-0.919-0.597-0.834-1.143l0.921-5.904 c0.085-0.546,0.596-0.916,1.143-0.834c0.545,0.085,0.919,0.597,0.834,1.143l-0.921,5.904C34.48,50.833,34.054,51.186,33.57,51.186z "/><path style="fill:#C18B5F;" d="M26.197,51.186c-0.484,0-0.91-0.353-0.987-0.846l-0.921-5.904c-0.085-0.546,0.289-1.058,0.834-1.143 c0.546-0.082,1.057,0.288,1.143,0.834l0.921,5.904c0.085,0.546-0.289,1.058-0.834,1.143C26.3,51.182,26.248,51.186,26.197,51.186z"/><path style="fill:#FFF5BB;" d="M49.822,25.258c0.146-0.497,0.224-1.006,0.224-1.524c0-2.784-2.196-5.308-5.757-7.161 c0,0,0.094-16.011-12.962-14.717c0,0,4.21,6.817-1.689,6.879c-2.875,0.03-5.551,0.412-7.827,1.048 c1.922,3.226,1.504,7.458-1.273,10.235c-2.88,2.88-7.331,3.231-10.596,1.055c-0.452,0.85-0.713,1.74-0.713,2.662 c0,0.518,0.078,1.027,0.224,1.524c-2.368,1.752-3.746,3.831-3.746,6.063c0,1.527,0.646,2.983,1.81,4.311L6.85,33.982 c2.559-2.521,6.701,0.291,9.26,2.812c2.559-2.521,6.701-0.726,9.26,1.795c2.533-2.521,6.634-2.521,9.167,0 c2.533-2.521,6.634-4.316,9.167-1.795c2.541-2.515,6.649-5.318,9.196-2.826c0.433-0.85,0.668-1.735,0.668-2.648 C53.568,29.088,52.19,27.01,49.822,25.258z"/><path style="fill:#6A3311;" d="M12.708,8.186c-0.513,0-0.949-0.393-0.995-0.912c-0.005-0.053-0.258-2.415-2.202-3.932 C7.956,2.129,5.718,1.739,2.86,2.174c-0.54,0.085-1.056-0.29-1.14-0.837c-0.084-0.546,0.291-1.056,0.837-1.14 c3.44-0.529,6.204,0.007,8.211,1.59c2.636,2.077,2.925,5.184,2.937,5.314c0.046,0.551-0.362,1.034-0.913,1.08 C12.764,8.185,12.736,8.186,12.708,8.186z"/><path style="fill:#F9DA49;" d="M29.886,20.146c-0.552,0-1-0.447-1-1s0.448-1,1-1c4.132,0,8.052-0.523,11.335-1.515 c0.527-0.159,1.087,0.14,1.247,0.668c0.159,0.529-0.14,1.087-0.668,1.246C38.331,19.592,34.211,20.146,29.886,20.146z"/><path style="fill:#F9DA49;" d="M15.053,29.104c-0.114,0-0.229-0.02-0.342-0.061c-1.111-0.404-2.181-0.875-3.181-1.398 c-0.489-0.256-0.679-0.859-0.423-1.35c0.256-0.489,0.86-0.68,1.35-0.422c0.922,0.481,1.911,0.916,2.939,1.291 c0.519,0.189,0.786,0.763,0.597,1.282C15.845,28.852,15.461,29.104,15.053,29.104z"/><path style="fill:#F9DA49;" d="M29.636,31.451c-2.042,0-4.073-0.123-6.08-0.37c-0.548-0.067-0.938-0.565-0.871-1.114 c0.068-0.548,0.575-0.938,1.115-0.87c4.012,0.493,8.124,0.472,12.222-0.061c0.55-0.08,1.049,0.314,1.121,0.862 s-0.315,1.05-0.863,1.12C34.063,31.307,31.843,31.451,29.636,31.451z"/><path style="fill:#F9DA49;" d="M41.71,29.931c-0.44,0-0.843-0.292-0.964-0.737c-0.145-0.532,0.169-1.082,0.702-1.228 c2.07-0.564,3.914-1.271,5.48-2.098c0.488-0.256,1.094-0.07,1.351,0.418c0.258,0.488,0.071,1.093-0.417,1.352 c-1.695,0.895-3.676,1.654-5.887,2.258C41.886,29.92,41.797,29.931,41.71,29.931z"/></symbol>
  <symbol id="food" viewBox="0 0 57.008 57.008"><title>food</title><path style="fill:#FBD490;" d="M57,24.004h-0.077c0-11.046-12.76-20-28.5-20S0,12.958,0,24.004c0,0,0.016,9.436,0.016,9.438 c0,11.046,12.667,19.563,28.408,19.563s28.585-8.923,28.585-19.969C57.008,33.034,57,24.004,57,24.004z M29,29.004 c-4.524,0-8.342-1.804-9.577-4.277c2.672-1.202,5.98-1.923,9.577-1.923s6.905,0.721,9.577,1.923 C37.342,27.2,33.524,29.004,29,29.004z"/><path style="fill:#D85C81;" d="M0,24.004c0,0,0.006,3.827,0.011,6.608c0.057,0.774,0.701,1.392,1.489,1.392 c0.77,0,1.402-0.59,1.484-1.339C2.989,30.671,2.995,30.677,3,30.682v4.821c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v4 c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v-2c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v5c0,0.825,0.675,1.5,1.5,1.5 s1.5-0.675,1.5-1.5v-2c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v3.5c0,1.1,0.9,2,2,2s2-0.9,2-2v-1.5c0,0.825,0.675,1.5,1.5,1.5 s1.5-0.675,1.5-1.5v3.5c0,1.1,0.9,2,2,2s2-0.9,2-2v-4c0,1.1,0.9,2,2,2s2-0.9,2-2v1.5c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5 v-3.5c0,1.1,0.9,2,2,2s2-0.9,2-2v3.5c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v-5c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5 v1c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v-4c0,0.825,0.675,1.5,1.5,1.5s1.5-0.675,1.5-1.5v-3c0,0.825,0.676,1.532,1.5,1.5 c2.927-0.115,3.464-3.887,3.503-6.821c0-0.318-0.001-0.625-0.001-0.916c-0.018-1.03-0.079-1.869-0.079-2.263 c0-11.046-12.76-20-28.5-20S0,12.958,0,24.004z M29,22.804c3.597,0,6.905,0.721,9.577,1.923C37.342,27.2,33.524,29.004,29,29.004 s-8.342-1.804-9.577-4.277C22.095,23.525,25.403,22.804,29,22.804z"/><g> <path style="fill:#FBD490;" d="M29.088,17.004c-5.523,0-10,2.686-10,6c0,0.599,0.161,1.173,0.435,1.718 c2.67-1.199,5.973-1.918,9.565-1.918s6.894,0.719,9.565,1.918c0.274-0.545,0.435-1.119,0.435-1.718 C39.088,19.69,34.611,17.004,29.088,17.004z"/> </g><path style="fill:#A4E869;" d="M12.476,28.588c-0.441,0-0.844-0.293-0.965-0.739c-0.144-0.532,0.171-1.082,0.704-1.226l4.317-1.168 c0.531-0.15,1.083,0.17,1.227,0.704c0.144,0.532-0.171,1.082-0.704,1.226l-4.317,1.168C12.65,28.577,12.562,28.588,12.476,28.588z"/><path style="fill:#FFFFFF;" d="M28.301,36.075c-0.104,0-0.211-0.017-0.316-0.052l-3-1c-0.524-0.174-0.807-0.74-0.632-1.265 c0.175-0.523,0.74-0.809,1.265-0.632l3,1c0.524,0.174,0.807,0.74,0.632,1.265C29.11,35.81,28.72,36.075,28.301,36.075z"/><path style="fill:#A4E869;" d="M47.635,28.904c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4 C48.635,28.457,48.187,28.904,47.635,28.904z"/><path style="fill:#48A0DC;" d="M24.042,12.514c-0.274,0-0.547-0.112-0.744-0.332l-2.114-2.353c-0.369-0.41-0.335-1.043,0.075-1.412 c0.411-0.367,1.044-0.334,1.412,0.076l2.114,2.353c0.369,0.41,0.335,1.043-0.075,1.412C24.519,12.429,24.28,12.514,24.042,12.514z"/><path style="fill:#48A0DC;" d="M49.868,18.504c-0.104,0-0.211-0.017-0.316-0.052l-3-1c-0.524-0.174-0.807-0.74-0.632-1.265 c0.174-0.523,0.74-0.809,1.265-0.632l3,1c0.524,0.174,0.807,0.74,0.632,1.265C50.677,18.239,50.287,18.504,49.868,18.504z"/><path style="fill:#A4E869;" d="M35.927,33.262c-0.02,0-0.04-0.001-0.06-0.002c-0.551-0.032-0.972-0.506-0.939-1.057l0.083-1.411 c0.032-0.552,0.508-0.963,1.057-0.939c0.551,0.032,0.972,0.506,0.939,1.057l-0.083,1.411 C36.893,32.852,36.453,33.262,35.927,33.262z"/><path style="fill:#D75A4A;" d="M43.801,35.575c-0.256,0-0.512-0.098-0.707-0.293l-1-1c-0.391-0.391-0.391-1.023,0-1.414 s1.023-0.391,1.414,0l1,1c0.391,0.391,0.391,1.023,0,1.414C44.313,35.477,44.057,35.575,43.801,35.575z"/><path style="fill:#48A0DC;" d="M15.635,36.075c-0.256,0-0.512-0.098-0.707-0.293l-1-1c-0.391-0.391-0.391-1.023,0-1.414 s1.023-0.391,1.414,0l1,1c0.391,0.391,0.391,1.023,0,1.414C16.146,35.977,15.891,36.075,15.635,36.075z"/><path style="fill:#A4E869;" d="M43.831,13.544c-0.532,0-0.975-0.42-0.998-0.956l-0.062-1.413c-0.024-0.552,0.404-1.019,0.956-1.043 c0.546-0.023,1.019,0.404,1.042,0.955l0.062,1.413c0.024,0.552-0.404,1.019-0.956,1.043C43.861,13.544,43.846,13.544,43.831,13.544 z"/><g> <line style="fill:#D75A4A;" x1="11.948" y1="13.759" x2="12.948" y2="17.759"/> <path style="fill:#D75A4A;" d="M12.947,18.759c-0.448,0-0.855-0.303-0.969-0.758l-1-4c-0.134-0.535,0.192-1.078,0.728-1.212 c0.537-0.135,1.079,0.19,1.213,0.728l1,4c0.134,0.535-0.192,1.078-0.728,1.212C13.109,18.749,13.028,18.759,12.947,18.759z"/> </g><path style="fill:#FBD490;" d="M8.135,24.304c-0.256,0-0.512-0.098-0.707-0.293l-1-1c-0.391-0.391-0.391-1.023,0-1.414 s1.023-0.391,1.414,0l1,1c0.391,0.391,0.391,1.023,0,1.414C8.646,24.206,8.391,24.304,8.135,24.304z"/><path style="fill:#D75A4A;" d="M36.968,13.337c-0.256,0-0.512-0.098-0.707-0.293l-1-1c-0.391-0.391-0.391-1.023,0-1.414 s1.023-0.391,1.414,0l1,1c0.391,0.391,0.391,1.023,0,1.414C37.479,13.239,37.224,13.337,36.968,13.337z"/></symbol>
  <symbol id="dessert" viewBox="0 0 58 58"><title>dessert</title><path style="fill:#E6E6E6;" d="M54.074,29.568c0.479,0.707,0.403,1.444,0.403,2.204c0,0.018-0.004,0.037-0.004,0.055 c0,0.015,0.004,0.029,0.004,0.044c0,5.094-11.406,9.677-25.476,9.677S3.524,36.965,3.524,31.871c0-0.015,0.004-0.029,0.004-0.044 c0-0.018-0.004-0.037-0.004-0.055c0-0.76-0.143-1.498,0.336-2.204C1.158,31.163,0,33.04,0,35.048C0,40.847,8.5,48,29,48 c22.625,0,29-7.153,29-12.952C58,33.04,56.775,31.163,54.074,29.568z"/><path style="fill:#231F20;" d="M35,40.548c-2.206,0-4-1.794-4-4c0-0.553,0.447-1,1-1s1,0.447,1,1c0,1.103,0.897,2,2,2s2-0.897,2-2 c0-0.553,0.447-1,1-1s1,0.447,1,1C39,38.754,37.206,40.548,35,40.548z"/><path style="fill:#FBD490;" d="M4.128,29.888c-0.388,0.639-0.604,1.302-0.604,1.983c0,5.094,11.406,9.677,25.476,9.677 s25.476-4.583,25.476-9.677c0-0.681-0.216-1.344-0.604-1.983H4.128z"/><path style="fill:#FBD490;" d="M4.128,29.888c-0.388,0.639-0.604,1.302-0.604,1.983c0,5.094,11.406,9.677,25.476,9.677 s25.476-4.583,25.476-9.677c0-0.681-0.216-1.344-0.604-1.983H4.128z"/><path style="fill:#D8B173;" d="M4.128,26c-0.388,0.639-0.604,1.302-0.604,1.983c0,5.094,11.406,9.677,25.476,9.677 s25.476-4.583,25.476-9.677c0-0.681-0.216-1.344-0.604-1.983H4.128z"/><path style="fill:#A46F3E;" d="M53.872,17.868C51.012,13.685,41.435,10,29,10S6.988,13.685,4.128,17.868 c-0.388,0.639-0.604,1.302-0.604,1.983c0,4.85,10.342,9.234,23.476,9.643v3.554c0,1.375,1.125,2.5,2.5,2.5s2.5-1.125,2.5-2.5v3.5 c0,1.65,1.35,3,3,3s3-1.35,3-3V37c0,1.1,0.9,2,2,2s2-0.9,2-2v-8.891c7.465-1.742,12.476-4.885,12.476-8.259 C54.476,19.169,54.26,18.507,53.872,17.868z"/><g> <path style="fill:#FBD490;" d="M27,33.048v-3.554c-11.28-0.351-20.494-3.635-22.872-7.627h0c-0.388,0.639-0.604,1.302-0.604,1.983 c0,4.856,10.366,9.244,23.522,9.644C27.019,33.349,27,33.201,27,33.048z"/> <path style="fill:#FBD490;" d="M53.868,21.867C52.33,24.442,47.949,26.721,42,28.109v3.999c7.465-1.742,12.476-4.885,12.476-8.259 c0-0.681-0.216-1.344-0.604-1.983H53.868z"/> </g><path style="fill:#FBD490;" d="M32.577,25.774c-0.553,0-1-0.447-1-1s0.447-1,1-1c9.265,0,16.188-2.776,16.188-5.259 c0-0.553,0.447-1,1-1s1,0.447,1,1C50.765,23.23,41.394,25.774,32.577,25.774z"/><path style="fill:#F9D70B;" d="M19,23.548h-3c-1.1,0-2-0.9-2-2v-3c0-1.1,0.9-2,2-2h3c1.1,0,2,0.9,2,2v3 C21,22.648,20.1,23.548,19,23.548z"/><path style="fill:#FBD490;" d="M27,20h-3c-1.1,0-2-0.9-2-2v-3c0-1.1,0.9-2,2-2h3c1.1,0,2,0.9,2,2v3C29,19.1,28.1,20,27,20z"/></symbol>
  <symbol id="muffin" viewBox="0 0 512 512"><title>muffin</title><path style="fill:#71C285;" d="M471.579,296.421c35.93-98.807-53.895-134.737-53.895-134.737h-3.472 c-2.503,3.897-6.297,6.79-10.718,8.172c-96.742,29.879-212.706,16.45-267.915,7.105c-9.709-1.624-18.333-7.142-23.874-15.277h-8.407 c0,0-98.807,35.93-62.877,134.737l6.724,17.965l415.979,0.738L471.579,296.421z" /><path style="fill:#7ED09E;" d="M408.802,137.768c-5.569-3.479-11.672-6.021-18.065-7.522c-58.517,3.475-117.11-5.391-171.98-26.021 c-20.375-7.405-35.881-24.249-41.58-45.165l-2.019-0.673c-35.999,11.54-62.605,42.126-69.048,79.376 c-2.129,9.726-0.183,19.899,5.384,28.153s14.271,13.869,24.086,15.538c55.209,9.345,171.173,22.775,267.915-7.105 c7.517-2.364,13.015-8.825,14.146-16.622S415.337,142.171,408.802,137.768L408.802,137.768z" /><g><path style="fill:#805333;" d="M444.632,296.421L363.789,512h19.964c15.001,0,28.424-9.32,33.666-23.376l62.533-167.692 c2.164-5.529,1.456-11.77-1.891-16.674c-3.347-4.904-8.901-7.837-14.838-7.837H444.632z" /><path style="fill:#805333;" d="M67.368,296.421L148.211,512h-19.964c-15.001,0-28.424-9.32-33.665-23.376L32.048,320.932 c-2.164-5.529-1.456-11.77,1.892-16.674s8.901-7.837,14.838-7.837H67.368z" /></g><g><path style="fill:#CB8252;" d="M112.42,270.677l-45.051,25.744L148.211,512h44.912V296.421l-45.051-25.744 C137.026,264.365,123.466,264.365,112.42,270.677z" /><path style="fill:#CB8252;" d="M363.928,270.677l-45.051,25.744V512h44.912l80.842-215.579l-45.051-25.744 C388.535,264.365,374.974,264.365,363.928,270.677z" /></g><path style="fill:#805333;" d="M318.877,296.421V512H193.123V296.421l45.051-25.744c11.046-6.312,24.606-6.312,35.652,0 L318.877,296.421z" /><path style="fill:#71C285;" d="M193.123,0c0,0-0.312,0.312-0.868,0.91c-15.071,16.445-20.925,39.334-15.599,60.996 s21.124,39.227,42.102,46.81c54.869,20.63,113.463,29.496,171.979,26.021c0,0-8.982-107.789-107.789-107.789 C282.947,26.947,202.105,35.93,193.123,0z" /></symbol>
</svg>

@import url('https://fonts.googleapis.com/css?family=Varela+Round');

$size: 80vh;

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  align-items: center;
  background: #fff;
  display: flex;
  font-family: 'Varela Round', sans;
  justify-content:center;
  overflow: hidden;
}

.screen {
  border-radius: 5vh;
  box-shadow: 0px 20px 25px 1px rgba(0,0,0,0.25);
  height: $size;
  overflow: hidden;
  position: relative;
  width: $size / 2;
  
  &::before {
    background: #fff;
    border-bottom-left-radius: 3vh;
    border-bottom-right-radius: 3vh;
    content: '';
    height: 3vh;
    left: -25%;
    margin-left: 50%;
    position: absolute;
    top: -1px;
    transform: rotateX(-10deg);
    width: 50%;
    z-index: 1;
  }
  
  &:hover + .hint {
    opacity: 0.4;
    transition: opacity 1200ms ease-out;
  }
}

.background {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: filter 500ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stage {
  height: $size;
  left: 0;
  position: absolute;
  bottom: 0;
  transform-origin: 50% 150%;
  transform: translate3d(0,0,0);
  transition: transform 500ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
  width: $size / 2;
}

.page {
  bottom: 0;
  left: 0;
  height: $size;
  padding: 0 5vh;
  position: absolute;
  text-align: center;
  transform-origin: 50% 150%;
  width: $size / 2;
  
  /* debug */
  color: #fff;

  &:nth-child(2) { transform: rotateZ(90deg)  }
  &:nth-child(3) { transform: rotateZ(180deg) }    
  &:nth-child(4) { transform: rotateZ(270deg) }
}

.button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 9vh;
  margin-top: -4.5vh;
  padding: 0;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  transform: scaleX(0.8);
  transition: opacity 200ms linear;
  width: 7vh;
  
  &:focus{
    outline: none; // Just for demo!
  }
  
  &:hover {
    opacity: 0.7;
  }
}

.arrow {
  fill: #fff;
  height: 7vh;
  width: 7vh;
}

.button_next {
  right: 0;
}

h1 {
  font-size: 5vh;
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 3vh;
}

p {
  font-size: 3vh;
  line-height: 1.2;
  margin-bottom: 5vh;
}

.button_fake {
  background-color: #ff655b;
  border-radius: 3vh;
  font-size: 2.7vh;
  margin: 0 auto;
  padding: 1.5vh;
  text-transform: uppercase;
  width: 25vh;
}

.cupcake {
  height: 25vh;
  width: 25vh;
  margin-top: 10vh;
  margin-bottom: 5vh;
}

const stage = document.querySelector('.stage');
const background = document.querySelector('.background');

let rotation = 0;

document.querySelector('.button_prev')
  .addEventListener('click', () => applyStyles(rotation +=90));

document.querySelector('.button_next')
  .addEventListener('click', () => applyStyles(rotation -=90));

function applyStyles() {
  background.style.filter = `hue-rotate(${rotation}deg)`;
  stage.style.transform = `rotateZ(${rotation}deg)`;
}