/* poppins-regular - latin */
@font-face {
  
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/res/fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('/res/fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/res/fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/res/fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/res/fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/res/fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}


@font-face {
    font-family: 'luckiest_guyregular';
    src: url('/res/fonts/luckiestguy-webfont.woff2') format('woff2'),
         url('/media/fonts/luckiestguy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    --highlight:#1380f1;
    --hintergrund:#bfbfbf;
    --menu-hintergrund:#bfbfbf;       
    --menu-schrift:#000000;
    --menu-hintergrunddunkel:#a0a0a0; 
    --menu-hintergrunddunkel2:#909090; 
} 

* {
  box-sizing: border-box;
}

a:visited {
    color:black;
}
a {
    color:black;
    text-decoration: none;
}
a:hover {
    color: var(--highlight);
    text-decoration: none;
}

html {height: 100%}
body {height:98%;
        background-color:#F0F0F0;
}
div.content {
    position:relative;
    min-height: calc(100% - 100px);
    height: auto;
    width: 100%;
         
    margin:0px;
    margin-top:10px;
    margin-bottom:10px;
    font-family: 'Poppins', sans-serif;
    background-color:var(--hintergrund);
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom: 20px;
          
          }
  
.content h1, .content h2 {
    font-family: 'luckiest_guyregular',"Comic Sans MS",sans-serif
}

.content .edit {
    

    content:url('/media/edit.png');
    height:1em;
    margin-left:1em;
   
}

dialog {
   border-width: 10px;
   border-color: var(--highlight);
  
}

dialog::backdrop { 
  background: rgba(0,0,0,0.5); 
}

dialog button {
    background-color: var(--highlight);
    font-size: x-large;
    margin:10px;
}

@media all and (max-width:600px){

    .content h1 {
        font-size:20px;
    }
    
}