body {padding: .6em; line-height: 1.9em; 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');
}

img {max-width: 100%; height: auto; display: block; margin: auto; border-radius: 1.3em;}
img a, img a:link, img a:active, img a:visited, img a:hover{border:0}

h1 {font-family: arial; font-variant: small-caps; color: #0f62a5; font-size: 1em}
h2,h3 {font-family: arial; font-variant: small-caps; color: #0f62a5; font-size: 1em; padding-top: 2em}
h5 {font-family: helvetica, arial; font-weight: bold; color: rgb(0, 0, 0); font-size: 17px; text-align: left}

#wrapper{margin: auto}
#content{font-family: "Custom", system-ui, sans-serif, droid serif, droid sans, segoe ui, arial; font-size: 1.7em; text-shadow: 3px 3px 6px #cacaca; color: #222; background-color: #fff; padding: .5em; border-top-left-radius: 0.7em; border-top-right-radius: 0.7em;}

#footer{font-family: arial; font-size: 1em; padding: .5em; text-align: center; display: block; background: #151515; color: #5c5c5c; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; line-height: 1.2em;}
#footer a, a:hover, a:active, a:link, a:visited {color: #FF0062}

.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}

a, a:hover, a:active, a:link {color: #008DFF}
a:visited {color: #003F73}

strong,b {font-weight: normal; color: #f60040}
em {font-style: normal} 
u {color: #0c273a} 
.tags {color: #444; font-family: arial; font-size: .5em}
.quote {color: #000; background-color: #ffeccf; border-radius: 1em; padding: 1em}
mark {color: #222; background-color: #ffe19f; border-radius: .3em; padding-left: .2em; padding-right: .2em;}

.blue {color: #1e74cd}
.gray {color: gray}

ol {list-style: none}
li {font-size: .9em;}
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}

.video {position: relative; height: 0; overflow: hidden; box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25);
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;}

/* 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;
}

