@import url("embedded-media.css");
@import url("java-code-formatting.css");
@import url("popup.css");
@import url("screenshot-gridding.css");
@import url("tagging.css");
@import url("third-party-logos.css");

a {
    color: #666;
    font-weight: bold;
	text-decoration: none;
	transition: color 0.75s;
}

a:hover {
    color: #b00;
}

body {
    background-attachment: fixed !important;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(96,96,96,1) 100%) #666;
	font-family: Helvetica, Arial, sans-serif;
}

button,
input[type=button],
input[type=checkbox],
label.for-clickable {
    cursor: pointer;
}


/* Main content, before opening the popup */
main {
    box-sizing: border-box;
    left: 0;
	padding: 10px;
	position: absolute;
	top: 0;
	transition: filter 1s, padding 1s, top 1s, transform 1s;
	width: 100%;
	z-index: 1;
}

main > * {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    transition: width 1s;
    width: 100%;
}

#preload-images, #preload-docs, #loaded-docs {
    display: none;
}

#swipe-indicators {
    align-items: center;
    background-color: rgba(160, 160, 160, .9);
    border-radius: 50px;
    bottom: 85px;
    display: none;
    left: 50%;
    height: 18px;
    justify-content: space-between;
    opacity: 0;
    padding: 2px 10px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 50%;
    z-index: 10000;
}

#swipe-indicators.display {
    display: flex;
}

#swipe-indicators.on {
    animation: swipe-indicator-opacity-on 1.5s;
    animation-fill-mode: forwards;
}

#swipe-indicators.off {
    animation: swipe-indicator-opacity-off 1.5s;
}

#swipe-indicators .swipe-dot {
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 50%;
    transition: width 1s;
    width: 5px;
}

#swipe-indicators .swipe-dot.embiggen {
    width: 13px;
}


.aspect-1680x1080 {
    aspect-ratio: 1680 / 1080;
}

.blur {
    filter: blur(3px);
}

.content {
    background-color: #c8c8c8; /* fallback */
    background: linear-gradient(to bottom, rgba(160,160,160,1) 0%, rgba(238,238,238,1) 100%);
    border-radius: 15px;
    box-shadow: inset 0 0 20px #000, 0 10px 20px #000;
    font-size: 16px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 15px 15px 0;
    vertical-align: middle;
    white-space: normal;
}

/* Add glare to intro div */
.content:before {
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 27%,rgba(255,255,255,0) 100%);
	border-radius: 15px;
	content: "";
	display: block;
	height: 20px;
	left: -10px;
	opacity: 0.8;
	padding-left: 20px;
	position: relative;
	top: -20px;
	width: 100%;
}

.content > div {
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
	transition: margin 1s;
}

.content > .footer {
    margin-bottom: 25px;
}

.details {
	display: inline-block;
	opacity: 0;
	transition: opacity 1s;
	width: 100%;
}

.grid1and3.red-gradient-backface *:before {
    background-color: #c00;
    background-image: linear-gradient(to bottom right, #c00, #600);
}

.header {
	color: #fff;
	left: -16px;
	margin-bottom: 10px;
}

.header-title {
    font-size: 64px;
    left: 13px;
    position: relative;
}

.header-subtitle {
    font-size: 24px;
    left: 17px;
    position: relative;
}

.intro-heading {
    color: #282828;
    font-size: 22px;
    font-style: italic;
    font-weight: bold;
    text-shadow: 1px 1px lightgrey;
}

.larger-text {
    font-size: larger;
}

.link-out {
    position: relative;
}

.link-out:hover:after {
    opacity: 1;
}

.mobile-hidden {
    display: none;
}

.mono {
    font-family: Consolas, monospace;
    font-size: smaller;
}

.password {
    position: relative;
}

.password input {
    box-sizing: border-box;
    height: 24px; /* Use explicit height because browsers vary on input default height */
    padding-right: 27px;
    width: 100%;
}

.password .visibility-toggle {
    display: block;
    height: 0;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 44px;
}

.password .visibility-toggle img {
    position: relative;
    right: 4px;
    top: -19px;
    width: 22px;
}

.chrome-mobile-shim .password .visibility-toggle img {
    top: -20px;
}

.password .visibility-toggle .password-hide {
    display: none;
}

.screenshot a {
	position: relative;
}

.screenshot a img {
  height: 100%;
  width: 100%;
}

.sm-heading {
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: normal;
    text-wrap: nowrap;
}

img.solo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
}

.square-border {
    border-radius: 0;
}


.title {
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
}

.white-border {
    border: 2px solid white;
}


@keyframes spinY {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/*
    Swipe indicator key frames can't be combined (then sometimes played in reverse) because the animations need to be
    reset after each run (by removing them) and that can't happen if the animation is now running in the other direction
*/
@keyframes swipe-indicator-opacity-on {
    0% {
        opacity: 0.05;
    }

    100% {
        opacity: 1;
    }
}

@keyframes swipe-indicator-opacity-off {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.05;
    }
}


@media screen and (min-width: 600px) {
    img.solo {
        width: 90%;
    }

    #swipe-indicators {
        display: none !important; /* Hide swipe indicators once screen size is reached to show nav arrows instead */
    }

    .link-out {
        white-space: nowrap; /* absolute position on the :after becomes a problem when the text wraps to multiple lines */
    }

    .link-out:after {
        content: "\027a4";
        font-size: 16px;
        opacity: 0;
        position: absolute;
        right: var(--right_displacement, -12px);
        top: var(--top_displacement, -8px);
        transform: rotate(-45deg);
        transition: opacity 0.75s ease-out;
    }

    .mobile-hidden {
        display: unset;
    }

    .sm-heading {
        display: inline;
    }
}

@media screen and (min-width: 800px) {
    main {
        /* Provide a more vertically-centered experience, once we're sure the content won't go off the top of the page */
        top: 35%;
        transform: translateY(-35%);
    }

    .content {
        /* Content box-shadow should cast SE, but on mobile it's just S to let the body bg color come through more */
        box-shadow: inset 0 0 20px #000, 10px 10px 20px #000;
    }

    .password .visibility-toggle {
        /* Desktop text inputs are slightly shorter than on mobile, so here we bump the visibility icons up a little */
        top: 42px;
    }
}

@media screen and (min-width: 950px) {
    main > * {
        box-sizing: unset; /* box-sizing needed on mobile view to include auto margins in 100% width */
        width: 900px;
    }
}

@media screen and (min-width: 1100px) {
    .content > div {
    	margin-left: 50px;
    	margin-right: 50px;
    }

    .content .intro-heading {
        margin-bottom: 30px;
    }

    .footer {
        margin-top: 45px
    }

    .header-title {
        left: -4px;
    }

    .header-subtitle {
        left: 0;
    }
}