@charset "utf-8";

:root
{
    color-scheme: light;
    --col_orange: rgb(241, 144, 23);
}




body
{
    background-image: url("backgnd.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;

    font-family:Verdana;
    color: #E7E7E7;

}


div#container
{
    min-width: 15em;
    max-width: 68em;

    margin: 0 auto;
}


header, article, footer
{
    box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.2);
    border-color:rgb(0, 0, 0);

    background-color: rgba(0, 0, 0, 0.8);    
    background-image: url("asphalt42.png");
    background-repeat: repeat;
 
    border-width:1px;
    border-style:solid;
    border-color:rgb(0, 0, 0); 
    
}


header
{

    border-radius: 0.4em;
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
    
    color: var(--col_orange);
    
    display: block;
    align-items: center;
 
    padding:0.3em;

    margin:1.0em;
    margin-bottom:0.5em;
    
    font-weight:bold;
    font-size:2.0em;
    
    overflow:hidden;
   
    /* justify-content: space-between; */
}

b
{
	font-weight: bolder;
	color: var(--col_orange);
}

span#orange
{
	color: var(--col_orange);
}


header p
{
    font-size:1.2em;
    font-style:italic;
}

header span#trafficlight
{
    float:right;
    padding-right:0.0em;
}

header img
{
    padding:0.3em;
    padding-right:1.0em;

    max-width: 100%;
    max-height: 2.5em;
}

header span#trafficlight figure
{
    margin: 0em;
}

header span#trafficlight figure a img
{
    padding-right: 0.3em;
	padding-bottom: 0;
}

header span#trafficlight figure figcaption
{
    font-size: 0.33em;
    font-weight: normal;
    color: white;
    text-align: center;
}

article
{
    border-radius: 0em;
    
    margin:1.0em;
    margin-left:2.0em;
    margin-right:2.0em;

    padding-left:1.0em;
    padding-top:1.0em;
    padding-right:1.5em;
    padding-bottom:2.0em;
    
    overflow: auto;
    
    line-height: 1.5em;
}


article img#trafficlight
{
    max-width: 100%;
}

article img#social_icon
{
	height: 1em;
}

article h2, article h3, article h4
{
    color: var(--col_orange);
}

article a:link, a:visited
{
    color: #D0D0FF
}

article a:hover
{
    color: #B0B0FF
}

article table
{
    border-collapse: collapse;
}

article table td
{
    padding: 0.3em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    background-color: rgba(0, 0, 0, 0.5);
    
    border-bottom: 1px solid rgb(64, 64, 64);

}

article table tr td img
{
    vertical-align: sub;
}

article details p img
{
    vertical-align: sub;
}

footer
{
    font-size:2.0em;

    border-radius: 0.4em;
    border-top-left-radius: 0.0em;
    border-top-right-radius: 0.0em;
    
    margin:1.0em;
    margin-top:0.5em;
    
    overflow:hidden;
   
    padding: 0.8em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;

    text-align: center;
}

footer a img
{
    border:0.0em;
    max-height:1.3em;
    
    vertical-align: middle;

    margin: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}


article#sponsor
{
    border-radius: 0.0em;
    
    margin-top:0.5em;
    margin-bottom:0.5em;
    
    overflow:hidden;
   
    padding: 0.8em;

    text-align: center;

}

article#sponsor a img
{
    font-size:2.0em;

    border:0.0em;
    max-height:1.3em;
    
    vertical-align: middle;

    margin: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

article#last
{
    border-radius: 0.8em;
    border-top-left-radius: 0.0em;
    border-top-right-radius: 0.0em;
}

article#news
{
    padding-bottom: 0;
}

details summary
{
    color: var(--col_orange);
    outline:none;
    cursor: pointer;
    
    font-size: 1.5em;
    
    margin-top: 0.2em;
    margin-bottom: 1.0em;
    
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    
}

h1
{
    color: var(--col_orange);
    outline:none;
    cursor: pointer;
    
    display: block;
    font-size: 1.5em;
    
    margin-top: 0.2em;
    margin-bottom: 1.0em;
    
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}


summary::-webkit-details-marker {
  font-size: 1.2em;
}

p#updated {
  font-size: 0.7em;
  text-align: right;
  color: #808080;
}


.titleFoto {
  position: relative; 
}

.titleFotoText {
  position: relative; 
  top: 10px; 
  left: 10px; 
  padding-left: 10px;
  padding-right: 10px;
}




.parent
{
    position: relative;
    text-align: center;
    margin: 0;
}

.textblock
{
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translate(-50%, 0%);
    color: var(--col_orange);
    white-space: nowrap;
    font-size: clamp(0.8em, 4cqw, 2.5em);
    line-height: normal;
    font-style: italic; 
    font-weight: bold;
    text-shadow:
        3px 3px 5px black,
        3px 3px 5px black,
        3px 3px 5px black;
}

.bigger
{
    font-size: 1.7em;
    margin: 0;
}

.parent img
{
    width:100%;
}


ul.catcher
{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-around;
    flex-wrap: wrap;
    
    gap: 1em;
    
    list-style: none;
    margin: 0;
    padding-inline-start: 0.0em;

}

ul.catcher li
{
    text-decoration: none;
    display: block;
    padding: 1em;
    background: black;
    border-style: solid;
    border-color: var(--col_orange);
    border-radius: 0.75em;
    line-height: 1.2em;
}

ul.catcher li a:link, ul.catcher li a:visited
{
    color: var(--col_orange);
    font-weight: bold;
}

ul.catcher li a:hover
{
    color: white;
    font-weight: bold;
}


@media (max-width: 57em){ 

header, article, article#sponsor, footer
{
    margin: 3px;
}

header
{
    margin-left: 0.0em;
    margin-right: 0.0em;
    margin-top: 0.0em;
    text-align: center;
}

article, article#sponsor
{
    margin-left: 0.0em;
    margin-right: 0.0em;
}

footer
{
    margin-left: 0.0em;
    margin-right: 0.0em;
    margin-bottom: 0.0em;
}

header span#trafficlight
{
    float:none;
}

header img
{
    padding:0.0em;
}

header span#trafficlight img
{
    padding-top: 0.5em;
}

article table
{
   font-size:0.8em; 
}

}