@font-face {
    font-display: swap;
    font-family: 'Kristi';
    font-style: normal;
    font-weight: 400;
    /* Change these paths if necessary: */
    src: url('fonts/kristi-v21-latin-regular.woff2') format('woff2'), 
       url('fonts/kristi-v21-latin-regular.ttf') format('truetype'); 
}

:root {
    /* Fonts */
    --titlefont:'Kristi', Georgia, serif;
    --headerfont:Georgia, serif;
    --bodyfont:Georgia, serif;

    /* Images - change paths if necessary */
    --backgroundimage:url(graphics/background.png);
    --headerimage:url(graphics/header_fumi.jpg);
    --boximage:url(graphics/quote.jpg);
    
    /* Colors */
    --backgroundcolor:#ccc;
    --contentbackground:#FFF;

    --contentcolor:#4f4f4f;
    --footercolor:#999;

    --title:#cb4377;
    --header1:#cb4377;
    --header2:#546926;
    --header3:#cb4377;

    --navlink:#546926;
    --navlinkhover:#cb4377;
    --navlinkborder:#f47fac;
    --navlinkborderhover:#30CECD;

    --link:#982a54;
    --linkhover:#30CECD;
    --linkborder:#b3d167;

    --formbackground:#FFF;
    --formcolor:#982a54;
    --formborder:#b3d167;

    --boxbackground:#ccc;
    --boxcolor:#555;
    --boxborder:#999;

    --footerlink:#982a54;
    --footerlinkhover:#30CECD;
    
}

* { /*reset margin and padding*/
    margin:0;
    padding:0;
    border:0;
}

body {
    background:var(--backgroundimage) fixed var(--backgroundcolor);
    font:1rem var(--bodyfont);
    line-height:1.5;
}

#container {
    margin:50px auto 20px auto;
    background-color:var(--contentbackground);
    max-width:700px;
    width:90%;
}

#banner {
    width:100%;
    height:200px;
    background:var(--headerimage) no-repeat center;
    background-size:cover;
}

#title {
    font:2.7em var(--titlefont);
    color:var(--title);
    text-transform:lowercase;
    text-align:center;
    padding:5px;
}


#navigation {
    width:calc(100% - 10px);
    text-align:center;
    padding:5px;
}

#navigation ul li {
    display:inline-block;
    list-style:none;
    padding: .25em .5em .25em 0;
}

#navigation ul li a {
    font:1.2em var(--headerfont);
    color:var(--navlink);
    text-decoration:none;
    border-bottom:3px solid var(--navlinkborder);
}

#navigation ul li a:hover, #navigation ul li a:focus {
    color:var(--navlinkhover);
    border-bottom:3px solid var(--navlinkborderhover);
}

#content {
    color:var(--contentcolor);
    padding:40px 20px 20px 20px;
    width:var(100% - 40px);
}

    #content p {
        margin:1em 0 1em 0;
    }
    
    #content h1 {
        border-bottom:1px solid #eab3c8;
        font:1.7em var(--headerfont);
        color:var(--header1);
        margin:0.25em 0 0.25em 0;
    }
    
    #content h2 {
        color:var(--header2);
        font:1.5em var(--headerfont);
        text-transform:lowercase;
        border-bottom:1px solid #ccc;
        margin:1.5em 0 0.25em 0;
    }

    #content h3 {
        font:1.2em var(--headerfont);
        text-transform:lowercase;
        font-style:italic;
        color:var(--header3);
        margin:1.0em 0 0.25em 0;
    }
    
    #content a {
        color:var(--link);
        border-bottom:2px solid var(--linkborder);
    }
    
    #content a:hover {
        color:var(--linkhover);
        text-decoration: line-through;
    }
    
    #content li {
        margin:.5em 0 .5em 1.5em;
        list-style-position:outside;
    }
    
    #content blockquote, #content .box {
        background:var(--boximage) var(--boxbackground);
        color:var(--boxcolor);
        border:1px solid var(--boxborder);
        padding:15px;
    }
    
    #content textarea, #content select, #content button, .styledInput {
        background:var(--formbackground);
        color:var(--formcolor);
        border:1px solid var(--formborder);
        padding:5px;
        margin-top:5px;
        font:1em var(--bodyfont);
    }


#footer {
    text-align:center;
    color:var(--footercolor);
    max-width:100%;
}
    
    #footer a {
        color:var(--footerlink);
    }
    
    #footer a:hover, #footer a:focus {
        color:var(--footerlinkhover);
        text-decoration: line-through;
    }

    #footer p {
        margin:0.5em 0 0.5em 0;
    }

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--contentbackground);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

/* ------------------------------------------- */
/*CUSTOM layout css start*/

/* General Rows and Columns Start */
.row {
  text-align:center;
  margin-top: 20px;
}

/* Two columns side by side */
.column {
  float: left;
  width: 50%;
  margin-bottom: 16px;
  padding: 0px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 700px) {
  .column {
    width: 100%;
    display: block;
  }
}

hr {
    margin: 2em;
    border: 2px dashed;
    border-color: var(--navlinkborder);
}

.scrollWindow {
	height:310px; 
	max-width:90%; 
	overflow:auto; 
	border: solid 2px; 
	border-color: var(--navlinkborderhover); 
	padding: 15px; 
	margin-top: 20px;
}

/* ------------------------------------------- */
/*TCG styling*/
.usedCoupon {
	filter: grayscale(100%);
	opacity: .4;
}

#searchUL li {
  display: inline;
}

#searchUL span li {
  display: inline-block;
  margin: 2px;
}

#myInput {
  background-image: url('img/eyepurple.png'); /* Add a search icon to input */
  background-position: 5px 6px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 60%; /* Percent-width */
  color:var(--formcolor);
  border:1px solid var(--formborder);
  margin-top:5px;
  font:1em var(--bodyfont);
  padding: 12px 20px 12px 50px; /* Add some padding */
  margin-bottom: 12px; /* Add some space below the input */
}

#tradeSettingsBox {
	background:var(--boximage) var(--boxbackground);
	color:var(--boxcolor);
	border:1px solid var(--boxborder);
	padding:3px;
	max-width: 70%;
	text-align: center;
	margin: auto;
}
	
#massContent p {
	text-align: center;
	margin: 2px;
}

.massDeckHeader {
	display: inline;
}

#massContent .box {
	margin: 20px;
}