a h2{
        width: 100%;
        text-align:center;
        border: white solid 3px;
        border-radius: 15px;
        flex-wrap:wrap;
        color:white;

    }

    .card-catalog { 
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* The default is nowrap additionally the value wrap-reverse */
        max-width: 100vw;
        /* vw and its sibling vh units are proportional units to the viewport.
            This is like 100% width but specific to the viewport size and not the calculated size of the parent.
        */  
        padding: 0em;
    }

    .card-catalog h2{
        width: 100%;
        text-align:center;
        border: white solid 3px;
        border-radius: 15px;
        flex-wrap:wrap;
        color: white;

    }

    .card {
        border: black solid 3px;
        border-radius: 15px;
        flex: 1 100px;
        /*
            The value without a unit is how much of the proportional area an item should take.
            Note lower in the CSS for the highlight CSS rule we give a much larger value, and thus more of the available space.
            */
        display: grid;  /* This is CSS grid. Using it for the visual appearance of the cards. */
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        margin: 0.5em;

        background-image: var(--u);
        background-repeat:no-repeat;
        background-size: cover;
        align-items: center;
        background-position: center;

        height: 60vh; 
    }

    .card-thumbnail{
         border: black solid 3px;
        border-radius: 15px;
        flex: 1 300px;
        /*
            The value without a unit is how much of the proportional area an item should take.
            Note lower in the CSS for the highlight CSS rule we give a much larger value, and thus more of the available space.
            */
        display: grid;  /* This is CSS grid. Using it for the visual appearance of the cards. */
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        margin: 0.5em;

        background-image: var(--u);
        background-repeat:no-repeat;
        background-size:cover;
        background-position: center;
        align-items: center;

        height: 80vh; 
    }

    .card > h3, .card-thumbnail > h3 {
        grid-row: 3;
        text-align: center;
        margin: 1em;
        text-decoration-line: underline;
        color: black;
        padding: 5px;
        background-color: white;
        border-radius: 15px;

    }



    .book-catalog { 
        max-width: 100vw;

        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* The default is nowrap additionally the value wrap-reverse */
        /* min-width: 100vw; */
        /* vw and its sibling vh units are proportional units to the viewport.
            This is like 100% width but specific to the viewport size and not the calculated size of the parent.
        */  
        padding: 0em;
    }

    .book-catalog h2{
        width: 100%;
        text-align:center;
        border: white solid 3px;
        border-radius: 15px;
        flex-wrap:wrap;
        color: white;

    }

    .book {
        /* border: black solid 3px;
        border-radius: 15px; */
        width: 100%;
        /*
            The value without a unit is how much of the proportional area an item should take.
            Note lower in the CSS for the highlight CSS rule we give a much larger value, and thus more of the available space.
            */
        display: grid;  /* This is CSS grid. Using it for the visual appearance of the cards. */
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 3fr;
        margin: 0.5em;    

        height: 50vh; 
        row-gap: 50px;
    }

    .book > .book-card{
        background-image: var(--u);
        background-repeat:no-repeat;
        background-size: cover;
        background-position: center;
        align-items: center;
        grid-column: 0;
        border: black solid 3px;
        border-radius: 15px; 
    }

    .book > .book-info{
        /* grid-column: 1; */
        align-items:flex-start
    }

    label{
    margin-left: 1em;
    }

    #color
    {
    /* margin: 1em; */
    font-weight:bold;

    }


    /* The rest of the styles are just for adjusting the look of the other elements. Feel free to read, but not explained. */
    body {
    font-size: 14pt;
    }

    p, nav, section {
    padding: 0 1em;
    
    }

    p{color:white;}

    h1 {
        color:white;
    }
    section#main{
        border: white solid 3px;
        border-radius: 15px;
        color:white;
        /* display:flex; */
        /* justify-content:left; */
    }

    section.contact{
        border: white solid 3px;
        border-radius: 15px;
        color:white;
    }

    section#banner{
        background-image: url("/Assets/BanniereTwitterAC_Final.png");
        /* border: black solid 3px; */
        /* border-radius: 15px; */
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        background-size: 100%;
        background-repeat:no-repeat;
        padding-top:5%;
    }
    section#banner ul
    {
        list-style: none;
        text-align: right;
        padding: 0;
        margin: 10;   

    }

    section#banner a
    {
        background-color: white;
        padding:10px;

        border: black solid 3px;
        border-radius: 15px;
      
    }

    section#banner li{
        display: inline-block;

    }

    p {
    line-height: 1.5em;
    /* text-align: justify; */
    }




    #color{
    margin-top: 1em;
    }
    
    h1 {
        font-size: 30pt;
        text-align:center; 
    }

    h2{
        text-align:left; 
    }


    input{
        width: 100%; 
        padding: 10px;
        /* width: 100%; */
        margin: 10px;
        box-sizing: border-box;
        font-size: 20pt;
        border-width: thick;
        border-color: black;
        border-style: solid;
        border-radius: 15px;


    }

    textarea{
        width: 100%; /* Full width */
        padding: 10px;
        margin: 10px;
        box-sizing: border-box;
        font-size: 3vw;
        border-width: thick;
        border-color: black;
        border-style: solid;
        border-radius:15px;


    }

 


    

    nav{    
        width: 150px;
        float: left;
        display: flex;
        margin-right: 10px;
        border: black solid 3px;
        border-radius: 15px;
    }

    nav ul 
    {
        list-style: none;
        padding: 0;
        margin: 10px;

    }


    footer{
        font-size: 0.8rem;
        color:white;
        /* position:fixed; */
        bottom:0;
    }
    
    /*
    This demo is not about this, but this is how to modify your design for light mode or in this case, dark mode.
    */
    body {
        color: black;
        background-color: #813;
    }

    a {
        color: white;
    }
/* 
    a:visited {
        color: mediumpurple;
    } */

    .card {
        border-color: #333;
    }

    .highlight {
        background-color: #333;
    }

    *:focus { 
        outline: 5px #ffffff solid;
        outline-offset: 0;
        box-shadow: 0 0 0 10px #000000;          
    } 




@media (max-width: 600px){
    .card {
        max-width: 1200px;

        /* margin: 0 auto; */
        display: grid;
        height: 40vh; 

        /* gap: 1rem; */
    }

    .card-thumbnail {
        max-width: 1200px;

        /* margin: 0 auto; */
        display: grid;
        height: 40vh; 
        flex: 1 100px;


        /* gap: 1rem; */
    }

    body {
    font-size: 20px !important;
    }

}