.debugborder {
    border: 1px solid red !important;
}

.body-bg
{
    background-color: #8EA3A9;
    background-image:  url('./images/Students_BG.jpg');

    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size:cover; 
  
}

.body-bg-me
{
    background-color: #636466;
    background-image:  url('./images/BG_me.jpg');

    background-repeat: no-repeat;
    background-position: 70% 100%;
    background-attachment: fixed;
    background-size:cover; 
  
}

.bg-white-trans {
    background-color: rgba(255, 255, 255, 80%);
}

.bg-green-trans {
    background-color: rgba(177, 218, 22, 90%);
}

.bg-black-trans {
    background-color: rgba(0, 0, 0, 50%);
}

.bg-black-trans-2 {
    background-color: rgba(0, 0, 0, 55%);
}


.bg-me-trans {
    background-color: rgba(81, 85, 90, 80%);
}

.me-img{
    border: 5px solid white;
    width: 100%;
    max-width: 100%;
}

@font-face {
    font-family: RobotoLocal;
    src: url(./fonts/RobotoSlab-Regular.ttf);
}

@font-face {
    font-family: KalamLocal;
    src: url(./fonts/Kalam-Regular.ttf);
}
.main-font {
    font-family: RobotoLocal, serif;
}

.hand-font {
    font-family: KalamLocal, cursive;
}

.font-emphasis
{
    text-transform: uppercase;
}

.emphasis-green
{
    text-decoration: underline rgba(177, 218, 22, 90%);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
}

.dotted
{
    text-decoration: underline rgba(177, 218, 22, 90%);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.1em;
}

.text-me
{
    color: #F5E9CD;
}

.large-h1 {
    font-size: 3.0rem;
}

.medium {
    font-size: 2.0rem;
}

.very-big-icon
{
    font-size: 8rem;

}

/* TODO this SASS generieren? */

.mt-10 {
    margin-top: 6rem !important;
}

.mt-20 {
    margin-top: 12rem !important;
}

.pt-coffee-nein {
    padding-top: 12rem;
}

.pt-boxing-ja{
    padding-top: 4rem;
}

.pt-coffee-question {
    padding-top: 8rem;
}

.space {
    height: 4em !important;
    display: block;
    background-color: white;
}

.coffee-bg {
    background-image: url('./images/Barrista_cropped.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.boxing-bg {
    background-image: url('./images/Boxer_cropped.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.extra-large-nein {
    font-size: 10.0rem;
    line-height: 10rem;
    color: white;
}

@media (max-width: 600px) {
    .extra-large-nein {
        font-size: 6.0rem;
        line-height: 6rem;
        color: white;
    }
}

.white-text
{
    color: white;
}

.bg-arrows {
    background-image: url('./images/noun_directions_160920_modified.svg');
    background-repeat: no-repeat;
    width: 12rem;
    height: 12rem;
}

.arrows-offset {
    top: 0%;
    right: 10%;
    transform: translate(-50%, -70%) !important;
    z-index: -1;
}


.bg-seedling {
    background-image: url('./images/seedling-solid_fontawesome_green.svg');
    background-repeat: no-repeat;
    width: 10rem;
    height: 10rem;
}

.seedling-offset {
    top: 0%;
    left: 45%;
    transform: translate(-50%, -70%) !important;
    z-index: -1;
}


.bullet-size {
    width: 2.0rem;
}

.rocket
{
    width: 4rem;
}

.plain-h2 {
    font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
    .plain-h2 {
        font-size: 2rem;
    }
}

.close-btn-position
{
    top: 0.5rem;
    right: 0.5rem;
}

.seedling-size
{
    width: 1.5rem;
}

.modal-body
{
    margin-top: 1rem;
}

.smaller
{
    font-size: 0.8rem;
    line-height: 0.8rem;
}