/* style.css */

* {
    box-sizing: border-box;
}

body {

    margin: 10px auto;
    max-width: 60em;
    /*max-width: 80%;*/
    display: grid;
    grid-template-areas: "head" "main" "foot";

    font-family: "Calibri", serif;
}


header,
main,
footer {

    border-radius: 10px 0.5em 0.5em;
    border: 8px solid;

    padding: 10px;
    margin: 10px;
}

header {

    grid-area: head;
    grid-column: 1 / -1;
    grid-row: 1 / 2;

    border-color: #e87928;

    background-color: darkgreen;
    color: #e87928;

    text-align: justify;
}

main {
    display: block;
    /*padding: 10px;*/
    border-color: #e87928;
    background-color: floralwhite;
}

footer {

    grid-area: foot;
    grid-column: 1 / -1;
    grid-row: 3 / 4;

    color: #e87928;
    border-color: #e87928;
    background-color: darkgreen;
    color: #e87928;

    text-align: right;

    padding-top: 1.0vw;
    padding-bottom: 1.0vw;
}

footer p {
    margin-left: 2.8vw
}


h1,
h2,
h3 {
    margin-left: 2.8vw;
}


/* top navigation bar */

.top-nav {

    text-align: left margin: 0;
    padding: 0;
}



.top-nav li {

    display: inline;
    font-size: .85em;
    margin-left: 2em;
}


.top-nav li:first-child {
    margin-left: 0
}


a.top-nav-link:hover {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border: 2px solid;
    border-color: #e87928;

    padding: .5em;
    margin: 0px;
}



.top-nav li a {

    text-decoration: none;
    text-align: left
}



/* unvisited link */

a:link {
    color: black;
}

/* visited link */

a:visited {
    color: black;
}

/* mouse over link */

a:hover {
    color: black;
}

/* selected link */

a:active {
    color: black;
}



a:hover {
    text-decoration: underline;
    color: #e87928;
}

a:active {
    text-decoration: underline;
}


/* Orang-Utan photo and serch field container */

.grid-container-img-and-search {
    margin-top: 4.3vw;
    margin-bottom: 4.3vw
}

/* Create two unequal columns that floats next to each other */

.column {

    float: left;
}


.column.left {

    width: 30%;
}

img {

    display: flow-root;

    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 60%;

    /*border-radius: 10px 0.5em 0.5em;
    border: 4px solid;
    border-color: #e87928;*/
}

img.img-tree {
    width: 30%;
    border-radius: 10px 0.5em 0.5em;
    border: 4px solid;
    border-color: #e87928;
}


.column.right {

    width: 70%;


}

.show-text {
    padding-left: 10vw;
}

.search-field {

    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
}

/* Clear floats after the columns */

.grid-container-img-and-search:after {

    content: "";
    display: table;
    clear: both;
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .column.left,
    .column.right {
        width: 100%;
    }

    img {

        display: block;
        width: 30%;

        border-radius: 10px 0.5em 0.5em;
        border: 4px solid;
        border-color: #e87928;
    }
}

.tooltip {
    /*position: absolut;*/
    display: inline-block;

}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: floralwhite;
    color: #e87928;
    text-align: center;
    border-radius: 4px;
    padding: 3px 0;
    position: relative;
    z-index: 1;
    bottom: 50%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;


}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.legal-text {
    margin-right: 30%;
    margin-left: 2.8vw;
}

@media screen and (max-width: 481px) {

    .legal-text {
        text-align: justify;
        margin-right: 2.8vw;
    }
}