:root{
    --bg-primary : rgba(248, 249, 250, 0.91);
    --bg-second : rgba(122, 121, 121);
    --text-color: #000a60;
    --primary : blue;
    --second : rgb(179, 179, 0);
    --danger : red;
    --warning: rgba(255, 193, 7, 1);
    --success: green;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1em;
    font-weight: normal;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:var(--text-color);
}

h1,h2,h3,h4,h5{
    font-weight: 600;
}

h1{
    font-size: 1.5em;
    margin: 15px;
}
h2{
    font-size: 1.3em;
    margin: 10px 0;
}
h3{
    font-size: 1.1em;
    margin: 10px 0;
}
h4,h5,h6{
    font-size: 1.1em;
    margin-bottom: 5px;
}

html,
body {
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    background-color: var(--bg-primary);
    display: grid;
    grid-template-areas: 
            "header header header"
            "left content right"
            "footer footer footer";
    grid-template-rows: 5% 80% 15%;
    grid-template-columns: 5% 90% 5%;

}
body>header{
    grid-area: header;
}

main{
    grid-area: content;
    width: 100%;
}

body>footer{
    grid-area:footer;
}


.hiddenModal{
    display:none;
}

#usesTable {
    width: 80%;
    margin: 2rem auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

#usesTable th, #usesTable td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

#usesTable th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

#usesTable tr:hover {
    background-color: #f0f8ff;
    cursor: pointer;
}

#usesTable tr:last-child td {
    border-bottom: none;
}
@media (min-width: 650px) {
    body{
        grid-template-rows: 10% 80% 10%;
        grid-template-columns: 10% 80% 10%;
    }    

}

@media (min-width: 850px) {


}