/* COLOURS 
Light Yellow: #F6FEDB
Wheat: #E6D3A3
Golden sand: #D8D174 
Yellow green: #B6C454

Gunmetal: #393E41
Sand Dune: #EAE0CC
Blazing flame: #FC440F
Pacific Blue: #0FA3B1
535663
*/

:root {
    --main-colour: rgb(144, 155, 98);
    --accent-1: #d7e3c0;
    --accent-2: #FC440F;
    --dark-accent: #393E41;
    --text-dark: #13181b;
    --text-light: rgba(234, 224, 204);
}

*, ::before, ::after {
    box-sizing: border-box;
}


body {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: var(--text-dark);
    background-image: url(../images/dark_paper.jpg);
    background-size: cover;
    margin: 0;
}

header {
    margin-top: 0;
}
h1 {
    margin-top: 0;
    font-size: 2rem;
    padding-left: 20px;
}

main {


    > p {
        color: var(--text-light);
        font-size: 1.1rem;
        width: 90%;
        text-align: justify;
        margin: 20px;
}}

hr {
    border-top: 4px dotted var(--text-light);
    background-color: transparent;
    margin: 20px;
}
header {
    background-color: var(--main-colour);
    font-size: 2rem;
}

nav {
    background-color: var(--dark-accent);
    ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
        li a, li {
            color: var(--text-light)
        };
        li a:hover {
            color: var(--accent-2)
        }
    }
}

footer {
    background-color: var(--text-dark);
    display: flex;
    width: 100%;

    ul {
        margin-right: auto;
        display: flex;
        list-style: none;
        li {
            padding: 0 5px;
        }
    }
    img {
        width: 50px;
    }

    p {
        margin-left: auto;
        padding-right: 1rem;
        color: var(--text-light)
    }
}

.topics div {
    background-color: var(--main-colour);
    border-radius: 5px;

    h3 {
        display: inline;
        margin-top: 10px;
        border-bottom: var(--text-light) 3px solid;
    }
}


/* Gallery styling -----------------------------------
--------------------------------------- */
.gallery > div {
    background-color: var(--main-colour);
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
    position: relative;

    img {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    }
    img:hover {opacity: 0.7;}

    h2 {
        margin-bottom: 20px;
        margin-top: 0;
        position: relative;
        z-index: 1;
    }

    .wave {
        stroke: var(--text-light);
        width: 200px;
        position: absolute;
        left: 0;
        top: -3px;
        z-index: -1;
    }

    .images {
        background-color: transparent;
        img {
        padding: 10px;}
    }

    .price {
        display: inline;
        background-color: antiquewhite;
        padding: 8px 30px 8px 10px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .description {
        margin-right: 10px;
    }
}

.gallery > div:nth-child(even), .topics > div:nth-child(odd) {
    background-color: var(--text-light);
    .price {
        background-color: var(--accent-2);
        color: var(--text-light);
    }
    svg {
        stroke: var(--accent-2)
    }

    h3 {
        border-color: var(--accent-2);
    }
}

.gallery img {
    height: 150px;
}

.gallery {
    table {
        border-collapse: collapse;
        border-radius: 5px;
        background-color: var(--text-light);
        font-size: 1rem;
        align-self: center;
        th {
            padding-bottom: 1rem;
        }

        tr:first-of-type > th {
            padding: 1rem;
        }
        th:first-child {
            padding-left: 1rem;
        }
    }

    tr >:first-child {
        text-align: left;
        padding-left: 5px;
    }

    th {
        font-weight: 400;
    }
    
}

.disclaimers {
    margin-left: 1rem;
    padding: 10px;
    background-color: var(--text-light);
    color: var(--text-dark);
    font-size: 1rem;
    height: 90%;
    display: block;
    .aside {
        font-style: italic;
        color: #606568;
        font-size: 0.8em;
    }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  color: var(--text-light);
  text-align: center;
  font-size: 1.5rem;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  max-height: 80vh;
  max-width: 70vw;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}