@font-face {
    font-family: 'Open Sans';
    src: url("/font/OpenSans/OpenSans-Regular.ttf");
}

:root {
    --main-bg-color: #000;
    --main-font-color: #fff;
    --input-bg-color: #fff;
    --meta-bg-color: #101010;
    --meta-padding: 0.95rem;
    --article-padding: 0.4rem;
    --article-margin: 0.3rem;
    --meta-link-padding: 0.3rem;
    --meta-link-margin: 0.2rem;
}

.widget_search, .widget_archive, .widget_recent_comments, .widget_recent_entries, .widget_categories {
    display: none;
}

.ah:hover {
  color: #000;
}

 #ana-container {
  padding-left: 10px;
  padding-right: 20px;
}

.social-icons {
  padding: 10px;
  margin: var(--article-margin) !important;
}

.social-icons a:link  {
  margin: var(--article-margin) !important;
}

.ana {
  padding: 10px;
  border-left:2px solid #000000;
  border-bottom:2px solid #000000;
  background-color: #ffffff;
  color:#000;
  word-break: break-word;
}

.ana a:link, .ana a:visited {
  padding: 0px;
  margin: 0px;
  display: block;
  background-color: transparent;
  color:#000 !important;
  border: 0px;
}

.ana-title a:link, .ana-title a:visited {
  font-size: 10pt;
  padding: 5px;
  margin: 2px;
  background-color: transparent;
  color:#000;
  border: 0px;
}

.ana-text a:link, .ana-text a:visited {
  font-size: 9pt;
  padding: 5px;
  color:#000;
  margin: 2px;
}

html, body {
    padding:0;
    margin:0;
    height:100%;
    font-family: 'Open Sans', sans-serif;
    background: var(--main-bg-color);
    color: var(--main-font-color);
}

.comments {
    margin-top:3rem;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.meta {
    padding:1rem;
    background: var(--meta-bg-color);
    margin-bottom:0.6rem;
}

.meta h1 a:link {
  background: var(--meta-bg-color);
}

.meta p, .meta span {
    padding: var(--article-padding);
    margin: var(--article-margin) !important;
}

.meta a:link {
    padding: var(--meta-link-padding);
    margin: var(--meta-link-margin) !important;
    background: var(--main-bg-color);
    display: inline-block;
}

#site {
    z-index:0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    padding:0.5rem;
    font-size: 10pt;
    display: grid;
    grid-template-areas: "aside"
                         "main";
}

#site a:link, #site a:focus, #site a:active, #site a:visited {
    color: var(--main-font-color);
    text-decoration: none;
    margin:0;
}

#wrapper a:link, #wrapper a:focus, #wrapper a:active, #wrapper a:visited {
  color: var(--main-font-color);
}

#site a:hover {
    opacity:0.6;
}

aside {
    list-style: none;
    grid-area: aside;
    font-size: 12pt;
}

aside h2 {
    display: none;
}

.pagination li span {
  display: block;
  float:left;
}

aside li, .pagination li {
    list-style: none;
    margin:0;
}

aside li a, .pagination li a {
    padding: var(--article-padding);
    margin: var(--article-margin) !important;
    background: #888;
    display: block;
    float:left;
}

main {
    grid-area: main;
    padding: 1.25rem;
}

table {
  display: block;
  max-width: 85vw;
  margin: 1em 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

table thead, table tbody, table thead tr, table th {
  display: block;
}

table thead {
  float: left;
}

table tbody {
  width: auto;
  position: relative;
  overflow-x: auto;
}

table td, table th {
  padding: 10px;
  border-bottom: 1px dashed #ccc;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.5em;
}

table th {
  text-align: left;
  border-bottom: 1px dashed #ccc;
}

table tbody tr {
  display: table-cell;
}

table tbody td {
  display: block;
  white-space: nowrap;
}

table tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 50em) {

  table {
    display: table;
  }
  
  table thead {
    display: table-header-group;
    float: none;
  }
  
  table tbody {
    display: table-row-group;
  }
  
  table thead tr, table tbody tr {
    display: table-row;
  }
  
  table th, table tbody td {
    display: table-cell;
  }
  
  table td, table th {
    width: auto;
  }
  
}

#wrapper {
    padding: 0.5rem;
    margin: 0.5rem;
    display:block;
    clear:both;
    z-index:1;
}

#pic {
    width:0px;
    height:0px;
}

.adressbox {
    padding: var(--meta-padding);
    background: var(--meta-bg-color);
    margin:0.625rem;
}

#icons {
    position: relative;
    margin-top:100px;
    margin-right: var(--meta-padding);
    padding-top: var(--meta-padding);
    padding-right: var(--meta-padding);
}

a:link, a:focus, a:active, a:visited {
    position: relative;
    color:#000;
    text-decoration: none;
    margin:0.625rem;
}

article p a:link {
  border-bottom: 1pt dashed #ccc;

}

a:hover {
    opacity:0.7;
}

#wrapper h2 {
    font-size: 25pt;
}

#wrapper h2 a:link, #wrapper h2 a:focus, #wrapper h2 a:active, #wrapper h2 a:visited, #wrapper h2 a:hover {
    margin:0px;
    color:#fff;
    opacity:1;
}

.visible {
    position: relative;
    float: left;
    margin-top:-30px;
    margin-left:-20px;
    font-size: 15pt;
    overflow: hidden;
    height: 40px;
    opacity: 0.7;
}
#wrapper ul {
    margin-top: 0;
    text-align: left;
    list-style: none;
    animation: 6s linear 0s normal none infinite change;
    -webkit-animation: 6s linear 0s normal none infinite change;
    -moz-animation: 6s linear 0s normal none infinite change;
    -o-animation: 6s linear 0s normal none infinite change;
}
#wrapper ul li {
    line-height: 40px;
    margin: 0;
}
.text {
    float : left;
    margin-left : 0.625rem;
    line-height : 60px;
}
img {
    border : 0;
}
article img {
    margin: var(--article-margin) !important;
}

#card {
    padding: 1rem;
    margin: 1rem;
}

.comment, .mastodon-comment {
    text-align: left;
    border-left:2px solid #000000;
    border-bottom:2px solid #000000;
    background-color: #ffffff;
    color:#000;
    padding: var(--meta-padding);
    margin: 1rem;
    opacity: 0.8;
    max-width: 95%;
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}
.comment:hover, .mastodon-comment:hover {
    opacity: 1.0;
}

.mastodon-comment a:link, .mastodon-comment a:visited {
  color:#000 !important;
}

.link {
  color:#fff !important;
}

.mastodon-comment {
  display: flex;
  flex-direction: column;
}

.mastodon-comment .author {
  display: flex;
}

.mastodon-comment .author .details {
  margin: 10px;
  padding: 10px;
}

.mastodon-comment .author .date {
  margin-left: auto !important;
  font-size: small;
}

.mastodon-comment .author a:link, .mastodon-comment .author a:visited, .mastodon-comment .status a:link {
  text-decoration: none;
  border-bottom: 0px;
  color:#000;
}

.mastodon-comment .content {
  padding: 5px;
}

.mastodon-comment .status {
  display: block;
}

.mastodon-comment .status > div {
  display: inline-block;
  margin-right: 15px;
}

#submit {
    cursor: pointer;
    color: var(--input-bg-color);
    background-color: var(--main-bg-color);
    padding: 0.5rem;
    font-size: 12px;
    border:1px solid var(--input-bg-color);
    margin: 0.2rem;
}

textarea, input {
    border:1px solid var(--main-bg-color);
    color: var(--main-bg-color);
    max-width:100%;
    background: var(--input-bg-color);
    padding: 0.5rem;
    font-size: 12px;
    margin: 0.2rem;
    opacity: 0.8;
}

textarea:hover, input:hover {
    opacity: 1.0;
}

.mobile_hidden {
  display: none;
}

@media screen and (min-width: 900px) {

    .mobile_hidden {
      display: inherit;
    }

    .widget_search, .widget_archive, .widget_recent_comments, .widget_recent_entries, .widget_categories {
        display: list-item;
    }

    aside {
        font-size: inherit;
        padding: 0.6rem;
    }

    aside h2 {
        display: inherit;
        clear: both;
        padding-top: 0.5rem;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    #site {
        grid-template-columns: 3fr 1fr;
        grid-template-areas: "main aside";
        padding:2.75rem;
    }

    #wrapper {
        padding: 0;
        margin: 0;
        height:100%;
        table-layout: fixed;
        /* background: #171630; */
        
        background: linear-gradient(178deg, #006c97, #009788, #212045);
        background-size: 600% 600%;
    
        -webkit-animation: bg 19s ease infinite;
        -moz-animation: bg 19s ease infinite;
        animation: bg 19s ease infinite;
      }

      @-webkit-keyframes bg {
        0%{background-position:59% 0%}
        50%{background-position:42% 100%}
        100%{background-position:59% 0%}
    }
    @-moz-keyframes bg {
        0%{background-position:59% 0%}
        50%{background-position:42% 100%}
        100%{background-position:59% 0%}
    }
    @keyframes bg {
        0%{background-position:59% 0%}
        50%{background-position:42% 100%}
        100%{background-position:59% 0%}
    }


	#pic {
	   position: absolute;
	   left: 0;
	   bottom:0;
	   padding:0;
	   margin:0;
	   width: 521px;
	   height: 479px;
	   background-image:url("/me_bw.png");
	   background-repeat:no-repeat;
	   background-position:bottom bottom;
	   z-index:1;
	}

  #wrapper-content:hover ~ #pic {
    background-image:url("/me.png");
    background-repeat:no-repeat;
    background-position:bottom bottom;
    transition: background 2s;
  }

	.adressbox {
	  width:30%;
	  float:right;
	}

  #card {
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: 465px;
    padding-top: 68px;
  }

	content {
    position: absolute;
    z-index:10;
	  height: 450px;
	  bottom:0;
	  padding:0;
	  margin:0;
	  z-index:10;
	}

}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}