/*Christine Pavlik Software Engineer*/

.box1{
    background-color: #6babec;/*#0583B0;*/
    margin: 0;
    padding: 10px;
    margin-left: 400px;
    font-size: 200%;
    text-align: left;
    color: #2a4095; /*#032B56;*/
    border-left: white 5px solid;
    }
    h1, h2{
        padding: 0px;
        margin: 0;
    }
    body{
        line-height: 1.2;
        margin: 0;
        padding: 0;
         background-color: #2a4095;/*#032B56;*/
         font-family: "Times New Roman", Times, serif;

    }
  .text2 >  li{
        text-indent: -30px; /* key property */
    margin-left: 40px; /* key property */
    margin-bottom: 5px;
    }
    .text2 >  div {
        margin-top:20px;
    margin-bottom: 10px;
    }
    .defaultCenter{
        height: 200px;
        padding-top: 200px;
       text-align: center;
    }
    /*box two is the menu*/
    .box2 > ul{
    width: 275px;
     margin: 30px;
     margin-left: 75px;
     margin-top: 120px;
     position: absolute;
     border-radius: 5px;
     padding: 0; 
    }
    .box2 > ul > li {
    text-decoration: none;
    list-style-type: none;
    font-size: 200%;
    padding: 10px;
    }
    a{
        text-decoration: none;
        color: white;
        padding-left: 10px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .notTag{
        padding: 0;
    color:black;
    text-decoration: underline;
    text-underline-position: below;
    }
    .notTag:hover{
    color: white;
    }
    
    a:hover, .this {
        text-decoration: underline;
    }
    /*Box3 in the actual text contains text1 and text 2*/
    .box3{
        font-size: x-large;
        position: relative;
        margin: 0px;
        margin-left: 400px;
        margin-top: 75px;
        padding-bottom: 50px;
        background-color: #abc7e7; /*#82AEC0;*/
        min-height: 300px;
    }
    .text2{
        color: black;
    }
    .text1, .text2, .gridCoin{
        padding: 5px 80px;
        padding-right: 40px;
        display: block;
        
    }
    
    p{
        margin-top: 0;
    }
    .text1{
        padding-top: 50px;
    }
    .text1, .toHide{
        color:white;
    }
    /*title for each page..on box3*/
    .title{
        text-align: center;
        color: white;
        padding-top: 50px;
    }
    /*pertaining to the menu one part is hidden and one part in not*/
    .toHide, .menu2{
    
    display: none;
    }
    
      
      .box2 .menu{
          position: fixed;
      }




      /*mobile mainly changed the nav and moves that in a way that works*/
      @media screen and (max-width: 1600px) {
        .box3{
            margin-top: 75px;
            margin-right: 0px;
            margin-left: 250px;
        }
        .box1{
            margin-left: 250px;
        }
        .box2 > ul {
            margin-top: 65px;
            margin-left: 0px;
    
        }
        .box2 > .menu{
            margin-top: 115px;
            margin-left: 0px;
    
        }
        .showMenu{
            display: inline;
        }
    }
    @media screen and (max-width: 1100px) { 
    
        .box3{
            margin: 0px;
        }
        .box1{
            border:none;
            margin-left: 0px;
            font-size: 150%;
             height: 100px;

        }
        .menu, .menu2{
            display: none;
        }
        .toHide{
            display: flex;
            flex-direction: column;
            padding: 10px;  
        }
        .toHide > div {
            display: block;
            flex-direction: row;
            width: 35px;
            height: 5px;
            background-color: white;
            margin: 4px 10px;
            
          }
        
        .box2click .menu2{
            margin: 5px;
               display: block; 
                font-size: 200%;
            list-style-type: none;  
            }
      
     
       /* .box2 > .toHide{
            width: 35px;
        }
         .box2 > .toHide > div{
           display: absolute;
           right: 0px;
        }
        .box2click > .toHide > div{
           background-color: #0583B0;
        }
          .box2click > .toHide > .invisa{
           background-color: #032B56;
        }
       .box2{*/
           /*height: 60px;*/
      /*  height: 0px;
           margin-top: 60px;
        }
        .box2click{
         padding-top: 60px;
         margin:0;
           height: 0px;
       }
        .toHide{
            display: block;
            position: absolute;
            top: 65px;
            right: 50px;
        }
        .box3{
            margin: 0px;
        }
        .box1{
            border:none;
            margin-left: 0px;
            font-size: 150%;
             height: 100px;

        }
        .menu, .menu2{
            display: none;
        }
        .box2click {
            display: block;
        }  
      .box2click > ul > .menu2{
        border: solid yellow 2px;
        font-size: 200%;
           *//* margin: 0;
            padding: 0;*/
           /* display: inline;
            position: absolute;
            top: 50px;
            right: 00px;
            text-align: right;
            list-style-type: none;
            background-color: #032B56;
        }
        .toHide > .menu2 > li{
            padding-top: 15px;
        }
      .toHide > .invisa{
            background-color: #032B56;
        }
        /*.toHide:hover > .invisa{
            background-color: #032B56;
        }*/
    }
    
    @media screen and (max-width: 800px) {
        .toHide > div {
            width: 25px;
            height: 3px;
            margin: 3px 5px;
            
          }
        .box2click .menu2{ 
             font-size: 150%; 
         }
        .text1, .text2, .gridCoin {
            padding-left: 30px;
            padding-right: 10px;
        }
        .box3{
            font-size: large;
        }
        /*.mystyle > .menu2{
            top: 60px;

        }
        .box2:hover {
           height: 200px;
       }  
       .box2:hover > ul > .menu2{
        font-size: 150%;
         } */
    }
    @media screen and (max-width: 550px) {
        
        .toHide{
            top: 40px;
            right: 0px;
        }
        .box1{
            font-size: 115%;
            height: 75px;
        }
        .box3{
            font-size: medium;
        }
 
    }
    
    @media screen and (max-width: 400px) {
        .toHide{
            top: 21px;
        }
        .box1{
            font-size: 82%;
            height: 55px;
        }
        .text1, .text2, .gridCoin {
            padding-left: 10px;
            padding-right: 10px;
        }
        
    }
    @media print{
        .box2 {
            
            visibility: hidden;
        } 
        .toHide{
            display: block;
            position: absolute;
            top: 65px;
            right: 50px;
        }
        .box3{
            margin: 0px;
        }
        .box1{
            border:none;
            margin-left: 0px;
            font-size: 150%;
             height: 100px;

        }
        .menu{
            display: none;
        }
      
        .toHide > .menu2 > li{
            padding-top: 15px;
        }
      
    }