/*
CSS for ARMY OF ONE: The Jack Bauer Fanlisting
Hand-coded by Ainna (https://fan.minty.nu) (c) 2025
Menu background pattern from Toptal Subtle Patterns

No copyright infringement intended.

Image use is guided by the Fair Use Clause (https://fairuse.stanford.edu/overview/fair-use/what-is-fair-use/)



*/

































































/*

                         -------------------------------
                         |          L E A R N          |         
                         |                             |
                         |           F R O M           |
                         |                             |
                         |           Y O U R           |
                         |                             |
                         |            O W N            |        
                         |                             |
                         |       S O U R C E S !       |    
                         -------------------------------

I put together a LOT of tutorials in the web to come up with this final design.
Copying+pasting my CSS is absolutely NOT okay. 

*/





































@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@200&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #33322e; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #222; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #111;  
}

html, body {
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

body {
    margin: 0px;
    padding: 0px;
    font: 1.2rem/160% 'Libre Franklin', Sans-Serif;
    background: #33322e url('bauerpat.jpg') repeat top left;
    color:#b2afa8;
    height: 100%;
    text-align: justify;
}

a, a:visited, a:active {
    color:#89ade4;
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
}

a:hover {
    color:#9abaea;
    text-decoration: none;
}

b, strong, label {
    color: #c8966e;
}

em, i {
    color: #6c9b86;
}

del, strike {
    color:#ccc;
}


fieldset {
    border:0px;
    margin:auto;
}

input, textarea, select, input[type=submit], input[type=reset] {
    color:#ddd;
    border:1px solid #89957a;
	font: 1rem/100% 'Libre Franklin', Verdana, Tahoma, sans-serif;
	text-transform: uppercase;
	background: inherit;
	padding: 10px;
}

input[type=submit], input[type=reset] {
    width: 150px;
}

input[type=text], textarea, select {
    width: 68%;
}

textarea {
overflow-x: hidden;
overflow-y: hidden;
width: 400px;
height: 200px;
}

table {
    margin: 0 auto;
	border-collapse:collapse;
    background: inherit;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    -khtml-border-radius: 10px; 
}

td, th {
	padding:10px;
	padding-left: 10%;
	text-align: justify;
}

th {
    text-transform: uppercase;
    
}

tr:hover {
 background: rgba(60, 52, 41, 0.7);
}


.corners, input, textarea, select, button, .bq, .stat {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; 
    -khtml-border-radius: 20px; 
}

.opacity, input, textarea, select, th, .dashboard, .stat, blockquote, #footer {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    opacity: 0.65;
}

/*.shadow{
    -moz-box-shadow: 10px 8px #dcd9c8;
    -webkit-box-shadow: 10px 8px #dcd9c8;
    box-shadow: 10px 8px #dcd9c8;
}*/

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

img.border {
    -moz-box-shadow: 10px #eee;
    -webkit-box-shadow: 10px #eee;
    box-shadow: 10px #eee;
}


img.bw {
    filter:Alpha(opacity=5);
    -moz-opacity:0.05;
    opacity:0.05;
    border:none;
    -webkit-filter: grayscale(5%); /* Safari 6.0 - 9.0 */
    filter: grayscale(5%);
}

img.bw:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transition: .5s ease;
}


.bq, blockquote, .stat {
    width: 80%;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    letter-spacing: 1px;
    background: rgba(23, 22, 19, 0.8);
}

.bq, blockquote {
    font: 0.75rem/130% 'Montserrat', Verdana, Sans-serif;
}

.bq, blockquote, .av {
    background: #eee;
    border: 1px dotted #ccc;
}

.stat {
    /*width: 75%;*/
    height: 100%;
    text-align: center;
    padding: 20px;
    font: 0.8rem/150% 'Libre Franklin', Helvetica, Sans-serif;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}


.fineprint {
text-align: justify;
}

.av {
    padding: 7px;
}

#topbar .subtitle, #footer, .exits, .bq, blockquote, .smol, h3, .meta {
    text-transform: uppercase;
}


.nbsp {
 margin: 3px 2px;   
}


.left {
    float: left;
    margin-right: 10px;
}

.right {
    float: right;
    margin: 0 0 0 10px;
}

.noborder a {
    border: none;
}

img.trans {
    filter:Alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;
    border:none;
}

img.trans:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    transition: .5s ease;
}


#place {
    margin: 0 auto;
    height: 100%;
    width: 1014px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    filter: alpha(opacity=85);
    opacity: 0.85;
}


#art {
    background: url('armyofone.jpg') no-repeat;
    background-position: contain;
    width: 1014px;
    height: 722px;
    padding: 0;
    margin: 0 auto;
}


.meta {
    font-size: 0.7rem;
    line-height: 0.7rem;
}


#textbg {
  background: #252421 url('bauertxt2.jpg') top left repeat;
  z-index:2;
  padding: 20px 10px;
}

#text {
    width: 60%;
    margin-top: -250px;
    margin-left: 340px;
}

#footer {
    width: 85%;
    margin: 0 auto;
    z-index: 3;
    padding: 20px;
    text-align: center;
    background: rgba(23, 22, 19, 0.8);
}

.footer, .enthver {
    font: 0.7rem/120% 'Libre Franklin', Sans-Serif;
    color: #627f7b;
}

.footernav {
    font: 2rem/150%;
}

.right {
    float: right;
    margin-left: 10px;
}

.center  {
    text-align:center;
}

.m {
    margin:0 auto;
}

h1 {
    font: italic 2.5rem/80% 'Quantico', Arial Black, Sans-Serif;
    color: #5d9f6c; 
    text-align: right;
    margin-bottom: -20px;
    text-transform: lowercase;
}



/*MENU*/

.nav {
  width: 30%;
  padding: 10px 0;
  margin-top: -250px;
  margin-left: -5px;
  float: left;
}

.nav ul {
  text-align: center;
}

.nav ul li {
  list-style-type: none;
}

.nav ul li a {
  padding: 18px;
  font: 1.3rem/130% 'Libre Franklin', Helvetica, Sans-serif;
  text-transform:uppercase;
  color: #cab54f;
  text-decoration: none;
  display: block;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

.nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(60, 52, 41, 0.7);
}