@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
    background-color: black;
    height: auto;
    text-align: left;
    color: white;
}

/* Container for flexboxes */
section {
    display: -webkit-flex;
    display: flex;
}

/* Style the navigation menu */
/*nav {*/
/*    -webkit-flex: 1;*/
/*    -ms-flex: 1;*/
/*    flex: 1;*/
/*    background: #ccc;*/
/*    padding: 20px;*/
/*}*/

/* Style the content */
article {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: white;
    font-size: 12px;
    align-content: center;
}

/* Style the footer */
/*footer {*/
/*    background-color: #777;*/
/*    padding: 10px;*/
/*    text-align: center;*/
/*    color: white;*/
/*}*/

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each
other instead of next to each other */
@media (max-width: 600px) {
    section {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

table td {
    padding: 3px;
}

.grid-container{
    display: grid;
    background-color: white;
    gap: 2px;
    padding: 20px;
}

.grid-item{
    background-color: white;
    padding: 5px;
}

input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 4px;
}

input:focus{
    background-color: lightblue;
    border: 3px solid black;
}