/* For Enigma n^2022, by Jim Andrews  */

body {
    /* Nothing in the app should be selectable.  */
    margin:0;
    overflow: hidden;  
    /* overflow:hidden hides the scrollbars. Had to do this 
    cuz the grains were somehow causing intermittent scrollbars. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color:#000000;
    /* The below two lines and the html section are 
    needed for Android cuz overflow:hidden causes
    problems in Android otherwise.  */
    min-height: 100vh; 
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
    /* This line, as with the above two, is to deal with 
    the results of overflow:hidden in Android. */
  }

/* ***************************************************
LAYER 0
*****************************************************/

/* The app has 4 layers managed by enig.layerMgr 
(see enigman2022.js). The below CSS is grouped 
into those layers. You can also see the layers 
in index.html */

#layer0Container {
    /* layer0 contains the links at bottom right
    layer0 is always topmost.  */
    position:fixed;
    text-align:center;
    bottom:5px;
    right:5px;
    font-family:'Times New Roman', Times, serif;
    font-size:1em;
    color:white;
    text-shadow: 1px 1px black;
    line-height: 1.4;
    opacity:1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}

.logoLink:link, .logoLink:active, .logoLink:visited {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color:white;
    cursor:pointer;
}

.logoLink:hover {
    color:red;
}

.logo {
    /* Logo at top left corner */
    position:absolute;
    top:5px;
    left:10px;
    color:#800000;
    text-shadow: 1px 1px rgba(255,255,255,0.7);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:1.3em;
    font-weight:750;
    z-index: 4;
    cursor: pointer;
}

#meanometer {
    /* The pie chart at top left  */
    margin-top:5px;
    /* pointer-events: none; */
}

@media (max-width: 768px) {
    /* For mobile phones: */
    .logo {
        font-size:1em;
    }
  }

/* ***************************************************
LAYER 1
*****************************************************/

#layer1Container {
    /* layer1 is the first screen visible in the app  */
    position: relative;
    width: 100%;
    height: 100vh;
    background-color:rgb(212, 127, 15);
    visibility: visible;
    opacity:1;
    transition: opacity 3s, visibility 3s;
    box-sizing: border-box;
}

.redBlackRadGrad {
    /* Concentric circles  */
    /* background: repeating-radial-gradient(circle at center, maroon, maroon 82px, rgb(207, 41, 0) 82px, rgb(255, 51, 0) 164px); */
    /* background: repeating-radial-gradient(circle at center, maroon, maroon 164px, rgb(207, 41, 0) 164px, rgb(255, 51, 0) 248px); */
    /* background: repeating-radial-gradient(circle at center, #005bbb, #005bbb 164px, #ffd500 164px, #ffd500 248px); */
    background: repeating-radial-gradient(circle at center, maroon, maroon 164px, rgb(0, 0, 0) 164px, rgb(20, 20, 20) 248px);
}

.fullscreen {
    /* Button at top right corner in both layer1 and layer 2 */
    position:absolute;
    width:40px;
    height:40px;
    top:10px;
    right:10px;
    z-index: 7;
    cursor: pointer;
    opacity:1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
    background-image: url('images/fullscreen.png');
}

#layer1Middle {
    /* The rectangle in the middle  */
    margin:0;
    position:absolute;
    width:265px;
    height:265px;
    top:50%;
    left:50%;
    text-align: center;
    transform: translate(-50%,-50%);
    /* background-color: #800000; */
    /* border: 1px solid rgb(133, 133, 133); */
}

#loading {
    /* Text that says "Loading..." and then "Click to play!" */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:1.2em;
    text-align: center;
    text-shadow: 1px 1px black;
    color:#ff6600;
    font-variant: small-caps;
    font-weight: 700;
    width:100%;
    /* padding:10px; */
}

#intro {
    /* Introductory text  */
    font-size:0.8em;
    color:rgb(255, 255, 255);
    text-shadow: 1px 1px black;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
}

/* ***************************************************
LAYER 2
*****************************************************/

#layer2Container {
    /* Contains all of layer 2. This is the app's main layer. */
    position: absolute;
    margin:0px;
    width: 100%;
    height: 100vh;
    top:0px;
    left:0px;
    visibility:  hidden;
    opacity:0;
    transition: opacity 3s, visibility 3s, background-color 3s;
    /* background-color: rgb(212, 127, 15); */
}

.orangeGradient1 {
    /* background-color: rgb(141, 6, 6); // 8d0606 */
    /* background-color: rgb(7, 122, 45);  */
    /* background-color: #145731; USE THIS! */
    /* background-color: #00005c; */
}

.orangeGradient1Good {
    /* Background of layer2Container div  */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d47f0f+1,d64e00+50,d47f0f+100 */
    background: #d47f0f; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #d47f0f 1%, #d64e00 50%, #d47f0f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #d47f0f 1%,#d64e00 50%,#d47f0f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #d47f0f 1%,#d64e00 50%,#d47f0f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d47f0f', endColorstr='#d47f0f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.background {
    /* Used to display images in background  */
    position:absolute;
    width:100%;
    height:100vh;
    z-index: 0;
}

#dummy1, #dummy2, #dummy3, #dummy4, #dummy5, #dummy6, #dummy7, #dummy8 {
    position: absolute;
    top: -10px;
    left: -10px;
    width:0px;
    height:0px;
}

.logoMainMessage {
    font-size: 0.8em;
    color:white;
    text-shadow: 1px 1px black;
}

#extraWaveImage {
    /* Contains the second wave image that appears above the rest  */
    opacity:0.70;
    position:absolute;
    width:100%;
    height:100vh;
    background-image: url(images/enigman2022d1.png);
    background-position: 0% 88%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    transition: opacity 3s, visibility 3s;
}

#grainsDiv {
    /* div that contains the grains  */
    position:absolute;
    margin:0px;
    width:100%;
    height:100vh;
    z-index: 2;
    pointer-events: none;
    top:0px;
    opacity: 1;
    visibility: visible;
    transition: opacity 3s, visibility 3s;
}

.grain {
    /* Dynamically assigned in GrainObject  */
    position:absolute;
    box-sizing: border-box;
    width:2px;
    height:100vh;
    opacity:0.75;
    top:0px;
    pointer-events: none;
}

.timeLine {
    /* Dynamically assigned in GrainObject  */
    position:absolute;
    box-sizing: border-box;
    height:100vh;
    width:1px;
    top:0px;
    background-color: black;
    pointer-events: none;
}

#circlesContainer {
    /* Contains all the circles displayed in the background  */
    position:absolute;
    width:100%;
    height:100vh;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
}

.circleBox {
    position:absolute;
    width:300px;
    height:300px;
    left:200px;
    top:200px;
    /* background-color: brown; */
}
.circle {
    position: absolute;
    box-sizing: border-box;
    width:100%;
    height:100%;
    /* border: 1px solid black; */
    top: 50%;
    left: 50%;
    opacity: 0.9;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: rgb(99, 99, 233);
    /* animation-duration: 20s; */
    /* animation-delay: 0s; */
    animation-name: shrinkCircle;
    animation-timing-function: linear;
}

@keyframes shrinkCircle {
    from {
        width:100%;
        height:100%;
        opacity:0.42.5;
    }

    to {
        width:0%;
        height:0%;
        opacity:0;
    }
}

#frontWaveImage {
    /* div that contains a wave image and the grains  */
    position:absolute;
    width:100%;
    height:100vh;
    background-image: url(images/enigman2022c3.png);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    /* background-size: contain; */
    background-size: 100% auto;
    z-index: 4;
    pointer-events: none;
    opacity:0.9;
    visibility:visible;
    transition: opacity 3s, visibility 3s;
}

#stripMessage {
    position:absolute;
    z-index: 6;
    pointer-events: none;
    opacity:0;
    visibility:hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:20px;
    border: 1px solid black;
    color:white;
    text-shadow: 1px 1px black;
    text-align: center;
    background-color: rgb(53,53,53);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: opacity 2.5s, visibility 2.5s;
    border-radius: 50%;
}

#galleryModeMessage {
    position:absolute;
    /* display:flex; */
    z-index: 7;
    pointer-events: none;
    opacity:0;
    visibility:hidden;
    /* width:100px;
    height:100px; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:35px;
    border: 1px solid black;
    color:white;
    text-shadow: 1px 1px black;
    text-align: center;
    background-color: rgb(53,53,53);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: opacity 2.5s, visibility 2.5s;
    border-radius: 50%;
}

/* *************************************************************
Help layer
************************************************************** */

.helpContainer {
	/* All the 'about' styles refer to the window of text about
	   Aleph Null and the Tips window. This one's the container 
	   of those windows.*/
	position:absolute;
	background-color:#202020;
	width:320px;
	border: 1px groove #c0c0c0;
    visibility: hidden;
    opacity:0;
    transition: opacity 0.5s, visibility 0.5s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.helpContainer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,222222+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top,  #000000 0%, #222222 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#222222)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #000000 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #000000 0%,#222222 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #000000 0%,#222222 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #000000 0%,#222222 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
}

.helpContainer_handle {
	/* The about window's title bar */
    background-color: black;
	position: relative;
    box-sizing: border-box;
	width:100%;
	height:30px;
	top:0px;
	left:0px;
	padding:4px;
	padding-left:10px;
    border-bottom: 1px solid #c0c0c0;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:0.9em;
	cursor:move;
}

.helpIcon {
    /* img that appears at top left and in Help window  */
    width:16px;
    height:16px;
    box-sizing: border-box;
}

.blackGrayGradient {
    /* Headers in Help window  */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,333333+57,333333+57,333333+100 */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #333333 57%, #333333 57%, #333333 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#333333 57%,#333333 57%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#333333 57%,#333333 57%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=1 ); /* IE6-9 */
}

.helpContainer_close {
	/* The Help window close button */
	position: absolute;
	top: 3px;
	right: 3px;
	cursor:pointer;
    z-index: 99999999;
}

.helpLayerContainer {
	/* This is a container of the Tips text */
    box-sizing: border-box;
    margin:6px;
    background-color: maroon;
    /* background-color: #040453; */
	border: 1px solid #FFF;
	padding:12px;
    height:300px;
}

.helpLayer {
	/* This is the Tips text itself */
    position:absolute;
    max-height: 275px;
    overflow: auto;
    width:290px;
}

.helpHeader {
	/* The orange text headers in the About window. */
	box-sizing: border-box;
    font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: bold;
	font-variant: small-caps;
	color: #F60;
	text-shadow: 1px 1px #000;
	background-color: #111;
	margin-right:12px;
	padding:3px;
	margin-bottom:10px;
	border: 1px solid #505050;
}

.helpHeader {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,444444+100 */
	background: #111111; /* Old browsers */
	background: -moz-linear-gradient(left,  #111111 0%, #444444 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #111111 0%,#444444 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #111111 0%,#444444 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#444444',GradientType=1 ); /* IE6-9 */
}

.helpContent {
    box-sizing: border-box;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
    text-shadow: 1px 1px black;
	color: #eee;
    padding-right:12px;
    word-wrap: break-word;
    max-width: 300px;
}

.helpLogo {
    text-align: center;
}

.creditsname:link, .creditsname:visited {
    font-weight: bold;
    color:#f60;
    text-shadow: 1px 1px black;
    text-decoration: none;
}

.creditsname:hover {
    color: #d22f32;
}

.creditsname2 {
    font-weight: bold;
    color:rgb(255, 255, 255);
    text-shadow: 1px 1px black;
    text-decoration: none;
}

ul {
    margin-left:-20px;
}

/* *************************************************************
Dummy layer
************************************************************** */

.dummyContainer {
    position:absolute;
    visibility: hidden;
    opacity:0;
}

.enigman2022c1 {
    background: url(images/enigman2022c1.png);
}

.enigman2022c2 {
    background: url(images/enigman2022c2.png);
}

.enigman2022c3 {
    background: url(images/enigman2022c3.png);
}

.enigman2022c4 {
    background: url(images/enigman2022c4.png);
}

.enigman2022c5 {
    background: url(images/enigman2022c5.png);
}

.enigman2022c6 {
    background: url(images/enigman2022c6.png);
}

.enigman2022c7 {
    background: url(images/enigman2022c7.png);
}

.enigman2022c8 {
    background: url(images/enigman2022c8.png);
}