body { background: var(--color-primary-1); }
.header {background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-primary-2)), url('../images/rainbow.jpg') var(--color-primary-2); background-position: 0% 75%; background-size: cover; height: 200px; width: 100%;}
#navbar {background: var(--color-primary-2); margin-top: 0 !important; margin-left: -20px !important;}
.uk-tab > * > a { font-family: 'Simonetta'; font-size: 1.5rem; padding: 5px 50px; }
.uk-tab > .uk-active > a { border-color: var(--color-primary-3) !important; }
#pages  {
    margin-bottom: 64px;
}
@media (orientation: landscape) {
.uk-article {margin: 0 20vw;}
}
@media (orientation: portrait) {
    .uk-article {margin: 0 5vw;}
}
.uk-article-title { font-family: 'Simonetta';}
.uk-text-lead { font-family: 'Lato';}
.uk-article {
    text-align: justify;
    padding-bottom: 32px;
}
p { font-family: 'Lato'; }
@media (orientation: landscape) {
    .contactsSticky {display: flex; justify-content: center; background: linear-gradient(to top, var(--color-primary-2) 50%, rgba(255,255,255,0)); height: 64px; position: fixed; bottom: 0; width: 100%; }
    .contactFull {padding: 32px; font-family: 'Lato'; color: black !important}
    .contactIcons {display: none; }
    .contactFull a {margin: 0 2vw; color: black !important;}
    .contactFull a i {color: var(--color-primary-4) !important;}
}
@media (orientation: portrait) {
    .contactsSticky {display: flex; justify-content: center; background: var(--color-primary-2); height: 8vh; position: fixed; bottom: 0; width: 100%; }
    .contactFull {display: none; }
    .contactIcons {margin-top: 1.5vh; font-size: 5vh;}
    .contactIcons a {margin: 0 8vw; color: var(--color-primary-4) !important;}
}
@media (orientation: landscape) {
    #quote1 {
        position: absolute;
        top: 300px;
        left: 5vw;
        width: 10vw;
        transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -ms-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -webkit-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
    }
    #quote2 {
        position: absolute;
        top: 600px;
        right: 3vw;
        width: 12vw;
        transform:matrix(1.00,0.07,-0.07,1.00,0,0);
        -ms-transform:matrix(1.00,0.07,-0.07,1.00,0,0);
        -webkit-transform:matrix(1.00,0.07,-0.07,1.00,0,0);
    }
    #quote3 {
        position: absolute;
        top: 1000px;
        left: 5vw;
        width: 12vw;
        transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -ms-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -webkit-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
    }
    #quote4 {
        position: absolute;
        top: 500px;
        left: 5vw;
        width: 12vw;
        transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -ms-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
        -webkit-transform:matrix(0.98,-0.17,0.17,0.98,0,0);
    }
    #quote5 {
        position: absolute;
        top: 800px;
        right: 5vw;
        width: 12vw;
        transform:matrix(0.99,-0.10,0.10,0.99,0,0);
        -ms-transform:matrix(0.99,-0.10,0.10,0.99,0,0);
        -webkit-transform:matrix(0.99,-0.10,0.10,0.99,0,0);
    }
    .quote {
        font: 1.5vw 'La Belle Aurore';
        line-height: 120%;
    }
}

.handwriting {
    font: 2rem 'La Belle Aurore';
}
.italic-text {
    font-style: italic;
}

/* Fix for font weight on Chrome. */
* {-webkit-font-smoothing: antialiased;}
.bold-text {
    font-weight: bold;
}
.text-block {
    margin-bottom: 2.5em;
}
.text-and-image {
    display: flex;
}
.text-and-image {
    display: flex;
}
.flex-1 {
    flex: 1;
}
.padding-right {
    padding-right: 32px;
}
.tree {
    width: 100%;
    height: 50vh;
    background-image: url('../images/tree.jpg');
    box-shadow: inset 0px 0px 20px 24px rgba(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -1rem;
}
.book {
    flex: 0.5;
    border-radius: 16px;
    box-shadow: -2px 4px 10px grey;
    margin: 0 24px 24px 0;
    width: 100%;
    background-image: url('../images/candles-candlestick-book-environment.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.profile {
    width: 100%;
    height: 50vh;
    background-image: url('../images/profile.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}

@media (orientation: portrait) {
    .quote {display:none;}
    .tree {display:none}
    .book {display:none}
}