58 lines
1.1 KiB
CSS
58 lines
1.1 KiB
CSS
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
|
}
|
|
p.image {
|
|
text-align: center;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
background-color: dodgerblue;
|
|
}
|
|
.container div {
|
|
background-color:#f1f1f1;
|
|
margin: 10px;
|
|
padding: 20px;
|
|
font-size: 30px;
|
|
color: black;
|
|
flex: 1 1 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
body {
|
|
background-color: steelblue;
|
|
color: white;
|
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
|
}
|
|
.container div {
|
|
flex: 1 1 calc(50% - 40px);
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
body {
|
|
background-color: darkblue;
|
|
color: white;
|
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
|
}
|
|
p {
|
|
column-count: 2;
|
|
column-gap: 2rem;
|
|
}
|
|
p.dotted {
|
|
column-gap: 2rem;
|
|
column-rule: 5px dotted black;
|
|
outline-style: dotted;
|
|
}
|
|
.container div {
|
|
flex: 1 1 calc(25% - 20px);
|
|
}
|
|
|
|
}
|
|
|