html
{
  scroll-behavior: smooth;
}
body
{
	background-color: #305D7B;
	font-family: 'Montserrat';
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  border-radius:14px;
}
 
::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 14px;
}

::-webkit-scrollbar-thumb:hover {
  background: #bbbbbb;
  cursor: pointer;
}

.starDescription
{
	will-change: opacity;
	position: absolute;
	transform: translateX(-50%);
	background-color: #2D476B;
	border-bottom: 20px solid transparent;
	border-top: 20px solid transparent;
	font-size: 18px;
	border-radius: 20px;
	padding: 20px;
	color: rgba(255,255,255,0);
	width: 450px;
	z-index: 1;
	display: none;
	overflow-y: scroll;
}
.mask
{
	-webkit-mask-image: linear-gradient(transparent, rgba(0,0,0,0.75));
	mask-image: linear-gradient(transparent, rgba(0,0,0,0.75));
}
.starAndGlow
{
	width: 110px;
	height: 110px;
	transform: translate(-50%, -50%);
	position: absolute;
}
.star
{
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;	
	width: 50%;
	height: 50%;
	border-radius: 100%; /* doesn't work for the SVG, which always is rendered in a rectangular viewBox, but I need it for the touch area */
}
.starDiffraction
{
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130%;
	height: 130%;
	opacity: 0;
	pointer-events: none;
}
.starDiffractionHorizontal
{	
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	width: 100%;
	height: 1.5%;
	background-image: linear-gradient(90deg, rgba(255,255,255,0), white, rgba(255,255,255,0));
}
.starDiffractionVertical
{	
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	height: 100%;
	width: 1.5%;
	background-image: linear-gradient(0deg, rgba(255,255,255,0), white, rgba(255,255,255,0));
}
.halo
{
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 140%;
	height: 140%;
	pointer-events: none;
}
.core
{
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10%;
	height: 10%;
	border-radius: 100%;
	background-color: white;
	pointer-events: none;
	opacity: 0;
}
.ring
{
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10%;
	height: 10%;
	border-radius: 100%;
	border: 2px solid white;
	pointer-events: none;
	opacity: 0;
}
.link
{
	width: 100%;
	height: 100%;
	border-radius: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
.svgDiv
{
	cursor:pointer;
	margin-right: 15px;
}
.svgDivMobile
{
	cursor:pointer;
	margin-right: 15px;
	margin-left: 55px;
}

.window
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.flexPart
{
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	margin: 20px;
}

.starImage
{
	width: 100%;
	outline: 3px solid white;
	outline-offset: -7px;
	border: 6px solid white;
	border-radius: 10px;
}

.imagesArea
{
	position: absolute;
	width: 400px;
	z-index: 2;
	cursor: cell;
}

.imagesAreaMobile
{
	z-index: 2;
	cursor: cell;
	margin: 55px;
}

.fullWindowImageNavigationArrow
{
	font-size: 65px;
	font-weight: bold;
	color: white;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
	&:hover
	{
		cursor: pointer;
		color: deepskyblue;
	}
}
.fullWindowImageNavigationArrowSVG
{
	position: absolute;
	height: 60px;
	width: 60px;
	border-radius: 30px;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
	&:hover
	{
		cursor: pointer;
	}
}
.arrowColor
{
	fill: white;
	/*&:hover
	{
		fill: deepskyblue;
	}*/
}
.arrowColorHover
{
	fill: deepskyblue;
}
.lineDiv
{
	background-color: white;
	flex: 1;
	height: 2px;
	border-radius: 2px;
	margin: 5px;
}
.lineDivMobile
{
	background-color: white;
	flex: 1;
	height: 4px;
	border-radius: 4px;
	margin: 10px;
}
.pearl
{
	width: 8px;
	height: 8px;
	margin: 8px;
	border-radius: 4px
	background-color: white;
}
.pearlMobile
{
	width: 16px;
	height: 16px;
	margin: 16px;
	border-radius: 8px
	background-color: white;
}
.starLandscapeTitle
{
	position: absolute;
	text-align: center;
	font-family: Gaegu;
	color: white;
	pointer-events: none;
}

#myselfStar
{
	width: 50px;
	height: 50px;
	left: 50px;
	top: 50px;
	cursor: pointer;
	display: none;
	z-index: 3;
}

#myselfDescription
{
	transform: translate(0,0);
	left: 25px;
	top: 100px;
	width: 600px;
	height: 600px;
	overflow-y: scroll;
	overflow-x: hidden;
	color: white;
    background-color: rgba(25,32,53,0.3); /*transparent; /*#414D70*/
    /*background-image: linear-gradient(0deg, #1F2D40, #2B4975, #465B96, #4E7FA0);*/
    border-top: 20px solid white;
    border-bottom: 20px solid white;
    font-size: 18px;
    letter-spacing: 0.05em;
    z-index: 4;
}

#myselfDescriptionMobile
{
	overflow-y: scroll;
	overflow-x: hidden;
	color: white;
    background-color: rgba(25,32,53,0.3); /*transparent; /*#414D70*/
    /*background-image: linear-gradient(0deg, #1F2D40, #2B4975, #465B96, #4E7FA0);*/
    font-size: 36px;
    letter-spacing: 0.05em;
    z-index: 4;
}

#escape
{
	position : absolute;
	left : 95%;
	top : 5%;
	color : white;
	font-size : 40px;
	font-family: 'Arial';
	transform : translate(-50%,-50%);
	text-align: center;
	
	&:hover
	{
		/*font-weight: bold;*/
		color: orange;
		cursor: pointer;
	}
}

#fullWindow
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: none;
	/*background-color: rgba(0,25,50,0.8);*/
}

#fullWindowImage
{
	z-index: 2;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	outline: 3px solid white;
	outline-offset: -7px;
	border: 6px solid white;
	border-radius: 10px;
}

#infoBlockScreen
{
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: white;
	width: 500px;
	font-size: 40px;
	font-weight: bold;
	font-style: italic;
	font-family: 'Crimson Pro';
	z-index: 5;
	display: none;
}