$fxl-gray: #263238;
$fxl-orange: #ff6e40;

@use "@material/theme" with (
  $primary: $fxl-orange,
  $on-primary: $fxl-gray
);

@use "@material/button/styles";
@use "@material/button/mixins" as button-mixins;
@use "@material/icon-button/icon-button";
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/typography/mdc-typography";

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  @include icon-button.core-styles;

  display: flex;
  flex-direction: column;

  main {
    display: flex;
    flex: 1;
    flex-direction: column;

    header {
      ul {
        align-content: center;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          margin: 0 0.25em;

          button.active-set {
            @include button-mixins.filled-accessible($fxl-gray);
          }
        }
      }
    }

    article {
      display: flex;
      flex: 1;
      text-align: center;
      
      #play_space {
        margin: 2em auto;
        position: relative;
        
        .cel-image {
          visibility: hidden;
          position: absolute;
        }
      }
    }
  }

  footer {
    background-color: $fxl-orange;
    font-size: smaller;
    text-align: center;
  }
}