* {scroll-behavior: smooth}

body {background-color: #e2e2e2; margin-bottom: 1em}

@font-face {
  font-family: "Custom";
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Custom.ttf'); 
  src: local(''), url('fonts/Custom.ttf') format('truetype');
}

#wrapper {margin: auto; width: 60%; cursor: crosshair;}

#content {margin-top: 1em; padding: 1em; font-family: "Custom", arial, tahoma; font-size: 38px; text-shadow: 3px 3px 6px #cacaca; color: #222; background-color: #fff; border-top-left-radius: 1.3em; border-top-right-radius: 1.3em; line-height: 47px}

.photo{font-size: .5em; font-family: arial; text-align: center; display: block; color: #5c5c5c; text-shadow: none}
.photo a, a:hover, a:active, a:link, a:visited {text-decoration:none}

.translations{font-size: .5em; font-family: tahoma, arial; color: gray; text-shadow: none}
.translations a{font-weight: bold}

#footer{font-size: 1em; font-family: arial; padding: 1em; text-align: center; display: block; background: #151515; color: #5c5c5c; border-bottom-left-radius: 1.2em; border-bottom-right-radius: 1.2em;}
#footer a, a:hover, a:active, a:link, a:visited {color: #ff2076}

a, a:active, a:link {color: #0084ff} 
a:hover {color: black; cursor:pointer} a:visited {color: #0058a1}

h1 	{ font-family: arial; font-variant: small-caps; color: #81c6e6; font-size: 1.2em; line-height: 60px; 
	text-shadow: 1px 1px 1px #435b71, 1px 2px 1px #435b71, 1px 3px 1px #435b71, 1px 4px 1px #435b71, 1px 5px 1px #435b71, 1px 6px 1px #435b71, 
	1px 10px 5px rgba(16, 16, 16, 0.5), 1px 15px 10px rgba(16, 16, 16, 0.4), 1px 20px 30px rgba(16, 16, 16, 0.3), 1px 25px 50px rgba(16, 16, 16, 0.2);
	}
h2,h3 {font-family: arial; font-variant: small-caps; color: #127be7; font-size: 1.1em; padding-top: 1.4em}
h5 {font-family: helvetica, arial; font-weight: bold; color: rgb(0, 0, 0); font-size: 17px; text-align: left}

strong,b {font-weight: normal; color: #f60040} 		
u {color: #0c273a}
.blue {color: #1e74cd}
.gray {color: gray}

mark {color: #222; background-color: #ffe19f; border-radius: 8px; padding-left: .2em; padding-right: .2em;}
.quote {margin: auto; width: 85%; color: #22190b; background-color: #ffeccf; border-radius: 1.2em; padding: 1.5em;}
.tags {color: #444; font-family: arial; font-size: .5em; filter: blur(4px)}
.tags:hover {filter: none;}

ol {list-style: none}
li:before {content: "•"; padding-right: 5px; color: black;}
li:nth-child(1):before {color: red}
li:nth-child(2):before {color: maroon}
li:nth-child(3):before {color: yellow}
li:nth-child(4):before {color: olive}
li:nth-child(5):before {color: lime}
li:nth-child(6):before {color: green}
li:nth-child(7):before {color: aqua}
li:nth-child(8):before {color: teal}
li:nth-child(9):before {color: blue}
li:nth-child(10):before {color: navy}
li:nth-child(11):before {color: fuchsia}
li:nth-child(12):before {color: purple}
li:nth-child(13):before {color: silver}
li:nth-child(14):before {color: gray}

ol.numbers {list-style: numbers} 
ol.numbers li:before {content: ""}

img {max-width: 100%; height: auto; display: block; margin: auto; border-radius: 1em;}
img:hover {filter: grayscale(100%); filter: gray; transition: all .6s ease-in-out;}

.blurred {filter: blur(4px)} .blurred:hover {filter: none}

.video {position: relative; height: 0; overflow: hidden; 
padding-bottom: 56.25%; /* Sets the aspect ratio of the video (16:9) */}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.video, .video iframe {max-width: 1920px;max-height: 1080px;}

/* Custom title for links */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.3s;
    visibility: visible;
}
[data-title]:before {content: "»"; padding-right: 4px; color: silver}

[data-title]:after {
    content: attr(data-title);
    color: #111; background-color: #e9e9e9; 
	border-radius: .4em;
    position: absolute;
	font-family: tahoma, arial; font-size: .5em; 
    padding: 0px 12px 0px 12px; /* sus dreapta jos stanga */
    bottom: -1em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 4px #434343;
    border-top: 2px solid #fff;
    z-index: 999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

/* Follow.it Style */
.followit .form {
  display: flex; flex-direction: column; position: relative; 
  justify-content: center; margin-top: 20px;
  padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px);
  max-width: 400px; border-radius: 10px; 
  box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25);
  background-color: rgb(255, 255, 255); 
  border-width: 1px; border-color: rgb(204, 204, 204);
}
.followit .form,
.followit .form *{
  box-sizing: border-box;
}
.followit .form .heading h5{
  margin-top: 0; margin-bottom: 0;
}
.followit .form .input-field {
  margin-top: 10px; width: 100%;
}
.followit .form .input-field input {
  width: 250px; height: 40px; 
  border-radius: 10px; border: 2px solid #e9e8e8; outline: none;
  text-transform: none; font-family: helvetica, arial; font-weight: 700; 
  color: rgb(61, 255, 0); background-color: rgb(82, 82, 82);
}
.followit .form .input-field input {
  color: #3DFF00; font-family: arial; font-size: 14px;
  font-weight: 400; line-height: 20px; text-align: center;
}
.followit .form .input-field input::placeholder {
  color: gray; opacity: 1;
}
.followit .form .submit-button {
  margin-top: 12px; width: 100%;
}
.followit .form .submit-button button {
  width: 200px; height: 40px; border: 0;
  border-radius: .6em; margin-left: 20px; text-transform: none; 
  font-family: tahoma, arial; font-weight: bold; 
  color: rgb(255, 255, 255); 
  font-size: 20px; text-align: center; 
  background-color: rgb(31, 129, 0);
}
.followit .form .submit-button button:hover {
  cursor: pointer; background-color: #225f00;
}