body{
	background-color: grey;
}

header{
	text-align: center;
}

.container {
display: grid;
grid-template-columns: repeat(1, 1fr);
}

.container2 {
max-width: 1024px;
min-width: 768px;
margin: 0 auto;
background-color: skyblue;
}

.box {
background-color: skyblue;
padding: 20px;
}

.transformed-box {
max-width: 1024px;
min-width: 768px;
margin: 0 auto;
padding: 10px;
background-color: lightgreen;
}

.column {
flex: 1;
margin: 10px;
padding: 10px;
background-color: peachpuff;
}

.column:nth-child(1) {
background-color: green;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid white;
padding: 5px;
font-size: 14px;
}

th {
background-color: teal;
color: white;
}
		
.navbar {
list-style-type: none;
width: 200px;
background-color: #333;
height: 45vh;
}

.navbar li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: green;
}

.navbar li a:visited {
background-color: red;
}

@media (max-width: 768px) {
.box {
background-color: lightcoral;
}
}

@media (min-width: 769px) {
.box {
background-color: lightgreen;
}
}

@media (max-width: 768px) {
.transformed-box {
background-color: lightcoral;
}
}

@media (min-width: 769px) {
.transformed-box {
background-color: lightgreen;
}
}