@font-face {
    font-family: "bleepfont";
    src: url("/static/Bleepfont2-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "bleepfont-bold";
    src: url("/static/Bleepfont2-bold.ttf");
    font-weight: 700;
}


* {
  margin: 0;
  padding: 0;
  color: black;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
    color: white;
}

h2{
   font-family: bleepfont-bold;
   font-size: 1.5em;
}

ul{
    list-style-type: none;
}

#spacer{
    height: 6em;
}

html{

}

body{
    position: relative;
    height: 100%;
    background-color: white;
    font-family: Helvetica, Arial, Sans-Serif;
}

.bleepfont{
    font-family: "bleepfont", serif;
}

.mediumfont{
    font-size: 1.5em;
}

.largefont{
    font-size: 2.5em;
}

.boldfont{
    font-family: "bleepfont-bold", serif;
}

main{
    padding-left: 10vw;
    padding-right: 10vw;
    position: relative;
    margin-top: -5px;
}

.extrasides{
    padding-left: 10vw;
    padding-right: 10vw;
}

nav{
    position: fixed;
    top: 0;
    width: calc(100% - 2em);
    padding:0.3em 1em;
    z-index: 50;
}

.light-link{
    color: white !important;
}

.light-link:hover{
    filter: invert(1) drop-shadow(0px 0px 5px white);
}

canvas[resize]{
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /*background-color: rgba(1,0,0,0.5)*/
}

img{
    max-width: 100%;
}

li{
    margin-left: 3em;
}

.bottomDist{
    margin-bottom: 3em
}

.bottomDistLong{
    margin-bottom: 6em
}

.shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.glass{
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.7); 
}

.roundcorner{
    border-radius: 1em;
}

.colorbackground{
    background-color: cadetblue;
}

.darkbackground{
    background-color: #262626;
    color: white;
}

.halfsize{
    width: calc(50% - 4em);
    display: inline-block;
    margin: 1.5em;
    flex-basis: 700px;
}

.minisize{
    max-width: max(9vw, 9vh);
}

.miniheight{
    height: min(5vh, 5vw);
}

.center{
    margin: 0 auto;
}

.relpos{
    position: relative;
}

.abspos{
    position: absolute;
}

.covertext-top{
    top: -1.3em;
}

.covertext-bottom{
    bottom: -1.3em;
    right: 0;
}

.covertext-left{
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotate(-90deg) translate(-100%, -1.3em);
}

.covertext-right{
    transform: rotate(90deg);
    bottom: 1.3em;
    right: 0;
    transform-origin: 100% 100%;
    
}

.linktext-shop{
    bottom: 20%;
    left: 30%;
}

.linktext-right{
    top: 10%;
    left: 90%;
}

.linktext-centerright{
    top: max(10vw, 10vh);
    left: 100%;
}

.linktext-centerleft{
    top: max(10vw, 10vh);
    right: 100%;
}

.linktext-centerleft a:hover:before{
    content: "←" !important; /* FontAwesome Unicode */
}

.linktext{
    z-index: 10;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    padding-right: 1em !important;
}

.offset{
    transform: translate(0, -50%);
}

.largeoffset{
    transform: translate(0, -150%);
}

.row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

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

#titleimage{
    width: 100%;
    height: 20em;
    object-fit: cover;
}

.schnipsel{
    position: relative;
    z-index: 10;
}

.invisible{
    display: none;
}

.flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.decoImage{
    position: relative;
    top: 0;
    left: 0;
    transition: ease 0.2s;
  
}

section:hover .drawLine{
    stroke-dashoffset: 0 !important;
    pointer-events: none;
    cursor: default;
}

ul:hover .thickenBorder{
    stroke-width: 5px !important;
}

.thickenBorder{
    transition: stroke-width 0.6s;
}

.youtube svg{
    pointer-events: none;
}

svg:hover .imageShadow{
    stroke-dashoffset: 1000 !important;
    opacity: 1 !important;
}

.imageShadow{
    transition: stroke-dashoffset 30s, opacity 0.6s;
}

.drawLine{
    transition: stroke-dashoffset 1s;
}

.drawbox{
    padding: 2em;
}

#impressum{
    color: grey;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.blocktext{
    /*font-size: 1.5em;*/
}

.blocktext a{
    color: black;
    background-color: #c7c7c7;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
}

.blocktext li{
     margin-bottom: 0.3em;
}
 	
 	
.blocktext li:hover:before {
  content: "→"; /* FontAwesome Unicode */
  font-family: bleepfont-bold;
}

.blocktext li:before {
  content: "●"; /* FontAwesome Unicode */
  font-family: bleepfont-bold;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

.blocktext a:hover{
    color: white;
    background-color: #262626;
}

.linktext a{
    color: black;
}

.linktext a:hover:before{
    content: "→"; /* FontAwesome Unicode */
    font-family: bleepfont-bold;
    display: inline-block;
    margin-left: -1.3em; /* same as padding-left set on li */
    width: 1.3em; /* same as padding-left set on li */
}

#socialicons{
    float: right;
    height: 1em;
}

#socialicons img{
    height: 100%;
}

.popUp{
    animation: expand 3s ease-in-out forwards;
}


@keyframes expand {

  to{
     stroke-dashoffset:0;
    }
}