p{
  font-family: 'Times', serif;
  font-size: 12pt;
  line-height: 1.4em;
  text-align: center;
  letter-spacing: 0.02em;
}

h1{
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 42px;
    letter-spacing: 0.02em;
    text-align: center;
    color: rgba(128, 0, 128, 0.9);
}

.bandb{
    font-family: 'Rye';
    font-weight: 200;
}

.navfont{

    font-family: 'Cormand Unicase', serif;
    font-weight:400;
}

.kreuz{      
  
  background-image: 
  linear-gradient(90deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%),

  linear-gradient(0deg, 
        transparent 50%, 

        hsla(0, 50%, 0%, .5) 50%),

  linear-gradient(45deg, 
        transparent 50%, 
        rgba(0, 0, 0, 0.5) 50%);
        

background-size: 150px 150px;
}


.tart{
    color: white;
    background-image: repeating-linear-gradient(transparent, transparent 50px, purple 50px, purple 53px, transparent 53px, transparent 63px, purple 63px, purple 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),  
    repeating-linear-gradient(270deg, transparent, transparent 50px, purple 50px, purple 53px, transparent 53px, transparent 63px, purple 63px, purple 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px);        
}

.flanell {
    background-image: 

      repeating-linear-gradient(
        45deg,
        rgb(128, 0, 128),
        rgb(128, 0, 128), 3px,
        transparent 0px,
        transparent 100px
      ),

      repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.8) 100px,
        transparent 0px,
        transparent 200px
      ),

      repeating-linear-gradient(
        -45deg,
        rgb(128, 0, 128),
        rgb(128, 0, 128), 3px,
        transparent 0px,
        transparent 100px
      ),

      repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 100px,
        transparent 0px,
        transparent 200px
      );
  }

  .argyle{
    background-image: 

      repeating-linear-gradient(
        60deg,
        rgb(128, 0, 128),
        rgb(128, 0, 128), 3px,
        transparent 0px,
        transparent 50px
      ),
      repeating-linear-gradient(
        -60deg,
        rgb(128, 0, 128),
        rgb(128, 0, 128), 3px,
        transparent 0px,
        transparent 50px
      ),

      repeating-linear-gradient(
        60deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 50px,
        transparent 0px,
        transparent 200px
      ),

      repeating-linear-gradient(
        -60deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 50px,
        transparent 0px,
        transparent 200px
      );
    }

argyle{
    background-color: #7ea2da;
    background-image:
    linear-gradient(300deg, purple,purple 5px, transparent 5px, transparent 5px),
    linear-gradient(240deg, purple, purple 5px, transparent 5px, transparent 5px),
    linear-gradient(120deg, purple, purple 5px, transparent 5px, transparent 5px),
    linear-gradient(60deg, purple, purple 5px, transparent 5px, transparent 5px),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
    }

.navtop{
    padding: 10px 10px 10px 20px;
    float: right;
    font-size: 16px;
    text-align: center;
    font-family:'Rubik';
    font-weight: bold;
    color: rgba(128, 0, 128, 0.6);
    background-color: transparent;
}

.highland{

    height:140px;
    width:100px;
    background: url('bilder/highd.png');
    margin:auto;
}

.highland:hover{

    cursor: pointer;
    background: url('bilder/highd.gif'); 
}

.ballet{

height:140px;
width:100px;
background: url('bilder/ballet.png');
margin:auto;
}

.ballet:hover{

cursor: pointer;
background: url('bilder/ballet.gif');
}

.square{

height:140px;
width:100px;
background: url('bilder/square.png');
margin:auto;
}

.square:hover{

cursor: pointer;
background: url('bilder/square.gif');
}

.navbottom{
    padding: 10px 10px 10px 20px;
    float: right;
    font-size: 16px;
    text-align: center;
    font-family: 'Rubik';
    font-weight: bold;
    color:white;
    background-color: transparent;    
}

.kp{
    margin: 15px;
    border-radius: 15px;
    padding: 20px 20px 20px 20px;
    width: 100px;
    height: 100px;
    border-style: solid; border-color: purple;
    
}

.srcm{
    margin: 10px;
    padding: 10px;
    width: 40px;
    height: 40px;
}

a.top:link{color:purple;text-decoration-line: none;}
a.top:visited{color:rebeccapurple}

a.bottom:link{color:white;text-decoration-line: none;}
a.bottom:visited{color:grey;}