/* Stop mobile browsers from making text too big */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* LETS OVERRIDE PICO CSS RULES */
/* Removes PICO vertical block spacing for making more compact views */
:root {
    --pico-block-spacing-vertical: 5px;
}
/* Resets inter-browser inconsistencies */
h1 {
    margin-block: 0;
}
nav ul:first-of-type {
    padding-inline-start: 0;
}
header nav ul:last-of-type, header nav ol:last-of-type {
    margin-right: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
nav {
    height: 80px;
}
nav li {
    padding-top: 0;
    padding-bottom: 0;
    text-align: -webkit-center;
}
.LandGrid .picture.menu-2 img,
.LandGrid .picture.menu-3 img,
.LandGrid .picture.menu-4 img,
.LandGrid .picture.menu-5 img {
    transition: filter 0.2s ease;
}

.LandGrid .picture.menu-2 img:hover,
.LandGrid .picture.menu-3 img:hover,
.LandGrid .picture.menu-4 img:hover,
.LandGrid .picture.menu-5 img:hover {
    filter: brightness(1.3);
}
.container {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* My CSS Rules for my template */
/* Sticky footer */
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}
/* end of sticky footer */
/* For calendar sizing */
.calendar {
    height: 50vh;
}
/* For my own logo */
.icon {
    display: block;
    width: 70px;
    height: 100%;
}
.FA {
    display: inline-block;
    width: 1rem;
    vertical-align: -0.125em;
}

/* For my template */
.lyrics-translation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.lyrics-translation > div {
    text-align: left;
}
.image-half img {
    width: 50%;
}
blockquote {
    font-family: "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
}
/* For Landing Mobile */
.LandGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.picture {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}
.yo {
    grid-column: 1 / -1;
    justify-self: center;
}
.menu-2 {
    grid-column: 1;
}
.menu-3 {
    grid-column: 2;
}
.menu-4 {
    grid-column: 3;
}
.menu-5 {
    grid-column: 4;
}
/* Iframe validation fixing for calendar */

iframe {
    width: 100%;
    height: 90%;
    overflow: hidden;
}

/* For tablet-desktop views */
@media (min-width: 768px) {
    .lyrics-translation {
        grid-template-columns: 1fr 1fr;
    }
    .lyrics-translation > div:first-child {
        text-align: right;
    }
    .lyrics-translation > div:last-child {
        text-align: left;
    }
    /* Landing Desktop and Tablet */
    .LandGrid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(2, auto);
    }
    .yo {
        grid-column: 1 / span 4;
        grid-row: 1 / span 2;
        justify-self: center;
        align-self: center;
    }
    .menu-2 {
        grid-column: auto;
        /* grid-row: 1; */
    }
    .menu-3 {
        grid-column: auto;
        /* grid-row: 2; */
    }
    .menu-4 {
        grid-column: auto;
        /* grid-row: 3; */
    }
    .menu-5 {
        grid-column: auto;
        /* grid-row: 4; */
    }
}
/* RECOMMENDED for LARGE SCREENS */
@media (min-width: 1024px) {
    
}
@media (orientation: landscape) and (max-height: 440px) {
    nav {
        height: 40px;
    }
    .icon {
        display: block;
        width: 3em;
    }
    article {
        height: 100px;
    }
    /* this was particularly hard to understand */
    h1:not([class]) {
        margin-block: 0;
    }
    p {
        display: none;
    }
    footer {
        display: none;
    }
}