/****** body ******/
      body, *, a, a:hover { cursor:url(images/fishcursor.gif), auto; }
      
      body {
        background-color:#0673BC;
        background-image:url("images/blue.jpg");
        background-repeat: repeat;
        background-position: 0 0;
        background-attachment: fixed;
        color:#000; /* default font color */
        font-family:'Arial';
        font-size:20px; /* default font size */
        padding:10px;
      }
      
      /****** links ******/
      a{
        text-decoration: none;
        color: white;
        transition:0.3s;
      }
      
      a:hover{
        cursor:help;
        transition:0.3s;
        color: #0673BC;
      }
              
      /****** wrappers ******/      
      #mainwrapper{
        margin-top:10px; /* space between containers */
        display:flex;
        gap:20px; /* space between containers */
        justify-content:space-between;
      }
              
      /****** main containers ******/
      #header{
        width:100%;
        max-height:100%;
        text-align: center;
        justify-content: center;
      }
      
      #footer{
        width:100%;
        max-height:100%;
        text-align: center;
        justify-content: center;
      }
              
      #main{
        width:850px; /* width of main container - should add up to 100 when added to #sidebar width */
        height:500px;
        padding: 10px;
        overflow:auto;
        line-height: 1.4;
        background-color:#61B5F0;
        border: 1px solid white;
        box-shadow: 10px 10px 5px black, 0px 0px 10px lightblue inset;
      }
              
      #sidebar{
        width:20%; /* width of sidebar - should add up to 100 when added to #main width */
        float:left;
        display:flex;
        position:relative;
      }
        
      .nav{
        text-align: center;
        padding: 10px;
        color: white;
        background-color: #77DBF5;
        border: 1px solid white;
        font-size:25px;
        box-shadow: 0px 0px 10px lightblue inset;
      }  
              
      .box{
        padding:10px;
        max-width:450px;
        text-align: center;
        background-color:#61B5F0;
        border: 1px solid white;
        box-shadow: 10px 10px 5px black, 0px 0px 10px lightblue inset;
      }
      
      .pond{
        padding:10px;
        height:325px;
        width:450px;
        text-align: center;
        background-color:#61B5F0;
        background-image:url("images/water.gif");
        border: 1px solid white;
        box-shadow: 10px 10px 5px;
      }
              
      /****** mobile settings ******/
      @media only screen and (max-width: 600px) {
        #main{
          width:100%; /* makes all container 100% to fit screen */
        }
                  
        #mainwrapper{
          flex-wrap:wrap;
        }
      }