/* 
stylesheet for Gerd Zielfleisch Website 2023
Giselle Kroeger

deep red: #781c1f
red: #ab383c
deep blue: #306382
medium blue: #70abc2
light blue: #dfeff2
*/


/****** GENERAL ******/
html {
    font-size: 1em;
}
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}
#wrapper {
    width: 100%;
    min-width: 1280px;
}

/****** FONTS ******/

/****** FOR DESKTOP SCREEN ******/
/****** FOR DESKTOP SCREEN ******/
/****** FOR DESKTOP SCREEN ******/

/****** HEADER ******/
#navMobile {
    display: none;
}
header {
    background-color: #781c1f;
    border: thin solid #781c1f;
    text-align: center;    
}
#navDesktop {
    padding: 1.3rem;
    margin-bottom: 0rem;
}
header a:visited, header a:link {
    color: black;
    text-decoration: none;
}
#navDesktop h1 {
    display: inline;
}
header h1 {
    padding: 0.5rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2rem;
}
#desktopGerdZielfleisch {
    color: white;
}
.headerSubtle {
    color: #ab383c;
    margin: 0;
}

/****** COLUMNS ******/
#leftColumn, #middleColumn, #rightColumn {
    text-align: center;
    background-color: #dfeff2;
    height: 45ex;
    padding: 2em;
    vertical-align: center;
    margin-bottom: 2.5rem;
    float: left;
    width: 30%
}
#leftColumn {
    margin-right: 2.5%;
}
#middleColumn {
    margin-left: 2.5%;
    margin-right: 2.5%;
}
#rightColumn {
    margin-left: 2.5%;
}
hr {
    width: 50%;
    border: none;
    height: 1px;
    background: black;
}

/****** CONTENT ******/
#content {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 2.5rem;
}
#content h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.8rem;
}
#content h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
}
#content p, #content li {
    font-family: 'arial', cursive;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.2rem;
}
#content a:link {
    color: #306382;
}
#content a:visited {
    color: #781c1f;
}
#lastParagraph {
    margin-bottom: 10rem;
}

/****** BALKE ******/
#portraitBalkeMobile {
    display: none;
}
#portraitBalkeDesktop {
    background-color: #70abc2;
    overflow: hidden;
    clear: both;
    position: relative;
}
#portraitInfoDesktop {
    float: left;
    text-align: right;
    margin-left: 25%;
    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#portraitInfoDesktop h2 {
    color: #781c1f;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#portraitInfoDesktop p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#portraitImageDesktop {
    float: right;
    width: 34%;
    margin-left: 6%;
    margin-right: 15%;
}

/****** FOOTER ******/
footer {
    clear: both;
    width: 100%;
    min-width: 1280px;
    padding: 1rem;
    margin-top: 4rem;
    background-color: #306382;
    text-align: center;
    position: fixed;
    bottom: 0;
}
footer p {
    display: inline;
    color: white;
    padding: 0.5rem;
}
footer a:visited, footer a:link {
    color: white;
    text-decoration: none;
}

/****** FOR MOBILE SCREEN ******/
/****** FOR MOBILE SCREEN ******/
/****** FOR MOBILE SCREEN ******/
/* Style rule for screens smaller than 480px */
@media screen and (max-width: 27rem) {
    
    /****** HEADER ******/
    #wrapper {
        width: 100%;
        min-width: 300px;
    }
    header {
        position: relative;
    }
    #navDesktop {
        display: none;
    }
    #navMobile {
        display: block;
        text-align: left;
    }
    #mobileRechtsanwalt {
        color: #ab383c;
        font-size: 1.8rem;
        margin: 0; 
        padding: 1rem 0 0.5rem 1rem;
    }
    #mobileGerdZielfleisch {
        color: white;
        font-size: 2rem;
        margin: 0;
        padding: 0.5rem 0 1rem 1rem;
    }

    /****** HAMBURGER MENU ******/
    #navMobile img {
        position: absolute;
        right: 0;
        top: 0;
        width: 10%;
        margin: 1rem;
    }
    #myLinks {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 80%;
    }
    #myLinks a {
        color: white;
        border: thin solid #264e66;
        background-color: #306382;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 1.5rem;
        display: block;
    }
    
    /****** COLUMNS ******/
    #leftColumn, #middleColumn, #rightColumn {
        text-align: center;
        background-color: #dfeff2;
        height: auto;
        padding: 2em;
        vertical-align: center;
        margin: 0 0 2.5rem 0;
        clear:both;
        width: 100%
    }
    hr {
        width: 50%;
        border: none;
        height: 1px;
        background: black;
    }
    
    /****** CONTENT ******/
    #content {
        margin-left: 5%;
        margin-right: 5%;
    }
    #content h1 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.8rem;
    }
    #content h2 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.2rem;
    }
    #content h3 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.5rem;
    }
    #content p, #content li {
        font-family: 'arial', cursive;
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    #content a:link {
        color: #306382;
    }
    #content a:visited {
        color: #781c1f;
    }
    #lastParagraph {
        margin-bottom: 10rem;
    }
    
    /****** BALKE ******/
    
    #portraitBalkeDesktop {
        display: none;
    }
    #portraitBalkeMobile {
        display: block;
        margin-bottom: 4rem;
    }
    #portraitImageMobile {
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #portraitInfoMobile {
        background-color: #70abc2;
        margin-top: 0;
        padding: 1rem;
        text-align: center;
    }
    #portraitInfoMobile h2 {
        margin: 0 0 0.8rem 0;
        padding: 0;
        color: #781c1f;
    }
    footer {
        display: none;
    }
}