@font-face {
    font-family: 'Just Another Hand';
    src: url('../fonts/Calligraph/Naissanmixed-Regular.woff2') format('woff2'),
         url('../fonts/Calligraph/Naissanmixed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Naissan2';
    src: url('../fonts/Calligraph/Naissan2-Regular.woff2') format('woff2'),
         url('../fonts/Calligraph/Naissan2-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

p{ 
    font-family: 'Just Another Hand';
    text-align: justify;
    color:white;
    text-align: center;
    letter-spacing: -0.05em;
}

.name{
    font-family: 'Naissan2';
}

.headline{
    letter-spacing: -0.05em;
    font-size: 100vw;
    font-family: 'Naissan2';
}

#myText{
    color:rgb(255,244,152);
}

a{
    color: chocolate;
    text-decoration: none;
}

/*portrait style as default*/
#imgAlone{
    position:fixed;
    z-index: 13;
    left: 50%;
    transform: translate(-50%);
    height: 100lvh;
    width: auto;
    bottom: 0px;
}
#imgAloneTOP{
    display:block;
    height: 100lvh;
    width: auto;
}
#overlayWrapper{
    top:45vh;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
}
#overlay{
    left: 50%;
    transform: translate(-50%);
    width: 90%;
}

/*@media (width > height) {/*orientation: landscape does not work for safari and width > height either*//*
    #imgAlone{
        position:fixed;
        z-index: 13;
        top: 50%;
        transform: translate(0,-50%);
        width: 100%;
        height:auto;
        left:0;
        content: url('../images/aktuell/wolke-landscape-02.jpg');
    }
    #imgAloneTOP{
        display:none;
    }
    #overlayWrapper{
        top:0;
        left:35%;
        width:65%;
        transform: none;
    }
    #overlay{
        width: 95%;
        transform: none;
        left:0;
    }
  }

  @media (width <= height) {/*orientation: portrait does not work for safari*//*
    #imgAlone{
        position:fixed;
        z-index: 13;
        left: 50%;
        transform: translate(-50%);
        height: 100%;
        width: auto;
        content: url('../images/aktuell/yoga-wolke-5-ohneschrifft2.jpg');
    }
    #imgAloneTOP{
        display:block;
        height: 100%;
        width: auto;
    }
    #overlayWrapper{
        top:45vh;
        left: 50%;
        transform: translate(-50%);
        width: 90%;
    }
    #overlay{
        left: 50%;
        transform: translate(-50%);
        width: 90%;
    }
  }