html,
body {
   height: 100%;
   background: #050714;
   margin: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: #E8EAF6;
}

.outer {
   margin: 0 auto;
   max-width: 1200px;
   min-width: 125px;
   background: #0A0E27;
   min-height: 100%;
   display: flex;
   font-size: 16px;
   @media (hover:none) {
      font-size: 8px;
   }
}
table {
   @media (hover:none) {
      font-size: 8px;
   }
}
nav {
   max-width: 20%;
   width: 240px;
   min-width: 7em;
   background: #1a1f3a;
   display: table-cell;
}

.inner {
   margin: min(16px, 10%);
   margin-top: 6px;
   position: relative;
}

a:hover, a:focus, a:active {
   color: #4A9FF5;
   cursor: pointer;
}

nav span {
   margin: 0 0 16px 0;
   display: block;
}

.head {
   font-weight: bold;
   border-top: 1px solid #FBBF24;
   padding: 16px 0 0 0;
   margin: 0 0 16px 0;
}

img {
   width: 100%;
}

a {
   all: unset;
}

main {
   width: 960px;
}

.title {
   font-size: 1.875em;
}

.notice {
   margin-top: 16px;
   color: red;
   font-weight: bold;
}

.notice img {
   max-width: 500px;
   margin-top: 10px;
}