@media (max-width: 600px){
        .card {
        max-width: 1200px;
        /* margin: 0 auto; */
        display: grid;
        /* gap: 1rem; */
    }

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

}
    

    #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.
        */  
    }

    .card {
    border: black solid 3px;
    border-radius: 15px;
    flex: 1 150px;
    /*
        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;
    }

    .card > h3 {
    grid-row: 2;
    margin: 1em;
    text-decoration-line: underline;
    }



    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;
    
    }
    section#contactSection
    {
        padding: 0;
        width: 100%;
    }



    section#main{
        border: black solid 3px;
        border-radius: 15px;
        display:flex;
        justify-content:left;
    }

    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:center; 
    }


    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;


    }



    

    [data-theme="dark"] {

    body {
        color: white;
        background-color: black;
    }

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

    .card {
        border-color: #949393;
    }

    .highlight {
        background-color: #333;
    }

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


    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;
        position:fixed;
        bottom:0;
    }
    

    [data-theme="light"]  {
    /*
    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: #eb9493;
    }

    section , nav
    {
        background-color: #fbfbad;
    }

    a {
        color: black;
    }
/* 
    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;  
} 


    }