@charset "utf-8";
/* CSS Document */



.basic-grid {
    display: grid;
    margin:5px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .card {
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     background-color:black;
     font-size:3rem;
     color:white;
     height:40px;
     width:100px;
     border-radius:4px;
     transition:all 500ms;
     overflow:hidden;
     background-size:cover;
     background-position:center;
     background-repeat:no-repeat;
 }




.column-layout {
 max-width:1300px;
 margin:40px auto 0 auto;
 line-height:1.65;
 background-color:grey;
 padding:20px 50px;
 display:flex;
}

.main-column {
    flex:3;
    order:2;
}

.sidebar {
    flex:1;
    order:1;
}

.sidebar-a {
    flex:1;
    order:3;
}

.equal-boxa {
    flex:1;
    order:1;
    border-color:black;
    border-width:3px;
}
.equal-boxb {
    flex:1;
    order:2;
    border-color:black;
    border-width:3px;
}
.equal-boxc {
    flex:1;
    order:3;
    border-color:black;
    border-width:3px;
}

table {
    border-collapse:collapse;
}

table.center {
    margin-left:auto;
    margin-right:auto;
}

nav td {
    background-color:black;
    width:100px;
    height:40px;
    font-size:24px;
    color:white;
    text-align:center;
    border:1px solid grey;
    border-radius:15px;
}

nav tr {
    margin: 30px auto;
}

tr a {
    color:white;
    text-decoration:none;
}

ul.nav1 {
    margin-left:30px;
}

li.nav1 {
     background-color:black;
    width:100px;
    height:100px;
    font-size:10px;
    color:white;
    text-align:center;
    border:1px solid grey;
    border-radius:15px;
}

li a {
    color:white;
    text-decoration:none;
}

li a:hover {
    color:grey;
}

.column {
    max-width:900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color:yellow;
}

.column-first {
    background-color:grey;
    flex:1;
    color:blue;
}

.column-second {
    background-color:pink;
    flex:1;
    color:green;
}

.column-third {
    background-color:cyan;
    fleX:1;
    color:red;
}