*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.triangle {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle; }

.triangle-1 {
  width: 70px;
  height: 70px;
  border-bottom: solid 42px #FF007B;
  border-left: solid 42px #FF007B;
  border-right: solid 42px transparent;
  border-top: solid 42px transparent;
  -webkit-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  transform: rotate(-13deg);
  position: absolute;
  right: -18px;
  top: -32px;
  z-index: 10; }

.night-mode .triangle-1 {
  border-bottom: solid 42px #E2FF00;
  border-left: solid 42px #E2FF00; }

.night-mode .triangle-2 {
  border-bottom: solid 60px #FFFFFF;
  border-left: solid 60px #FFFFFF; }
  .night-mode .triangle-2 span {
    color: black; }

.triangle-2 {
  width: 120px;
  height: 120px;
  border-bottom: solid 60px white;
  border-left: solid 60px white;
  border-right: solid 60px transparent;
  border-top: solid 60px transparent;
  -webkit-transform: rotate(167deg);
  -ms-transform: rotate(167deg);
  transform: rotate(302deg);
  position: absolute;
  right: -67px;
  top: -101px;
  z-index: 50; }
  .triangle-2 span {
    -webkit-transform: rotate(59deg);
    -ms-transform: rotate(59deg);
    transform: rotate(59deg);
    display: block;
    font-size: 20pt;
    position: relative;
    top: -22px;
    left: -50px; }

.triangle-2:hover .icon-fullscreen {
  display: block !important; }

.icon-fullscreen {
  z-index: 100;
  display: none !important;
  color: white;
  font-size: 18px;
  position: absolute;
  top: -32px;
  left: -64px; }

body {
  overflow-x: hidden; }

.night-mode .triangle-2 {
  border-bottom: solid 60px white;
  border-left: solid 60px white; }
  .night-mode .triangle-2 span {
    color: black; }

#buttons {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.333rem; }