* { box-sizing: border-box; margin: 0; letter-spacing: -0.1px; }

body { font-family: Tajawal; font-weight: 500; font-size: 125%; overflow: hidden; background-color: black; }

:root {
  --primary: #fff;
  --text: #eff;
  --secondary-text: #cdd;
  --linkcolor: #0ff;
  --linkvisitedcolor: rgb(183, 129, 255);
  --linkhovercolor: #eff;
  --linkvisitedhovercolor: rgb(221, 171, 255);
  --bg-links: #5cc;
  --selection-color: rgba(155, 255, 255, 0.5);
}

input { font-family: Tajawal; color: white; background: black; font-size: 125%; font-weight: bold; text-align: center; border: 0; padding: 10px; box-sizing: border-box; border-radius: 10px; outline: none; border: 2px solid #5555; display: inline-block; }

a { background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-links) 100% ); background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px; color: var(--linkcolor); text-decoration: none; transition: background-size .2s; padding: 0 2px 0 2px; text-shadow: 2px 2px 1px black; }
a:hover { background-size: 4px 50px; color: var(--linkhovercolor); }
a:active:hover { background: linear-gradient(to bottom, rgba(100, 225, 225, 100%) 0%, rgba(20, 225, 225, 100%) 100%); transition: background .2s; }
a:visited { color: var(--linkvisitedcolor); }
a:visited:hover { color: var(--linkvisitedhovercolor); }

::-moz-selection { background-color: var(--selection-color); color: #ffffff; }
::selection { background-color: var(--selection-color); color: #ffffff; }

::-webkit-scrollbar { width: 15px; background-color: #000; }
::-webkit-scrollbar-thumb { background-color: #00ffdd; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background-color: #398080d5; border-radius: 5px; }

p { margin-top: 0.4em; margin-bottom: 0.4em; }
h2, h3, h4, h5, h6 { text-decoration: 2px underline cyan; text-align: center; }
li { margin-top: 2px; margin-bottom: 8px; }
figure { border: thin #c0c0c073 solid; display: flex; flex-flow: column; padding: 5px; max-width: 380px; margin: auto; float: right; }
figcaption { background-color: #222; color: #fff; font: italic smaller; padding: 3px; text-align: center; }

button { box-shadow: inset 0px 1px 0px 0px #97c4fe; padding-block-start: 0px; padding-inline-end: 8px; padding-block-end: 0px; padding-inline-start: 8px; border: 2px outset #3daaaa; border-radius: 2px; background-color: #3dcccc; text-indent: 0; display: inline-block; color: #ffffff; font-family: 'Tajawal'; font-size: 15px; font-weight: bold; font-style: normal; line-height: 22px; text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #1570cd; user-select: none; }
button:hover { background-color: #5ef6f6; cursor: pointer; }
button:hover:active { background-color: #019595; color: #dff; padding-block-start: 0px; padding-inline-end: 7px; padding-block-end: 0px; padding-inline-start: 9px; border-style: inset; }
:focus { outline: 1px solid cyan; }
button:focus { outline: none; }