/**
	@author Sonia Kanclerski
	@email skancler@yahoo.fr
	@website https://www.soniakanclerski.com/
	@update 16/05/2026
	@date 06/09/2024
	@file databox.css
	@content Styles for the databox space.
**/

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*** Begin databox ***/
#databox
{
	position:absolute;
	top: 10px;
	left: 5px;
	padding: 0;
	width: 345px;
	height: 32px;
	border-radius: 10px;
	background-color: #222;
	border: none;
	font-size: .5em;
}

#databox:after {
  content: "";
  display: table;
  clear: both;
}

/*** Begin languagesbox ***/
#languagesbox
{
	margin: 0 0 0 4px;
	padding: 5px 0 0 6px;
	float: left;
	width: 90px;
	height: 100%;
	border-right: solid 2px #fff;
}

#languagesbox a 
{
	display: contents;
}

#languagesbox img 
{
	margin-right: 5px;
	padding: 0;
	width: 31px;
	height: auto;
	border: solid 1px #222;
	outline: none;
}

#languagesbox img.active,
#languagesbox img:active
{
	border: solid 1px #fff;
}

#languagesbox img:hover,
#languagesbox img.active:hover
{
	border: solid 1px #E9B44C;
}

/*** End languagesbox ***/

/*** Begin socialbox ***/
#socialbox
{
	float: left;
	width: 210px;
	height: 100%;
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 3px 2px 0 2px;
	border: 0;
	text-align: center;
	border-right: solid 2px #fff;
}

#socialbox a 
{
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#socialbox li 
{
	margin: 0 0 0 5px;
	padding: 0;
	display: inline;
	cursor: pointer;
	border: 0;
}

#socialbox li:first-child
{
	margin: 0;
}

#socialbox img 
{
	margin: 0;
	padding: 0;
	width: 25px;
	height: 25px;
	outline: none;
	border-radius: 5px;
	border: solid 2px #222;
}

#socialbox img:hover
{
	border: solid 2px #E9B44C;
}
/*** End socialbox ***/

/*** Begin aboutButton ***/
#aboutButton
{
	float: left;
	margin: 0 0 0 4px;
	padding: 3px 0 0 0;
	width: 30px;
	height: 100%;
}

#aboutButton img
{
	cursor: pointer;
	outline: none;
	width: 28px;
	height: auto;
	padding: 1px 2px;
	border-radius: 5px;
	border: solid 2px #222;
}

#aboutButton img:hover
{
	border: solid 2px #E9B44C;
}
/*** End aboutButton ***/

/*** End databox ***/

/*** Begin about ***/
#about
{
	display: none;
	height: 100%;
	width: 100%;
	/* position: fixed; */
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
	overflow-x: hidden;
	transition: 0.5s;
	
	font-family: Helvetica, Sans serif;
}

body.about
{
	background-color: #191919;
}

#about.about
{
	height: 100%;
	width: 100%;
	display: unset;
	position: unset;
	z-index: unset;
	top: unset;
	left: unset;
	background-color: unset;
	overflow-x: unset;
	transition: unset;
}

#about .closeButton
{
	position: absolute;
	top: 15px;
	right: 30px;
	font-size: 60px;
	color: #818181;
	text-decoration: none;
	font-weight: bold;
}

#about .closeButton:hover
{
	color: #0F8B8D;
}

#about #content
{
	margin: 200px auto 0 auto;
	width: 80%;
	max-width: 500px;
	color: #fff;
}
/*** End about ***/

/*** Begin Content about space ***/

#content a:hover,
#content a:focus
{
	color: #0F8B8D;
}

#credits.index
{
	font-size: .65em;
}

#credits #author p,
#credits #source p
{
	font-size: .9em;
	text-align: justify;
	line-height: 1.6;
}

#credits a {
	color: #818181;
	transition: 0.3s;
}

#myalbumsonline
{
	margin: 40px auto 0 auto;
	padding: 0;
	text-align: center;
}

#myalbumsonline a
{
	color: #818181;
	text-decoration: none;
}

#myalbumsonline p
{
	margin-bottom: 10px;
	color: #818181;
	text-decoration: underline;
	font-size: 14px;
}

#myalbumsonline p:hover
{
	color: #0F8B8D;
	cursor: pointer;
}

#myalbumsonline img
{
	width: 300px;
	border: solid 2px #191919;
	max-width: 50%;
}

#myalbumsonline img:hover
{
	border: solid 2px #0F8B8D;
}


@media screen and (max-width: 1024px),
@media screen and (max-height: 800px)
{
	#about #content
	{
		margin-top: 100px;
	}
	
	#credits #author p,
	#credits #source p
	{
		font-size: .7em;
	}
	
	#myalbumsonline img
	{
		width: 150px;
		max-width: 30%;
	}
}

/*** End Content about space ***/