/* fixed-width layout styling */
.page.fixed-width {
    width: 960px;
    margin: 0 auto;
    background-color: #ffffff;
}
/* Styles for liquid layout */
.page.liquid {
    max-width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}
/* "page" div styling */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
  padding: 16px;
}
/* Styling for content boxes */
.content-box {
  margin: 20px 0;
  padding: 10px;
  border: 2px double #000;
  background-image: url("images/background.jpeg");
}
.my-webpage {
  grid-column: 1/-1;
  grid-row: 1/2;
}
.why-class {
  grid-column: 1/2;
  grid-row: 3/4;
}
.my-work {
  grid-column: 2/3;
  grid-row: 3/4;
}
.fav-sites {
  grid-column: 3/4;
  grid-row: 3/4;
}
.contact {
  grid-column: 1/-1;
  grid-row: 4/5;
}
/* Styling for navigation list */
.nav-list {
  grid-column: 1/-1;
  grid-row: 2/3;
}
.nav-list ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
/* Styling for tables */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border: 2px dashed #000;
  text-align: left;
}
th {
  background-color: #efefef;
}
/* Styling for forms */
input[type="text"], input[type="email"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 2px solid #000;
  border-radius: 4px;
}
input[type="submit"] {
  padding: 10px 20px;
  background-color: #ffb3b3;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
fieldset {
  border: 2px solid #ddd;
  padding: 8px;
  margin-bottom: 20px;
}
body {
  background-color: #ffffff;
  color: black;
  padding: 20px;
  font-family: Arial, Verdana, sans-serif;
}
h1 {
  font-family: Georgia, Times, serif;
  font-size: 200%;
  font-weight: bold;
  top: 0px;
  left: 50px;
  padding: 10px;
  width: 100%;
  background-color: #ffb3b3;
}
h2 {
  font-family: Georgia, Times, serif;
  font-size: 150%;
  font-weight: bold;
}
h3 {
  font-family: Georgia, Times, serif;
  font-size: 120%;
  font-weight: bold;
}
p {
  font-family: Arial, Verdana, sans-serif;
  font-size: 75%;
  line-height: 1.4em;
}
/* unordered list */
ul {
  list-style-type: square;
  background-color: #f4f4f4;
  padding: 20px;
  width: 250px;
  border-radius: 8px;
}
/* ordered list */
ol {
  list-style-type: decimal;
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
}
a:link {
  color: #8B0955;
  text-decoration: none;
}
a:hover {
  color: #8B0955;
  text-decoration: underline;
}
a:visited {
  color: #DC5CA7;
  text-decoration: underline;
}
/* copyright */
p.copy {
  text-decoration: underline;
  text-align: center;
}
/* contact details */
#contact {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
}
img.align-center {
  display: block;
  margin: 0px auto;
}
img.align-left {
  display: block;
  float: left;
  margin-right: 10px;
}
img.align-right {
  float: right;
  margin: 10px;
}
img.portrait {
  width: 225px;
  height: 300px;
}
img.landscape {
  width: 300px;
  height: 225px;
}
header, section, footer, aside, nav, article, figure {
  display: block;
}
@media (max-width: 600px){
.nav-list{
  grid-column: 1/2;
  grid-row: 2;
}
.nav-list ul{
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}
.page {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.my-webpage {
  grid-column: 1/2;
  grid-row: 1;
}
.why-class {
  grid-column: 1/2;
  grid-row: 3;
}
.my-work {
  grid-column: 1/2;
  grid-row: 3;
}
.fav-sites {
  grid-column: 1/2;
  grid-row: 4;
}
.contact {
  grid-column: 1/2;
  grid-row: 5;
}
}