html {
     scrollbar-color: #F20808 #FFBD29;
   }

   body {
     display: flex;
     margin: 0;
     min-height: 100vh;
     font-family: sans-serif;
   }

   nav {
     background-image: url('cpbkgrou.gif');
     text-align: center;
     width: 150px;
     min-width: 150px;
     display: block;
     margin: 0 auto;
     gap: 0.3em;
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   @media screen and (min-width: 585px) {

     nav a.logo {
       margin-top: 0.5em;
       margin-bottom: 1em;
       display: block;
     }
   }

   main {
     flex-grow: 1;
     padding: 20px;
   }

   @media screen and (max-width: 584px) {
     body {
       flex-direction: column;
     }

     nav {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       width: 100%;
       gap: 0;

     }

     nav .nav-links {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 0.3em;
       width: 100%;
     }

     #cp-logo {
       display: none;
     }

     img {
       max-width: 100%;
     }

     main {
       flex-direction: column;
       text-align: center;
     }

   }