client/src/app/+page-not-found/page-not-found.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .root {
   5   @include margin-left(auto);
   6   @include margin-right(auto);
   7
   8   height: 100%;
   9   text-align: center;
  10   padding-top: 150px;
  11   display: flex;
  12   justify-content: center;
  13   flex-direction: column-reverse;
  14
  15   .box {
  16     text-align: start;
  17     font-size: 120%;
  18     padding: 0 15px;
  19   }
  20
  21   img {
  22     @include margin-left(auto);
  23
  24     width: 220px;
  25     height: auto;
  26   }
  27
  28   @media screen and (max-width: $mobile-view) {
  29     img {
  30       @include margin-right(auto);
  31     }
  32   }
  33
  34   @media screen and (min-width: $mobile-view) {
  35     width: 400px;
  36   }
  37
  38   @media screen and (min-width: #{breakpoint(lg)}) {
  39     width: 600px;
  40   }
  41
  42   @media screen and (min-width: #{breakpoint(xl)}) {
  43     width: 700px;
  44   }
  45
  46   @media screen and (min-width: #{breakpoint(xxl)}) {
  47     width: 800px;
  48   }
  49
  50   @media screen and (max-height: 600px) {
  51     padding-top: 50px;
  52
  53     img {
  54       width: 160px;
  55     }
  56   }
  57 }