app.scss

$mdc-theme-primary: #012345;
$mdc-theme-on-primary: rgb(255, 242, 240);
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #456789;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: rgb(255, 242, 240);
$mdc-theme-on-background: white;

@import "@material/button/mdc-button";
@import "@material/drawer/mdc-drawer";
@import "@material/image-list/mdc-image-list";
@import "@material/list/mdc-list";
@import "@material/textfield/mdc-text-field";
@import "@material/typography/mdc-typography";
@import "@material/elevation/mdc-elevation";
@import "@material/top-app-bar/mdc-top-app-bar";

html, body {
  height: 100%;
  background-color: #012345;
}

body {
  font-family: 'Roboto';
  margin: 0;
  padding-top: 0.1px; // Prevent header h1 margin from pushing body down
}

// Login page styles

.header {
  text-align: center;
}

.shrine-logo {
  width: 273px;
  height: 273px;
}

.logo-container {
margin: auto;
padding-top: 200px;
}

.shrine-svg {
  height: 273px;
  width: 273px;
  stroke: white;
  opacity: 1;
  transition: none;
}

.index-name {
  opacity: 0;
  animation: index-name 1s linear forwards 3s;
  flex-grow: 1;
  color: white;
}

.esteban {
  stroke-dasharray: 61;
  stroke-dashoffset: 61;
  animation: dash 1s linear forwards;
  animation-delay: 2s;
}

.gonzalez {
  stroke-dasharray: 59;
  stroke-dashoffset: 59;
  animation: dash 1s linear forwards;
  animation-delay: 2s;
}

.egcircle {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
  animation: dash 1s linear forwards;
  animation-delay: 1s;
}

.shrine-login {
  // background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  transition: opacity 1s linear;
  background-image: url('/assets/mebackground.jpg');
  background-size: cover;
  opacity: 0;
  animation: imageload 3s linear forwards;
  animation-delay: 500ms;
  display: flex;
  flex-direction: column;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes index-name {
  to {
    opacity: 1;
  }
}

@keyframes imageload {
  to {
    opacity: 1;
  }
}

.logo-disappear {
  opacity: 0;
}

// Home page styles

.home {
  display: flex; // Flexbox is used to easily arrange the persistent drawer and content side-by-side
}

.shrine-logo-drawer {
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  @include mdc-typography(headline6);

  align-self: center;
  margin: 5px auto;
}

.product-list {
  @include mdc-image-list-masonry-columns(4);

  padding: 80px 100px 0 100px;
  overflow: auto;
}

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  @include mdc-drawer-ink-color(on-primary);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    @include mdc-list-item-primary-text-ink-color(on-primary);

    border-radius: 6px;
    justify-content: center;
  }
}

.shrine-select-item-divider {
  border-bottom-color: #EAA4A4;
  width: 50px;
  margin: 0 auto;
  border-bottom-width: 2px;
  position: relative;
  top: -5px;
}

.mdc-image-list__supporting {
  justify-content: center;
}

.mdc-image-list__item {
  padding: 10px;
}

.mdc-image-list__label {
  @include mdc-typography(subtitle2);
}

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
}