.button, .pause_container {
  display: none;
}

#p8_start_button img {
    width: 80;
    height: 80;

    background-color: rgb(255, 199, 160);
    border-radius: 40px;
}

@media (max-height: 512px) and (orientation: landscape) {
    #menu_buttons {
        display: none;
    }

    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-between;
      background: rgb(255, 199, 160) !important;
      box-sizing: border-box;

      height: calc(var(--vh, 1vh) * 100);
      width: 100vw;
    }

    .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(50vw - var(--vh, 1vh) * 50);
        height: calc(var(--vh, 1vh) * 100 - 40px);
    }

    .button {
        order: 3;
    }

    .xy {
        order: 1;
    }

    .pause_container {
        display: flex;
        align-items: center;
        justify-content: center;

        padding-bottom: 20px;
        height: 20px;

        order: 4;
    }

    .pause {
        display: inline-block;
        width: 50px;
        height: 10px;
    }

    #p8_start_button img {
        width: 80;
        height: 80;
    }


    body > div:first-of-type {
        order: 2;
    }

    center div[style] {
        width: 100% !important;
    }

    center > div > canvas#canvas {
        width: var(--vh, 1vh) * 100;
        height: var(--vh, 1vh) * 100;
    }

    img {
        width: 90%;
    }
}

@media (max-width: 512px) and (orientation: portrait) {
    #menu_buttons {
        display: none;
    }

    #p8_container {
        border: 0;
    }

    body {
      margin: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      background: rgb(255, 199, 160) !important;
      box-sizing: border-box;
    }

    /* remove margins on the size div */
    body > div:first-of-type {
        margin: 0 !important;

        width: 100vw !important;
        height: 100vw !important;
    }

    .button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(var(--vh, 1vh) * 80 - 80vw);
        width: 50vw;
    }

    .button img {
        max-height: calc(var(--vh, 1vh) * 70 - 70vw);
        max-width: 90%;
    }

    .pause_container {
        display: block;
        margin-left: auto;
        margin-right: auto;

        /* max-height: 20px; */
        height: calc(var(--vh, 1vh) * 10 - 10vw);
        width: 50px;
    }

    .pause {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .pause > img {
        max-width: 100%;
        max-height: 100%;
    }


    #p8_start_button img {
        width: 80;
        height: 80;

        background-color: rgb(255, 199, 160);
        border-radius: 40px;
    }

    .pico8_el {
        display: none;
    }

    body br {
        display: none;
    }

    center div[style] {
        width: 100% !important;
    }

    center > div > canvas#canvas {
        width: 100vw;
        height: 100vw;
    }
}