/* Styles for Sea of Po not associated with the poems
in the black window or the black window more generally. */

body {
    margin: 0;
    overflow:hidden;
    background-color: #151515;
}
#layer0Container {
    /* layer0 is the main layer in the app. */
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color:rgb(0, 0, 0);
    visibility: visible;
    opacity:1;
    transition: opacity 0.5s, visibility 0.5s;
    box-sizing: border-box;
}

.introText {
    /* The first text the wreader reads.  */
    cursor: pointer;
    color:white;
    text-shadow: 1px 1px black;
    width:330px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing:border-box;
    padding:12px;
    border: 1px rgb(49, 49, 49) solid;
    border-radius: 7px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    background-color:#111;
}
.introImage {
    margin-top:5px;
    float:left;
    padding-right:5px;
}
#layer1Container {
    /* Container div of the animation window, the logo
    and gallery mode messages.  */
    position: absolute;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
    box-sizing: border-box;
}
#c {
    /* The canvas  */
    position:absolute;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background-color:transparent;
    cursor: pointer;
    transition: background-color 3s;
}
#title {
    /* Text at top left when b window is closed.  */
    position:absolute;
    top:20px;
    left:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:22px;
    font-weight: bold;
    font-variant: small-caps;
    color:rgb(234, 214, 214);
    text-shadow: 2px 2px 2px black;
    opacity: 0.8;
    transition: opacity 1s;
    cursor: pointer;
}
.favicon {
    width:18px;
    height:18px;
}
#galleryModeMessage {
    /* Displays when entering/exiting gallery mode  */
    position:absolute;
    display:inline;
    z-index: 3;
    pointer-events: none;
    opacity:0;
    visibility:hidden;
    left:7px;
    bottom:7px;
    padding:3px;
    border: 1px solid black;
    color:black;
    font-size: 0.5em;
    font-weight:700;
    line-height: 1;
    text-align: center;
    background-color: #f60;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: opacity 1.5s visibility 2s;
    border-radius: 5px;
}
#fpsInfo {
    /* Displays fps++ info. Not secret  */
    display:none;
    position:fixed;
    right:10px;
    bottom:10px;
    background-color:#f60;
    width:130px;
    padding:3px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size:0.8em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border:1px solid black;
    transition: opacity 1s;
}
#resizeInfo {
    position:absolute;
    display: inline;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding:3px;
    opacity:0;
    visibility: hidden;
    transition: opacity 1.5s visibility 2s;
    border-radius: 5px;
    top:10px;
    right:10px;
    font-size: 0.5em;
    font-weight:700;
    line-height: 1;
    color:black;
    background-color: #f60;
    border: 1px solid black;
    z-index: 5;
}
#leftArrow {
    position:absolute;
	left:10px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	opacity:0.15;
    transition: opacity 1s;
	cursor:pointer;
	/* display:none; */
}
#rightArrow {
    position:absolute;
	right:10px;
	top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	opacity:0.15;
    transition: opacity 1s;
	cursor:pointer;
}

.bColorContainer {
    margin-right:10px;
    cursor: pointer;
}

#bgColor {
    cursor: pointer;
}

label {
    cursor: pointer;
}

.bColorSliderLabel {
    position:absolute;
    top:23px;
    color:white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
    font-weight: normal;
    font-size:0.6em;
}

.bColorSliderLabel2 {
    color:white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
    font-weight: normal;
    font-size:0.6em;
}

.bValueLabel2 {
    /* Color Slider labels on right side of sliders that show slider value.  */
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position:absolute;
    top:25px;
    right:5px;
    color:white;
    font-size: 0.6em;
    /* font-weight: bold; */
    text-shadow: 1px 1px black;
    background-color: #000000cc;
    pointer-events: none;
}

.bSlider {
    width:100%;
    cursor:pointer;
    -webkit-appearance: none;  
    appearance: none;
    outline: none; 
    opacity: 0.8; 
    -webkit-transition: .2s; 
    transition: opacity .2s;
}
.bSlider:hover {
    opacity:1;
}
.bSlider::-webkit-slider-thumb  {
    -webkit-appearance: none; 
    appearance: none;
    width: 30px; 
    height: 30px; 
    background: #444; 
    cursor: grab; 
}
.bSlider::-moz-range-thumb {
    width: 30px; 
    height: 30px; 
    background: #444; 
    cursor: grab; 
}

/* ***************************************************
These styles are for the custom alert messages. 
Some of the styles that the corresponding elements 
have are other styles in b.css  
**************************************************** */

.layer2Container {
	/* Contains the alert messages. */
	position:absolute;
	background-color:hsla(0, 0%, 0%, 0.85);
	width:340px;
	/* height:160px; */
	height:205px;
	border: 1px groove #c0c0c0;
    visibility: hidden;
	opacity:0;
    transition: opacity 1s, visibility 1s;
    top: 45%;
    left: 50%;
	transform: translate(-50%, -50%);
}

.cLayerContainer {
	/* This holds alert messages */
	/* position:absolute; */
	color: white;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
	width:100%;
	/* border: 1px solid #c0c0c0; */
	/* border: 1px solid blue; */
    height:160px;
}

.cAlertMessageContainer {
	/* padding-left:20px;
	padding-right:15px; */
	color:white;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	height:120px;
	display: flex;
  	justify-content: center; /* Centers horizontally */
  	align-items: center;     /* Centers vertically */
}

.cAlertMessage {
	max-width: 270px;
	font-size:0.85em;
}

.cButtonContainer {
	/* background-color: #222; */
	width:100%;
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center;    /* Centers vertically */
}

.cAlertButton {
	max-width: 80px;
	width: 80px;
	border-radius: 5px;
	line-height: 1.5;
}