body
{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	/* justify-content: center;
	align-items: center; */
	/* background-color: rgb(0, 9, 27); */
	/* background: #34495e; */
}
#storySelectCanvas
{
	width: 100vw;
    height: 100vh;
    display: block;
	color: black;
	overflow: hidden;
    background: url(backgrounds/ChangesBg.jpg) no-repeat center center fixed;
    z-index: -1;
}
#selectionPageCanvas
{
    width: 100vw;
    height: 100vh;
    display: block;
	color: black;
	overflow: hidden;
    background: url(backgrounds/DigitalHeartbeatBg.jpg) no-repeat center center fixed;
}
section
{
	width: 100%;
    height: 100vh;
	/* background-image:url(http://images6.fanpop.com/image/photos/33300000/Abstract-Space-space-33308889-1920-1200.jpg); */
	/* background: url('https://1.bp.blogspot.com/-gKoycQdrzus/Xd2ytRvxSBI/AAAAAAAARts/GEaaLfVl5HMYHqeQ_clnbnYPtk3BeaRkACLcBGAsYHQ/w914-h514-p-k-no-nu/colorful-forest-nature-fantasy-spring-autumn-digital-art-uhdpaper.com-4K-4.1992-wp.thumbnail.jpg'); */
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow: hidden;
	background-size: ;
	display: flex;
	justify-content: center;
    align-items: center;
	font-family: consolas;
	background-image: url("sky.jpg");
	background: url(backgrounds/connectedWorldSelect.jpg) no-repeat center center fixed;
	background-size: 100% 100%;
}
#homeBtn
{
    color: black;
    text-decoration: none;
	margin-left: 10px;
	justify-self: start;
    /* background-color: cyan; */
    background: inherit;
    border: black;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
}

#navBar
{
	margin-left: 91%;
	margin-top: 2%;
	
}

#navBar a
{
	color: powderblue;
    text-decoration: none;
	justify-self: start;
	background: none;
    border: powderblue;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
	/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
#navBar a:hover
{
	color: white;
	color: rgb(214, 0, 186);
    text-decoration: none;
	justify-self: start;
	background: rgb(214, 0, 186);
	background: inherit;
    border: rgb(214, 0, 186);
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
}
#hme
{
	margin-right: 20px;
}
#navBar1
{
	position: absolute;
	top: 10px;
	width: 100%;
	/* text-align: center; */
    z-index: 100;
    margin-left: 2050px;
    margin-top: 20px;
    /* margin-top: 570px; */
	display:block;
}
#navBar1 a
{
	color: powderblue;
    text-decoration: none;
	justify-self: start;
	background: none;
    border: powderblue;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
	/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
#navBar1 a:hover
{
	color: white;
	color: rgb(214, 0, 186);
    text-decoration: none;
	justify-self: start;
	background: rgb(214, 0, 186);
	background: inherit;
    border: rgb(214, 0, 186);
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
}
#info 
{
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
    z-index: 100;
    margin-top: 570px;
	display:block;
}
/*#homeBtn1
{
    color: powderblue;
    text-decoration: none;
	margin-left: 1275px;
	/* margin-left: 10px; */
	/*justify-self: start;
    /* background-color: cyan; */
    /*background: none;
    border: powderblue;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
    margin-top: 20px;
	margin-right: 50px;

}
#aboutBtn1
{
    color: powderblue;
    text-decoration: none;
    margin-left: 1275px;
	/* margin-left: 10px; */
	/*justify-self: start;
    /* background-color: cyan; */
    /*background: none;
    border: powderblue;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
    /* margin-top: 50px; */
	/*margin-right: 400px;

}*/
.container
{
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.container .box
{
	position: relative;
	width: 280px;
	height: 400px;
	margin: 20px 0;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 70px;
}
.container .box .imgBx
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	clip-path: circle(400px at center 100px);
	transition: 0.5s;
	transition-delay: 0.5s;
}
.container .box:hover .imgBx
{
	clip-path: circle(80px at center 100px);
	transition-delay: 0s;
}
.container .box .imgBx img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.container .box .content
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	color: white;
}
.container .box .content h2
{
	margin: 0;
	padding: 0;
}
.container .box .content a
{
	text-decoration: none;
	background: #000;
	color: #fff;
	padding: 10px;
	display: inline-block;
	border-radius: 20px;
}
.container .box .content h2,
.container .box .content p,
.container .box .content a
{
	opacity: 0;
	transition: 0.5s;
	transform: translateY(20px);
}
.container .box:hover .content h2
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s
}
.container .box:hover .content p
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.7s
}
.container .box:hover .content a
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.9s
}

#Interface
{
	/* background: url('https://1.bp.blogspot.com/-gKoycQdrzus/Xd2ytRvxSBI/AAAAAAAARts/GEaaLfVl5HMYHqeQ_clnbnYPtk3BeaRkACLcBGAsYHQ/w914-h514-p-k-no-nu/colorful-forest-nature-fantasy-spring-autumn-digital-art-uhdpaper.com-4K-4.1992-wp.thumbnail.jpg'); */
	background-repeat: no-repeat;
	background-size: 100%;
}

input[type="radio"]
{
	-webkit-appearance: none;
}

label
{
	height: 140px;
	width: 200px;
	position: relative;
	margin: auto;
	border-radius: 10px;
	transition: 0.5s;
}

#depressed
{
	background: url("sad-cry-regular.svg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: center;
	background-position-y: center;
}

#sad
{
	background: url("sad-tear-regular.svg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: center;
	background-position-y: center;
}

#meh
{
	background: url("meh-regular.svg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: center;
	background-position-y: center;
}

#happy
{
	background: url("smile-regular.svg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: center;
	background-position-y: center;
}

#veryHappy
{
	background: url("smile-beam-regular.svg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: center;
	background-position-y: center;
}
.fa
{
	font-size: 80px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-80%);
}

label>span
{
	font-size: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,80%);
	font-family: "Poppins", sans-serif;
	font-weight: 500;
}

input[type="radio"]:checked .label
{
	border-color: yellow;
	color: white;
	box-shadow: 0 15px 45px rgba(24,249,141,0.2);
}

#theSvg:hover
{
	border-color: yellow;
}

#navBarSP
{
    position: absolute;
	top: 10px;
	width: 100%;
	/* text-align: center; */
    z-index: 100;
    margin-left: 1250px;
    margin-top: 20px;
    /* margin-top: 570px; */
	display:block;
}

#navBarSP a
{
	color: powderblue;
    text-decoration: none;
	justify-self: start;
	background: none;
    border: powderblue;
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
	/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
#navBarSP a:hover
{
	color: white;
	color: rgb(214, 0, 186);
    text-decoration: none;
	justify-self: start;
	background: rgb(214, 0, 186);
	background: inherit;
    border: rgb(214, 0, 186);
    border-style: solid;
    text-align: center;
    padding: 14px 25px;
	display: inline-block;
	border-radius: 25px;
	align-self: baseline;
}
#hme
{
	margin-right: 20px;
}