.body {
       padding: 0px;
       margin: 0px;
       background-attachment: fixed;
       background-color: #001252;
       background-attachment: fixed;
       background-image: url("images/CosmicRobots/Background.jpg");
       background-repeat: no-repeat;
       background-size: cover;


   }

   .content {
       justify-content: center;
       align-items: center;
       padding-left: 20px;
       padding-right: 10px;
   }


   .aniodeBottomBar {
       display: block;
       justify-content: center;
       align-items: center;
       text-align: center;
       color: white;
       font-family: "Russo One", sans-serif;
       font-size: 14pt;
       width: 100%;
       height: 200px;
       background-color: purple;
       background-attachment: fixed;

   }

   .aniodeLogoBottomBar {
       justify-content: center;
       align-items: center;

       width: auto;
       height: 30%;

       background-color: purple;
       background-attachment: fixed;

   }

   .navBar {
       display: flex;
       justify-content: center;
       align-items: center;

       width: 100%;
       height: 60px;

       background-color: purple;
       background-attachment: fixed;

   }

   .navBoxQuad {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       padding: 2;
       margin: 0;
       justify-content: center;
       align-items: center;
       width: 50px;
       height: 50px;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;


   }

   .navBoxQuad:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .iconQuad {

       width: 100%;
       height: 100%;
   }


   .navBarLeft {
       display: inline-flex;
       float: left;
       align-items: center;
       justify-content: center;
       position: absolute;
       top: 0;
       left: 20px;
       width: auto;
       height: 60px;
       z-index: 2;
   }

   .navBarRight {
       display: inline-flex;
       float: right;
       align-items: center;
       justify-content: center;
       position: absolute;
       top: 0;
       right: 20px;
       width: auto;
       height: 60px;
       z-index: 2;
   }

   .icon {
       width: auto;
       padding: 0;
       border: 0;
       height: 60%;
       bottom: 10%;
       z-index: 1000;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;


   }

   .icon:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .spaceIcon {
       width: 20px;
       padding: 0;
       border: 0;
       height: 60%;
       bottom: 10%;
   }

   .mainFeature {

       padding: 0px;
       margin: 0px;
       width: 100%;
       height: 500px;

       overflow: hidden;


   }

   .rightSideBox {
       display: flex;
       align-items: right;
       justify-content: right;
       align-self: right;


       width: 20%;
       height: 100%;
   }

   .leftSideBox {
       display: flex;
       align-items: left;
       justify-content: left;
       align-self: left;


       width: 20%;
       height: 100%;
   }

   .centerBox {
       display: flex;
       align-items: center;
       justify-content: center;
       align-self: center;



       width: 60%;
       height: 100%;
   }

   .videoBox {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0px;
       margin: 0px;
       width: 100%;
       height: 500px;
       background-color: blue;
       background-image: url("images/CosmicRobots/BackgroundStars.jpg");
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
       overflow: hidden;
   }

   .trailerVid {
       display: flex;

       border: 30px solid #F1C800;
       border-radius: 15px;
       align-items: center;
       justify-content: center;
       width: 560px;
       height: 315px;
       z-index: 1000;
   }

   .behind {
       width: 100%;
       height: 60px;
       z-index: 0;

   }

   .storeBar {
       display: flex;
       justify-content: right;
       align-items: center;
       color: white;
       font-family: "Russo One", sans-serif;
       font-size: 24pt;
       width: 100%;
       height: 60px;
       background-color: #001252;

   }

   .breakBar {
       display: flex;
       justify-content: right;
       align-items: center;
       color: #F1C800;
       font-family: "Russo One", sans-serif;
       font-size: 5pt;
       width: 100%;
       height: 15px;
       background-color: #F1C800;

   }


   .grid {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0px;
       margin: 0px;
       width: 100%;
       height: 100%;
       background-attachment: fixed;
       background-image: url("images/CosmicRobots/grid.png");

       background-size: 128px;
       overflow: hidden;
       z-index: 0;
   }

   .path {
       display: block;
       align-self: baseline;
       float: right;
       position: absolute;
       top: 150px;
       width: 512px;
       height: auto;
       z-index: 2;
   }

   .spaceshipBlue {
       display: block;
       float: left;

       position: absolute;
       left: 15%;
       top: 80px;
       width: 150px;
       height: auto;
       z-index: 2;
   }

   .planetBlue {
       display: block;
       float: left;
       position: absolute;
       top: 350px;
       left: 5%;
       width: 350px;
       height: auto;
       z-index: 2;
   }

   .planetRed {
       display: block;
       float: right;
       position: absolute;
       top: 60px;
       right: 10%;
       width: 350px;
       height: auto;
       z-index: 2;
   }


   .centered {
       height: 100%;
       width: auto;
       margin-left: auto;
       margin-right: auto;

   }

   .centeredLogo {
       position: relative;
       display: flex;
       height: 80%;
       width: auto;
       margin-left: auto;
       margin-right: auto;
       z-index: 10;

   }

   .rightFloat {
       text-align: right;
       z-index: 1;

   }

   .rightBottomFloat {
       position: relative;
       display: flex;
       justify-content: right;
       left: 0;
       bottom: 0;
       text-align: right;
       z-index: 1;

   }

   .leftFloat {

       position: relative;
       display: flex;
       align-self: baseline;
       top: 200px;

       text-align: right;
       z-index: 1;
   }

        .leftFloatPath {
    block:flex;
            position: relative;
            display: flex;
            align-self: baseline;
            top: 50px;
    left:0;
            text-align: right;
            z-index: 1;
        }

   .leftImage {

       position: relative;
       display: block;
       left: 0;
       top: 0;
       width: 100%;
       height: auto;
       text-align: left;
       z-index: 1;
   }



   .leftBox {
       display: flex;
       bottom: 0px;
       padding: 0px;
       margin: 0px;
       width: 100%;
       height: 300px;
       background-color: #001252;
       background-repeat: no-repeat;
       background-size: 100% 100%;
   }

   .rightBox {
       display: flex;
       align-items: right;
       justify-content: right;
       padding: 0px;
       margin: 0px;
       width: 100%;
       height: 300px;

       background-repeat: no-repeat;
       background-size: 100% 100%;

   }

   .characterBox {
       position: relative;
       display: flex;
       margin-left: auto;
       margin-right: auto;
       justify-content: center;
       align-items: center;
       position: relative;
       left: 0;
       top: 0;
       width: 25%;
       height: auto;
       text-align: left;
       max-height: 200px;
       z-index: 1;
   }

   .textBox {
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 10px;
       height: 100%;
       width: 45%;
       padding: 10px;
       z-index: 1;
   }

   .constrainBox {
       position: relative;
       display: flex;
       align-items: left;
       justify-content: left;
       margin: auto;
       height: 100%;
       width: 100%;
       max-width: 2000px;
       background-color: green;
       z-index: 1;
   }

   .screenshotBox {
       position: relative;
       display: flex;
       height: 100%;
       width: 30%;
       margin-left: auto;
       margin-right: auto;
       justify-content: center;
       align-items: center;
       z-index: 1;
   }

   .screenshot {
       position: relative;
       display: flex;

       height: auto;
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       background-color: yellow;
       border: 5px white solid;
       border-radius: 15px;
       z-index: 1;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;
   }

   .screenshot:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
       z-index: 100000;
   }

   .switch {
       position: relative;


       height: auto;
       width: 60%;
       margin-left: auto;
       margin-right: auto;

       z-index: 1;
   }

   .iphone {
       position: relative;


       height: auto;
       width: 50%;
       margin-left: auto;
       margin-right: auto;

       z-index: 1;
   }

   .nintendoEshop {
       position: relative;


       height: auto;
       width: 70%;
       margin-left: auto;
       margin-right: auto;

       z-index: 1;
   }

   .appstoreIcon {
       position: relative;


       height: auto;
       width: 30%;
       margin-left: auto;
       margin-right: auto;

       z-index: 1;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;
   }

   .appstoreIcon:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .switchBox {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       height: 300px;
       width: 100%;
       margin-left: auto;
       margin-right: auto;

       z-index: 1;
   }

   .header {
       align-content: baseline;
       color: white;
       font-family: "Russo One", sans-serif;
       font-size: 18pt;


   }

   .p {
       color: white;
       font-family: "Raleway", sans-serif;
       font-size: 12pt;


   }

   .button {
       border: 5px solid;
       box-shadow: 10px 10px 5px 5px #0d2554;
       background-color: #2660BD;
       color: white;
       font-family: "Russo One", sans-serif;
       padding: 20px 60px;
       border-radius: 30px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 24px;
       margin: 4px 2px;
       cursor: pointer;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;
   }

   .clientButton {
       border: 0px solid;
       color: #2660BD;
       ;
       font-family: "Russo One", sans-serif;
       padding: 5px 50px;
       border-radius: 30px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 20px;
       margin: 4px 2px;
       cursor: pointer;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;
   }

   .buttonNav {
       border: 2px solid;
       background-color: #2660BD;
       color: white;
       font-family: "Russo One", sans-serif;
       padding: 10px 30px;
       border-radius: 15px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 24px;
       margin: 4px 2px;
       cursor: pointer;
       -webkit-transition: -webkit-transform 0.1s ease;
       /* For Safari */
       transition: transform 0.1s ease;
   }


   .buttonNav:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .fillScreen {
       display: block;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       max-width: 80%;
       max-height: auto;

   }

   .clientButton:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .button:hover {
       -webkit-transform: scale(1.2);
       /* For Safari */
       transform: scale(1.2);
   }

   .fullScreenImage {
       display: none;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       color: #001252;
       background-color: black;
       opacity: 80%;
       z-index: 9999999999999;
   }

   .fullCloseButton {
       display: none;
       position: fixed;
       right: 60px;
       top: 60px;
       width: 60px;
       height: 60px;
       color: #001252;
       background-color: black;
       z-index: 99999999999991;
   }

   .largeScreenshot {
       display: none;
       position: fixed;

       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       max-width: 80%;
       max-height: auto;
       z-index: 99999999999991;
   }

   .show {
       display: flex;
   }

   @media (max-width: 900px) {
       .buttonNav {
           display: none;
       }

       .planetBlue {
           display: block;
           float: left;
           position: absolute;
           top: 350px;
           left: 5%;
           width: 250px;
           height: auto;
           z-index: 2;
       }

       .planetRed {
           display: block;
           float: right;
           position: absolute;
           top: 60px;
           right: 5%;
           width: 250px;
           height: auto;
           z-index: 2;
       }

       .path {
           display: block;
           align-self: baseline;
           float: right;
           position: absolute;
           top: 250px;
           width: 352px;
           height: auto;
           z-index: 2;
       }

       .aniodeBottomBar {
           display: block;
           justify-content: center;
           align-items: center;
           text-align: center;
           color: white;
           font-family: "Russo One", sans-serif;
           font-size: 10pt;
           width: 100%;
           height: 250px;
           background-color: purple;
           background-attachment: fixed;

       }

       .iphone {
           position: relative;


           height: auto;
           width: 80%;
           margin-left: auto;
           margin-right: auto;

           z-index: 1;
       }

                  .switch {
                      position: relative;
        
        
                      height: auto;
                      width: 100%;
                      margin-left: auto;
                      margin-right: auto;
        
                      z-index: 1;
                  }

                                         .spaceshipBlue {
                                             display: block;
                                             float: left;
                    
                                             position: absolute;
                                             left: 5%;
                                             top: 50px;
                                             width: 150px;
                                             height: auto;
                                             z-index: 2;
                                         }
   }

        @media (max-width: 600px) {
.navBarLeft {
        display: none;

    }

    .navBarRight {
        display: none;
        float: right;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 20px;
        width: auto;
        height: 60px;
        z-index: 2;
    }

           .p {
               color: white;
               font-family: "Raleway", sans-serif;
               font-size: 8pt;
    
    
           }

                         .header {
                             align-content: baseline;
                             color: white;
                             font-family: "Russo One", sans-serif;
                             font-size: 12pt;
            
            
                         }
        }