/*-------------- General --------------*/

*
{
    box-sizing: border-box;
}

body
{
    background-color: #faf2de;
    font-family:sans-serif;
    margin:0px;
    font-family:"Copperplate";
 }

div
{
    margin-left: auto;
    margin-right: auto;
    background-color: #faf2de;
}

.dark_row
{
    background-color:#806040;
    display:table;
    width:100%;
    max-width:1440px;
    padding-bottom:10px;
}

@font-face
{
    font-family:"Copperplate";
    src:url("Copperplate.ttf") format("truetype");
}

/*-------------- Header --------------*/

div#header_zone
{
    background-color:#806040;
    padding:10px;
    width:100%;
}

.top_row
{
  display:flex;
  background-color:#806040;
  color:#faf2de;
  align-items:center;
  gap:48px;
}

.top_row img
{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:6px;
}

.top_row_title
{
  font-size:2.4em;
  background-color:#806040;
}

.bottom_col_menu
{
    background-color:#806040;
    width:33%;
    float:left;
    padding-top:20px;
}

nav a
{
    margin-right: 15px;
    text-decoration: none;
    background-color:#806040;
    float:left;
}

a.header_link:link, a.header_link:visited
{
    font-size:1.4em;
    color:#faf2de;
    padding:4px;
    margin-right:0.4em;
    margin-left:0.4em;
    margin-top:0.4em;
    text-decoration:none;
    border: 1px dotted #faf2de;
}

a.header_link:hover, a.header_link:active
{
    color:#DEBE8C;
}

img#logo
{
}

.header_col_menu
{
}

/*-------------- Content --------------*/

.container
{
  position:relative;
  z-index:1;
  width: 100%;
  max-width: 1440px;
  max-height: 1200px;
  margin: 0 auto;
  padding: 0;
}

.app_image_cell_mobile
{
    display:none;
}

a.link_to_app:link, a.link_to_app:visited
{
    color:#34664C;
    /*text-decoration:none;*/
}

a.link_to_app:hover, a.link_to_app:active
{
    color:#ffb03b;
}

.app_store
{
	padding-top:10px;
    text-align:center;
}

.app_image_center
{
	padding:20px;
    text-align:center;
}

.controls
{
    display:flex;
    flex-direction:column;
    gap:12px
}

.btn-row
{
    display:flex;
    gap:8px
}

button
{
    appearance:none;
    border:0;
    padding:10px 14px;
    border-radius:10px;
    background:#faf2de;
    color:#806040;
    font-size:1.5em;
    cursor:pointer;
    outline:2px solid transparent
}

button:focus
{
    outline:2px solid rgba(6,182,212,.22)
}


/*-------------- Bottom --------------*/

div#bottom_zone
{
    background-color:#604830;
	width:100%;
    padding-top:20px;
    padding-bottom:10px;
}

a#wiki:link, a#wiki:visited
{
    color:#DFCDAF;
    background-color:#604830;
    /*text-align:left;*/
}

a#wiki:hover, a#wiki:active
{
    color:#DEBE8C;
    background-color:#604830;
}

.bottom_col_menu67L
{
    background-color:#604830;
    color:#faf2de;
    width:67%;
    float:left;
}

.bottom_col_menu33R
{
    background-color:#604830;
    color:#faf2de;
    width:33%;
    float:right;
    text-align:right;
}

.bottom_dark_row
{
    background-color:#604830;
    display:table;
    width:100%;
    max-width:1440px;
    padding-bottom:10px;
}

/*-------------- AdvBottom --------------*/

.image2
{
    width:100%;
    display: block;
    text-align:center;
    background-color:#806040;
}

a.image_link:link
{
    text-decoration:none;
}

div#adv_bottom_zone
{
    background-color:#806040;
    display:flex;
    padding-top:20px;
    color:#DFCDAF;
	width:100%;
    max-width:1440px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    gap:0px;
}

.adv_box
{
    flex:1;
    background-color:#806040;
    padding-bottom:20px;
}

.adv_table
{
    display:table;
    width:75%;
    margin:auto;
    max-width:720px;
}

.adv_table_row
{
    display:table-row;
    max-width:1440px;
    text-align:center;
}

.adv_image_cell
{
    /*display:table-cell;*/
    text-align:center;
    width:100%;
}

.adv_image_cell_mobile
{
    display:none;
}

.adv_text_cell
{
    display:table-cell;
    padding:10px;
    vertical-align:middle;
    text-align:center;
    font-weight:bold;
    font-size:1.4em;
    background-color:#806040;
    color:#DFCDAF;
}

.adv_cell_90
{
	width:100%;
    font-size:1.4em;
    background-color:#806040;
    text-align:center;
    padding:10px;
}

.adv_cell_25
{
    display:table-cell;
	width:25%;
    background-color:#806040;
}

.adv_cell_25_mobile
{
    display:table-cell;
	width:25%;
    background-color:#806040;
}

.adv_text
{
	text-align:left;
	padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
    font-size:1.3em;
    background-color:#806040;
}

a.adv_more_link:link, a.adv_more_link:visited
{
    font-size:0.9em;
    color:#DFCDAF;
    text-decoration:underline;
}

a.adv_more_link:hover, a.adv_more_link:active
{
    color:#DEBE8C;
}

/*-------------- Mobile --------------*/

@media only screen and (max-width:920px)
{
    .top_row { width:100%; text-align:center; gap:24px; }
    .top_row_title { text-align:left; }

    .bottom_col_menu67L { width:100%; text-align:center; }
    .bottom_col_menu33R { width:100%; text-align:center; }

    /*.header_link { font-size:1.0em; }*/

}

@media only screen and (max-width:700px)
{
    div#adv_bottom_zone
    {
        display:inline;
     }

    nav a { width:80%;}
    /*.header_link { margin-right:20px;}*/

    img#logo { width:0px; }

    .adv_cell_25
    {
        display:none;
    }

    .adv_cell_25_mobile
    {
        width:50%;
    }
    
    a.header_link:link, a.header_link:visited
    {
        border:none;
        margin-top:0.3em; 
    }

}

/* End */