* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

height: 100%;

width: 100%;

margin: 0;

font-family: Arial;

line-height: 1.5em;

}

@media (prefers-color-scheme: dark) {

body { background: #080e16; color: #dad7d7;; }

}

@media (prefers-color-scheme: light) {

body { background: white; color: #555; }

}

@font-face {

font-family: 'Product Sans';

font-style: normal;

font-weight: 400;

src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');

}

.navOpen {

overflow: hidden;

z-index: -99;

}

.wrapper{

transition-duration: 0.5s;

transition-timing-function: swing;

width: 100%;

height: 100%;

position: relative;

padding: 100px 40px;

}

.wrapper.open,

.wrapperDark.open {

transform: translateX(250px) translateY(50px);

-webkit-transform: translateX(250px) translateY(50px);

box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);

}

.wrapper section,

.wrapperDark section{

max-width: 730px;

margin: 0 auto;

}

.wrapper section h1,

.wrapperDark section h1 {

font-weight: bold;

font-size: 30px;

margin-bottom: 10px;

}

.wrapper section h2,

.wrapperDark section h2 {

font-weight: bold;

font-size: 20px;

margin-bottom: 10px;

}

.wrapper section p,

.wrapperDark section p{

margin-bottom: 1em;

}

.openNav {

transition-duration: 0.5s;

transition-timing-function: swing;

width: 50px;

height: 50px;

background-color: royalblue;

position: fixed;

top: 20px;

left: 20px;

z-index: 99;

border: 0px solid transparent;

border-radius: 40px;

}

.openNav:hover {

cursor: pointer;

}

.openNav .icon {

transition-duration: 0.2s;

position: absolute;

width: 30px;

height: 2px;

background-color: white;

top: 24px;

left: 10px;

}

.openNav:hover{

box-shadow: 0 1px grey;

}

.openNav .icon:before,

.openNav .icon:after {

transition-duration: 0.5s;

background-color: white;

position: absolute;

content: "";

width: 30px;

height: 2px;

left: 0px;

}

.openNav .icon:before {

top: -7px;

}

.openNav .icon:after {

top: 7px;

}

.openNav.open {

transform: translateX(250px) translateY(50px);

-webkit-transform: translateX(250px) translateY(50px);

}

.openNav.open .icon {

background-color: transparent;

}

.openNav.open .icon:before,

.openNav.open .icon:after {

top: 0;

}

.openNav.open .icon:before {

transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

.openNav.open .icon:after {

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

ol, ul {

padding-left: 28px;

}

nav {

background-color: #2e56cc;

width: 100%;

height: 100%;

position: fixed;

left: 0;

top: 0;

}

nav ul {

width: 250px;

margin-top: 50px;

font-family: Product Sans;

font-size: 1.1em;

padding-left: 0;

}

nav li {

transition :0.4s;

display: block;

padding: 10px 40px;

color: #e5e6e8;

letter-spacing: 0.02em;

text-align: center;

}

nav li.active {

color: white;

font-weight: bold;

}

nav li:hover {

cursor: pointer;

color:white;

background-color: darkblue;

}

div.gallery img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

}

}

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

}

}

.screenshot {

float: left;

width: 49.99999%;

}

@media only screen and (max-width: 600px) {

.screenshot {

width: 100%;

}

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

.heading{

font-family: Product Sans;

}

.subheading{

font-family: Product Sans;

}

.cap, .section, .site-width {

margin-left: auto;

margin-right: auto;

}

@media (min-width: 600px)

.cap {

padding-top: 7.5rem;

padding-left: 32px;

padding-right: 32px;

line-height: 1.25rem;

padding: 90px 24px 24px;

text-align: right;

}

.navbar-link{

color: aliceblue;

}

.scroll-to-top {

position: fixed;

z-index: 9999;

right: 24px;

bottom: 60px;

background-color: #295db2;

color: white;

font-family: Product Sans;

font-size: 18px;

padding: 14px 25px;

text-align: center;

text-decoration: none;

display: none;

cursor: pointer;

border: 1px solid transparent;

border-radius: 50px;

transition : box-shadow 0.4s;

}

.scroll-to-top:hover {

color: white;

background-color: #4165f4;

box-shadow: 0px +1px #888888;

}

.scroll-to-top-show {

display: block;

}

a{

color: #58acd3;

text-decoration: none;

transition: color 0.55;

}

a:hover{

color:#4187a8;

}

.download-btn {

position: relative;

display: block;

margin: 30px auto;

padding: 0;

font-family: Product Sans;

overflow: hidden;

border-width: 0;

outline: none;

border-radius: 2px;

box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

font-size: 14px;

background-color: #2e56cc;

}

.download-btn:hover, .btn:focus {

background-color: royalblue;

}

.download-btn > * {

position: relative;

}

.download-btn span {

display: block;

padding: 12px 24px;

}

.download-btn:before {

content: "";

position: absolute;

top: 50%;

left: 50%;

display: block;

width: 0;

padding-top: 0;

border-radius: 100%;

background-color: rgba(236, 240, 241, .3);

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.download-btn:active:before {

width: 120%;

padding-top: 120%;

transition: width .2s ease-out, padding-top .2s ease-out;

}

.footer-copyright{

font-family: Product Sans;

padding-bottom: 10px;

bottom:0px;

width: 100%;

background-color: darkblue;

}

#download-link{

color: white;

}

.footer {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

background-color: royalblue;

text-align: center;

}

.navbar-link a:hover{

color: white;

}

#f-padding{

padding-top: 99px;

}

#r-padding {

position: fixed;

z-index: 9998;

top: 50px;

right: 24px;

bottom: 120px;

max-width: 160px;

}

.footer-copyright{

padding-top: 7px;

}

.sites-codeblock {

background-color: #efefef;

border: 1px solid #d3d3d3;

display: block;

padding: 0.5em 0 0.5em 1em;

line-height: 1;

}

.warning{

width: 100%;

z-index: 1;

background-color: aliceblue;

}

.coffee{

padding-bottom: 20px;

width:100%;

height:auto;

}

.sites-embed-align-center-wrapping-off {

display: block;

align-content: center;

}

h1{

font-family: Product Sans;

}

h2{

font-family: Product Sans;

}

h3{

font-family: Product Sans;

font-size: 18px ;

margin-top: 1em;

margin-bottom:0.8em;

}

@keyframes clickeffect{

from{

opacity:0.7;

transform:scale(0);

}

to{

opacity: 0;

transform: scale(2);

}

}

@-webkit-keyframes clickeffect{

from{

opacity:0.7;

transform:scale(0);

}

}

.themebtn{

position: relative;

text-align: right;

margin-bottom: 23px;

margin-top: -38px;

z-index: 99;

}

.button

{

background-color: transparent;

outline: none;

cursor: pointer;

padding: 0;

border: none;

background: none;

}

.code-snippet {

margin-top: 16px!important;

margin-bottom: 16px!important;

width: auto;

background-color: #2b2b2b;

padding: 8px 12px;

border-left: 4px solid #14b9ff;

word-wrap: normal;

overflow: auto;

white-space: nowrap;

font-family: Consolas,"courier new";

font-size: 16px;

}

.code-snippet-inv {

margin-top: 16px!important;

margin-bottom: 16px!important;

width: auto;

background-color: #b0c9ff;

padding: 8px 12px;

border-left: 4px solid #000000;

word-wrap: normal;

overflow: auto;

white-space: nowrap;

font-family: Consolas,"courier new";

font-size: 16px;

}

.code-shell, .code-shell-root, .code-shell-android-root {

font-family: Consolas,"courier new";

}

.code-shell::before {

color: gray;

content: '$ ';

}

.code-shell-root::before {

color: gray;

content: '# ';

}

.code-shell-android-root::before {

color: gray;

content: 'android:/android # ';

}