html, body {
    height: 100%;
}

body {
    background-color: #fbf8ef;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

* {
    box-sizing: border-box;
}

/* ovarall style including header, footer */
.page {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    background: url("kj_img/kjMagnif.jpeg") repeat;
    background-size: 15px 15px;
}

header {
    background-color: #881f1f;
    color: #fbf8ef;
    font-size: 1.4em;
    }

.header_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 10px;
    padding: 10px;
    margin:  0 10px 0 0;
}
    header .icon > img {
        border-radius: 10px;
        margin: 5% 0 0 0;
    }

    header .headline {
        grid-column: 2 / span4;
        align-content: center;
        text-align: center;
        font-size: 1.8em;
        padding: 10px 15px 5px 0;
    }

    header .link {
        border-radius: 10px;
        font-size: 0.9em;
        background-color: #fbf8ef;
        padding: 6px;
        text-align: center;
        align-content: center;
    }

        header .link > a {
            text-decoration: none;
            color: #881f1f;
            cursor: pointer;
        }

            header .link:hover  {
                background-color: black;

            }
                header .link a:hover {
                     color: #fbf8ef;
                }

main > div {
        color: #881f1f;
        text-align: center;
        padding: 5px;
        font-size: 1.5em;
    }

.intro {
    grid-column: 1/4;
}

.antje {
    background-color: #d26262;
    font-size: 1.2em;
    border-radius: 10px;
}

.travel {
    background-color: #75a661;
    font-size: 1.2em;
    border-radius: 10px;
}


.mark {
    background-color: #6d86bd;
    font-size: 1.2em;
    border-radius: 10px;
}

.explain {
    display: none;
}

/*home page style */

#homepage {
    display: grid;
    padding: unset;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 1fr 1fr 1fr;
    grid-gap: 20px;
    padding: 5px;
    border: 2px;
}
#antjebg {
    background: url("kj_img/AntjeTint.jpeg") no-repeat center;
    background-size: cover;
}

#markbg {
    background: url("kj_img/MarkTint.jpeg") no-repeat center;
    background-size: cover;
}

#travelbg {
    background: url("kj_img/MATint.jpeg") no-repeat top;
    background-size: cover;
}

/*Today We Learned /What's Newest Box on homepage */
#twl {
    display:inline-block;
    background-color: #C0C0C0;
    border: solid 2px;
    border-color: #881f1f;
    padding: 5px;
    border-radius: 10px;
    margin: 15px 0 0 0
}

    #twl > a {
        text-decoration: none;
        color: black;
        font-weight: bold;
    }
    #twl:hover {
        color: #fbf8ef;
    }

    #twl > a:hover {
        color: #fbf8ef;
    }

.holiday {
    background-color: #006600;
    margin:  15px 0 5px 0;
    padding: 15px 0 15px 0;
}
    .holiday:hover {
      color: #fbf8ef;
    }

    .holiday > a {
      text-decoration: none;
      color: black;
      font-weight: bold;
    }

    .holiday > a:hover {
      color: #fbf8ef;
    }
/* 3 columns on homepage */
.column {
    grid-column: 1 / span3;
    border: solid 2px;
    border-color: #881f1f;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    margin:0 10px 0 0;
}

    .box {
        display: block;
        border: solid 2px;
        border-radius: 10px;
        font-size: 1.5em;
        background-color: #881f1f;
        cursor: pointer;
        width: 210px;
        text-align: center;
        margin: 15px auto 15px auto;
    }
        .box > a {
            text-decoration: none;
            font-weight: bold;
            font-size: 0.8em;
            color: #fbf8ef;
        }

            .box >a:hover {
                background-color: black;
            }

            .box > img {
                max-width:100%;
                height:auto;
                border: solid 2px;
                border-radius: 10px;
                margin:5px 0 0 0;
            }

/* Travel page style: auto grid*/

.travel_grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 10px;
}

    .travel_grid > div {
        padding: 20px 0;
        border: solid 2px #881f1f;
        border-radius: 10px;
        opacity: 1.0;
    }

        .travel_grid > div a {
            text-decoration: none;
            font-weight: bold;
            font-size: 0.8em;
            cursor: pointer;
            color: white;
        }

        .travel_grid > div:hover {
            background-color: #75a661;
            opacity: 0.7;
        }

    .travel_grid .grid-item2025be {
        background: url("/kj_img/kjTravel_img/2025germany.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2024de {
        background: url("/kj_img/kjTravel_img/2024germany.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2024rt {
        background: url("/kj_img/kjTravel_img/2024midwest.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2023ec {
        background: url("/kj_img/kjTravel_img/2023Boston.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2022de {
        background: url("/kj_img/kjTravel_img/2022germany.jpeg") no-repeat top;
        background-size: cover;    }

    .travel_grid .grid-item2022rt {
        background: url("/kj_img/kjTravel_img/2022RoadTrip.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2021 {
        background: url("/kj_img/kjTravel_img/furstTower.jpeg") no-repeat top;
        background-size: cover;
    }


    .travel_grid .grid-item1 {
        background: url("/kj_img/kjTravel_img/FlorenceSmall.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item2 {
        background: url("/kj_img/kjTravel_img/salzburg_2018.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item3 {
        background: url("/kj_img/kjTravel_img/coloradoRuins2017.jpg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item4 {
        background: url("/kj_img/kjTravel_img/hawaii2017.jpg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item5 {
        background: url("/kj_img/kjTravel_img/Munich2016.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item6 {
        background: url("/kj_img/kjTravel_img/Maine2015.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item7 {
        background: url("/kj_img/kjTravel_img/Yellowstone2014.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item8 {
        background: url("/kj_img/kjTravel_img/Kiel2014.jpg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item9 {
        background: url("/kj_img/kjTravel_img/Lakeland2013.jpg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item10 {
        background: url("/kj_img/kjTravel_img/GrandCanyon2012.jpg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item11 {
        background: url("/kj_img/kjTravel_img/Boltenhagen_2012.jpeg") no-repeat top;
        background-size: cover;
    }

    .travel_grid .grid-item12 {
        background: url("/kj_img/kjTravel_img/Madagascar2016.jpg") no-repeat top;
        background-size: cover;
        font-size:0.6em;
        color: white;
        font-weight: bold;
    }

/*Antje Page style auto grid*/
.antje_grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-content: space-evenly;
    grid-gap: 10px;
}

    .antje_grid > div {
        text-align: center;
        vertical-align: bottom;
        font-size: 1.2em;
        border: solid 2px #881f1f;
        border-radius: 10px;
        padding: 2% 0 2% 0;
        background-color: #fbf8ef;
    }

        .antje_grid > div a {
            text-decoration: none;
            font-weight: bold;
            font-size: 0.8em;
            color: #881f1f;
        }

        .antje_grid > div:hover {
            background-color: #d26262;
        }

            .antje_grid >div a:hover {
                color:black;
            }

        .antje_grid > div img {
            max-width:90%;
            height:auto;
            border-radius: 10px;
        }

/*Mark Page style -- his grid method, not mine; ties to a page I didn't design */
.gridX10 {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.grid-1x1 {
    grid-area: auto / auto/ span 1 / span 1;
    background-color: #E0E0E0;
    padding: 15px 32px;
    border-radius: 10px;
    border: solid 2px;
    width: 100%;
    text-decoration: none;
}

.grid-2x1 {
    grid-area: auto / auto / span 1 / span 2;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: solid 2px;
}

.grid-1x2 {
    grid-area: auto / auto / span 2 / span 1;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: solid 2px;
}

.grid-2x2 {
    grid-area: auto / auto / span 2 / span 2;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: solid 2px;
}

 .buttonX {
    color: #881f1f;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
 }

    .buttonX:hover {
        color: black;
        background-color: #6d86bd;
    }

/*About Page style*/

#aboutimage {
    display: inline-block;
    float: left;
    margin: 0 10px 0 10px;
    border: solid 2px #881f1f;
    border-radius: 10px;
    padding: 5px;
}

.about {
    display: inline-block;
    text-align: justify;
    padding: 5px 10px 5px 10px;
    margin: 5px 5px 0 5px;
    font-size: 0.8em;
    color: #881f1f;
}

    .about:first-line {
        color: #881f1f;
        font-style:italic;
        font-weight: bold;
        font-size:0.8em;
    }

    .about > a {
        display:none;
    }

/*  Note: first paragraph on about page -- larger font, accommodates image */
.start {
    display: inline-block;
    text-align: justify;
    padding: 5px 10px 5px 5px;
    font-size: 0.8em;
    clear: left;
    margin: 5px 0 0 5px;
}

    .start p:first-line {
        color: #881f1f;
        font-style: italic;
        font-weight: bold;
        font-size: 1em;
    }

    .start > p a {
        display:none;
    }

    .more {
        display:none;
    }

.larger {
    font-size: 1.0em;
}
    .larger:first-line {
        font-size: 1em;
    }

.biography h3 {
    background-color: #d26262;
    color: #fbf8ef;
    padding: 0 5px 0 15px;
    border-radius:5px;
}

    .biography p {
        text-align: justify;
        padding:0 5px 0 5px;
    }

    .biography a {
        color: #881f1f;
        font-weight: bold;
    }

        .biography a:hover {
            background-color: #881f1f;
            color: #fbf8ef;
        }

/*Footer*/

footer {
    grid-row-start:3;
    grid-row-end: 4;
    background-color: #881f1f;
    color: #fbf8ef;
    margin: 0 0 0 0;
}

.email {
    display: inline-block;
    float: right;
    padding: 20px;
}

    .email > a {
        text-decoration: none !important;
        border-radius: 10px;
        color: #881f1f;
        background-color: #fbf8ef;
        border-color: #881f1f;
        border: solid 2px;
        padding: 10px;
    }

#copyright {
    padding: 0 0 0 20px;
}

/*Media Queries 768 px and up*/

@media only screen and (min-width: 768px) {
    .header_grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }

    header .headline {
        grid-column: 2 / span 2;
        font-size: 1.4em;
        font-weight: bold;
    }

    header .link {
        font-size:1em;
        margin-top: 70px;
    }

/*3 columns on home page*/
    .column {
        grid-column: initial;
        grid-template-rows: auto 1fr;
        border: solid 2px;
        border-color: #881f1f;
        border-radius: 10px;
    }

        .column img {
            max-width: 100%;
            height: auto;
            border: solid 2px;
            border-radius: 10px;
            margin: 5px 0 0 0;
        }

/*show hidden extra text once i-pad size is reached */
    .explain {
        display: block;
        text-align: center;
        padding: 5px 5px 10px 5px;
        margin: 2px;
        font-size: 0.7em;
    }

/* travel page grid: 4 columns*/
    .travel_grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

/* Antje page grid: 5 columns*/
    .antje_grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

/*Mark's grid -- wants to play with having more flexible sizes -- do not grade, not my work*/
    .gridX10 {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
        }

 /*about page*/

    .start > p {
        font-size: 1.2em;
    }

    .start > p a {
        display: inline;
        color: black;
        font-style: italic;
        text-decoration: none;
    }

        .start > p a:hover {
            background-color: #881f1f;
            color: #fbf8ef;
        }

     .about > a {
         display: inline;
         color: black;
         font-style: italic;
         text-decoration: none;
     }

         .about > a:hover {
             background-color: #881f1f;
             color: #fbf8ef;
         }

    .more {
        display:block;
        text-align: justify;
        padding: 5px 10px 5px 10px;
        margin: 10px;
        font-size: 0.6em;
    }

        .more > h3 {
            background-color: #881f1f;
            color: #fbf8ef;
            border-radius: 5px;
            padding: 0 0 0 15px;
        }

/*more of Mark's system for larger screen sizes*/
        @media only screen and (min-width: 1024px) {
            .gridX10 {
                grid-template-columns: repeat(6, 1fr);
            }

            @media only screen and (min-width: 1500px) {
                .gridX10 {
                    grid-template-columns: repeat(8, 1fr);
                }

                @media only screen and (min-width: 2000px) {
                    .gridX10 {
                        grid-template-columns: repeat(10, 1fr);

                    }
                /*Antje's grid at 2000px and more for large monitor*/
                    .antje_grid {
                        grid-template-columns: repeat(10, 1fr);
                    }
                }
            }
        }
    }