website/style.css

/*

GPLv3 - Chris Dorman, 2020
cddo.cf - Stylesheet

*/
    @import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
    @media only screen and (min-width: 2001px) { body { max-width: 750px; } }    
    @media only screen and (max-width: 2000px) { body { max-width: 750px; } }
    @media only screen and (max-width: 1400px) { body { max-width: 750px; } }
    @media only screen and (max-width: 1200px) { body { max-width: 700px; } }
    @media only screen and (max-width: 1000px) { body { max-width: 700px; } }
    @media only screen and (max-width: 800px) { body { max-width: 700px; } }
/*  @media only screen and (max-width: 700px) { body { max-width: 600px; } }
    @media only screen and (max-width: 600px) { body { max-width: 500px; } }
    @media only screen and (max-width: 500px) { body { max-width: 450px; } }
    @media only screen and (max-width: 400px) { body { max-width: 350px; } }  */
    
    html { font-family: "Ubuntu Mono", sans-serif; background-color: #222222; color: #ddddff; padding: 4px; margin: 0 auto; font-size: 16px; min-width: 700px;}
    body { margin: 0 auto; }
    a { color: #9900ff; }
    a:hover { color: #dd00ff; text-decoration: none; }

    table { width: 100%; }

    p { padding: 5px; }
    
    .menu {
      font-size: 20px;
      background: #131313;
      padding: 3px 3px 3px 3px;
      border: solid 1px #444444;
      width: 95%;
      margin: auto;
      border-radius: 4px;
      box-shadow: 0px 0px 10px #000000;
    }

    .menu a { 
      color: silver; 
      text-decoration: none; 
      padding: 3px 10px 3px 10px;
      /* some effects */
      transition: ease-in .4s color, ease-in .4s background-color, ease-in .4s text-shadow, ease-in .4s border-top;
      -moz-transition: ease-in .4s color, ease-in .4s background-color, ease-in .4s text-shadow, ease-in .4s border-top;
      -webkit-transition: ease-in .4s color, ease-in .4s background-color, ease-in .4s text-shadow, ease-in .4s border-top;
      -o-transition: ease-in .4s color, ease-in .4s background-color, ease-in .4s text-shadow, ease-in .4s border-top;
    }

    .menu a:hover { 
      color: white; text-decoration: none; 
      background-color: #323232; text-shadow: 0px 0px 7px white;
      border-top: solid 1px #dddddd;
    }

    .header {  
        font-family: "Monoton", "Ubuntu Mono", sans-serif; 
        font-size: 28px;
        color: #aa00ff;
    }
    
    .container { padding: 12px; }
    .footer { font-size: 16px; color: #565656; text-align: center; }
    .footer a { text-decoration: none; }
    .note { color: red; font-weight: 500; padding: 7px; }
    .rfloat { float: right; position: inline-block; }