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

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