/* Copyright 2021 Crucial Fusion, Inc. */

body {
   background: #000000;
   background-image: url('media/cf_logo_bg.jpg');
   background-attachment: fixed;
   background-position: 0px 41px;
   background-repeat: no-repeat;
   background-size: 100%; /* auto, cover, contain */

   margin: 0;
   padding: 50px 0 75px 0;

   font-family: Arial;
   font-size: 16px;
   color: #eeeeee;
}


html {
   text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
}


.white {
   color: #ffffff;
}

/* #id (used once) vs class (used multiple times) */
#nav_bar {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;

   background: #303030;
   color: #cccccc;

   position: fixed;
     left: 0px;
     top: 0px;

   z-index: 1;

   border-bottom: 5px solid #9f9f9f;
}

.nav {
   cursor: default;

   color: #a0a0a0;
   font-weight: bold;
   text-decoration: none;

   margin: 0 5%;
   padding: 10px 0;
}

.nav.at {
   color: #e0e0e0;
}

.nav:hover {
   color: #ffffff;
   cursor: default;
}



.legal {
   width: 100%;
   position: fixed;
     left: 0;
     bottom: 0;
   margin: 0;

   background: #303030;
   color: #858585;
   font-size: 0.7em;
   text-align: center;

   border-top: 5px solid #9f9f9f;
   border-bottom: 1px solid #9f9f9f;

   padding-bottom: calc(env(safe-area-inset-bottom) * 0.6);
}

.legal p {
   line-height: 1.05em;
   vertical-align: middle;
   margin: 2px auto;
}



#page-wrap {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;

   text-align: left;
}


#cf_logo {
   width: 100%;
   margin: auto;
   text-align: center;
}

#cf_logo img {
   width: 100vw;
   min-width: 0;
   max-width: 1000px;
}


.app_header_container {
   display: flex;
   flex-direction: row;
   margin: 0 auto 15px auto;
}

.app_icon {
   min-width: 80px;
}

.app_icon img {
   width: 80px;
}

.app_name_store_container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

   margin: 0 0 0 0.5em;
   vertical-align: text-top;
}

.app_name {
   font-size: 2.0em;
   font-weight: bold;

   margin-right: 0.3em;
}

.app_store {
}

.app_store_centered {
   margin: auto;
   text-align: center;
}

.app_store a {
   cursor: default;
   text-decoration: none;
}



.app_body_container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;

   margin: auto;
}


/* Description & bulletpoints */

.app_body_details {
   flex: 0 1 49%; /* flex-grow flex-shrink flex-basis */

   color: #bbbbbb;
   font-size: 1.125em;
   font-weight: bold;

   margin-bottom: 0.75em;
   padding-right: 1%;
}

div.app_body_details ul {
   font-weight: normal;
   list-style-position: outside;
   margin-left: -1em;
}

div.app_body_details li {
   margin-bottom: 0.45em;
}


/* Preview video 1200x1600 */

.app_body_preview {
   flex: 1 1 50%;
   text-align: center;
}

.app_body_preview video {
   background-color: #333333;
   border-color: #666666;
   border-style: solid;
   border-width: 1px;
   padding: 0;
   z-index: -1;

   max-width: calc(100% - 2px);
   max-height: 85vh;
   width: auto;
}

.app_body_preview .actual_container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;

   margin: auto;
}

.app_body_preview .actual {
   color: #777777;
   font-size: 0.7em;
}

.app_body_preview .actual a {
   color: #777777;
   text-decoration: none;
}

.empty_space {
   height: 1.0em;
   width: 100%;
}


/* Screenshots */

.home_ss_container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

   margin: auto;
}

.home_ss_container img {
   margin: 10px;
   width: 100%;
   height: auto;
   border: 2px solid #444444;
}



.app_body_screenshot {
   flex: 0 1 30%;
   margin-top: 5px;
   text-align: center;
}

.app_body_screenshot img {
   width: 96%;
   border: 1px solid #666666;
   background-color: #333333;
   padding: 1px;
}

.ss_actual {
   width: 100%;

   color: #777777;
   font-size: 0.7em;
   text-align: center;
}



.separator_bar {
   background: #9f9f9f;
   height: 1px;
   width: 100%;
   margin: 4.0em auto;
}



.instruct_container {
}

.instruct_header {
   font-size: 1.5em;
   font-weight: bold;
   margin: 0 0 1.5em 0;
}

.instruct {
   font-size: 1.125em;
   color: #bbbbbb;

   margin: 0 0 2.5em 0;
}



.instruct_visual_container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;

   width: calc(100% - 2px);
}

.instruct_visual_container img {
   width:43%;
   background-color: #333333;
   padding: 1px;
   border: 1px solid #666666;
}

.instruct_visual_container .arr {
   width: 9%;
   background-color: transparent;
   margin: 0 auto;
   padding: 0;
   border-style: none;
}


.privacy_anchor {
   display: block;
   position: relative;
   top: -80px;
   visibility: hidden;
}



.support {
   font-weight: bold;
   text-align: center;
}

.support a {
   color: #bbbbbb;
   font-weight: normal;
   cursor: default;
   text-decoration: none;
}



.about {
   color: #bbbbbb;
   font-size: 1.125em;
   margin: 2.0em auto 3.0em auto;
   max-width: 700px;
   text-align: left;
}

.pizza {
   color: #bbbbbb;
   cursor: default;
   font-weight: bold;
   text-decoration: none;
}

.chi_container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

   margin: auto;
}

.chi_container img {
   margin: 10px;
   width: 40%;
   height: auto;
}



.soc_a {
   cursor: default;
   text-decoration: none;
}

.soc_button {
   width: 100%;
   max-width: 600px;
   margin: auto auto 0.4em auto;

   display: flex;
   flex-direction: row;
   justify-content: center;

   background: rgba(32, 32, 32, 0.7);
   color: #cccccc;
   font-size: 1.65em;
   font-weight: bold;

   padding: 4px;
   border: 1px solid #9f9f9f;

   transition: background-color 1.0s;
}

.soc_button img {
   min-width: 70px;
   width: 70px;
   height: 70px;
}

.soc_button div {
   line-height: 66px;
   vertical-align: middle;
}

.soc_button:hover {
   transition: background-color 0.15s;
   background-color: rgba(50, 50, 50, 1.0);
}





@media all and (max-height: 450px) {
   .nav {
      padding: 7px 0;
   }

   /* Move legal to bottom of page to make room for preview video */
   .legal {
      position: relative;
      bottom: -75px;
   }

   .app_body_details {
      font-size: 0.875em;
   }
}


@media all and (max-width: 778px) {
   .app_body_details {
      flex: 0 1 100%;
      font-size: 0.875em;
   }

   .app_body_preview {
      flex: 0 1 100%;
   }

   .app_body_screenshot {
      flex: 0 1 50%;
   }

   .separator_bar {
      margin: 2.0em auto;
   }

   .instruct_header {
      font-size: 1.25em;
   }

   .instruct {
      font-size: 0.9375em;
   }

   .privacy_anchor {
      top: -60px;
   }

   .about {
      font-size: 1.0em;
   }
}


@media all and (max-width: 350px) {
   .app_name {
      font-size: 1.5em;
   }

   .support a {
      font-size: 0.9em;
   }

   .chi_container img {
      width: 90%;
   }
}



/* Copyright 2021 Crucial Fusion, Inc. */