* { box-sizing: border-box; margin: 0; padding: 0; } body {  font-family: Verdana, sans-serif;  color: #666;  background-color: #f4f4f4;  line-height: 7vw; letter-spacing: 0.4vw; font-size: 4vw; display: grid; grid-template-columns: 1fr; grid-template-areas: 'header' 'main' 'random' 'utility-bar' 'footer'; gap: 5vw; } p { text-align: justify; padding: 5vw 0 5vw 0; } h1,h2,h3 { color: #000000;  line-height: 1.8; margin-top: 4vw; letter-spacing: 0.8vw; } a { color: #007bff;  } a:hover { text-decoration: none;  } input[type="submit"] { font-weight: bold; letter-spacing: 0.2vw; } input[type="text"], input[type="email"], input[type="url"], textarea, input[type="submit"] { text-align: center; padding: 3vw; width: 82%; margin-bottom: 2vw; }  .elastic-image { max-width: 500px !important;  width: 100%; } .center { text-align: center; } .justify { text-align: justify; } .text-spacing-break { display: block; margin-top: 5vw; }  .label { display: block; } .reach-out-image { border-radius: 5vw; }  .header { grid-area: header; background-color: #222;  color: rgba(255, 255, 255, 0.4);  } .menu { background-color: #222;  display: none; position: absolute; right: 0; width: 100vw; } .menu-link { color: white;  display: block; padding: 4vw 0 4vw 5vw; } .menu-icon { color: white;  display: block; font-size: 30px; cursor: pointer; } .menu.active { display: block; } .menu-link-current { text-decoration: none;  font-size: 6vw;  } .mobile-header { background-color: #222;  display: flex; justify-content: center; align-items: center; padding: 0 0 0 4vw; height: 16vw; } .mobile-header { text-align: center; width: 100%; } .mobile-header img { width: 277px; height: 30px; } .desktop-header { display: none; }  .form { text-align: center; background: chocolate;  color: white;  margin: 0 auto; padding: 2vw 0 8vw 0; border-radius: 2vw; width: 87% }  .main { grid-area: main; }  .hero-content-box { background-color: #fff;  box-shadow: 0 0.8vw 3vw rgba(0, 0, 0, 0.1);  border: 0.3vw solid #ddd; border-radius: 3vw; padding: 3vw 6vw 3vw 6vw; margin: 1vw 6vw 7vw 6vw; } .hero-content-box a { font-weight: bold;  } .post-archives { display: grid; grid-template-columns: 1fr;  gap: 5vw; padding: 0 5vw 0 5vw; } .post-archives-column { border: 0.3vw solid #ddd;  box-shadow: 0 0.6vw 3vw rgba(0, 0, 0, 0.1);  border-radius: 3vw; background-color: #fff; padding: 6vw; } .post-archives-column img { border-radius: 10vw; margin: 2vw 0 2vw 0; } .post-archives-post-title { display: block; font-weight: bold; font-size: 5vw; }  .post-tags ul, .post-archives-post-tags ul { list-style: none; margin: 4vw; } .post-tags li, .post-archives-post-tags li { display: inline-block; margin: 4vw; } .tell-your-friends ul { list-style: none; } .tell-your-friends li { margin-bottom: 4vw; }  .meta-info ul { list-style: none; } .meta-info li { display: inline-block; margin: 4vw; } .post { border: 0.1vw solid #ddd; box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1); border-radius: 3vw; margin: 0 5vw 5vw 5vw; background-color: #fff; padding: 1.5vw 1.5vw 6vw 1.5vw; } .post-content { width: 80%; margin: 0 auto; } .post img { display: inline-block; border-radius: 1vw; margin: 5vw 0 5vw 0; width: 86%; } .pagination a { color: #151515;  } .pagination ul { justify-content: center; list-style: none; display: flex; flex-wrap: wrap; gap: 12vw; font-size: 8vw; line-height: 16vw; padding: 8vw; }  .utility-bar { grid-area: utility-bar; background-color: #fff; border: 0.3vw solid #ddd;  box-shadow: 0 0.6vw 3vw rgba(0, 0, 0, 0.1);  border-radius: 3vw; margin: 0 6vw 0 6vw; } .horizontal-utility-bar-container { display: flex; gap: 2vw; padding: 2vw 2vw 10vw 2vw; } .horizontal-utility-bar-column-img { flex: 1; } .horizontal-utility-bar-column-text { flex: 3; } .horizontal-utility-bar-column-img img { border-radius: 5vw; } .utility-bar-post-title { display: block; font-size: 4vw; line-height: 6vw; padding-bottom: 3vw; }  .tag-cloud { list-style: none; justify-content: center; display: flex; flex-wrap: wrap; gap: 8vw; padding: 4vw; } .tag-cloud li a { background-color: #f0f0f0;  color: #222;  transition: background-color 0.2s ease, color 0.2s ease;  display: inline-block; text-decoration: none; padding: 2vw 4vw; font-size: 4vw; border-radius: 2vw; border: 1vw solid #ccc;  } .tag-cloud li a:hover { background-color: #222;  color: #fff;  }  .random { grid-area: random; }  .random-posts { display: grid; grid-template-columns: 1fr;  gap: 5vw; padding: 5vw; } .random-posts-column { border: 0.3vw solid #ddd;  box-shadow: 0 0.6vw 3vw rgba(0, 0, 0, 0.1);  border-radius: 3vw; background-color: #fff; text-align: center; padding: 6vw; } .random-posts-column img { border-radius: 10vw; margin-bottom: 3vw; } .random-posts-post-title { display: block; font-weight: bold; font-size: 5vw; margin-bottom: 5vw; }  .random-post-tags ul { list-style: none; margin: 4vw; } .random-post-tags li { display: inline-block; margin: 4vw; }  .footer { grid-area: footer; display: grid; grid-template-columns: 1fr;  gap: 10vw; padding: 10vw; background-color: #222;  color: rgba(255, 255, 255, 0.4);  } .footer a { color: white;  } .footer-social-pages a { display: flex; margin-top: 10vw; } .footer ul { list-style: none; } .footer h3 { color:white;  } .breadcrumb { padding: 0 4vw 0 4vw; display: inline-block; margin-bottom: 5vw; }  @media (min-width: 601px) and (max-width: 1200px) {  body { line-height: 5vw; letter-spacing: 0.3vw; font-size: 3vw; gap: 3vw; } h1, h2, h3 { line-height: 1.2; margin-top: 2vw; letter-spacing: 0.5vw; } p { padding: 3vw 0 3vw 0; }  .elastic-image { max-width: 900px !important;  }  .mobile-header { height: 12vw; } .menu-link { padding: 2vw 0 2vw 5vw; }  .post-tags li, .post-archives-post-tags li { margin: 2vw; } .meta-info li { margin: 2vw; } .pagination ul { gap: 8vw; font-size: 5vw; line-height: 9vw; padding: 5vw; }  .random-post-tags li { margin: 2vw; }  .tag-cloud li a { padding: 1vw 2vw; font-size: 2vw; border-radius: 1vw; } .tag-cloud { gap: 4vw; padding: 2vw; }  .footer-social-pages a { margin-top: 5vw; } }  @media (min-width: 1201px) {  body { line-height: 2vw; letter-spacing: 0.1vw; font-size: 1.2vw; gap: 2vw; grid-template-columns: 2fr 1fr; grid-template-areas: 'header header' 'main utility-bar' 'random random' 'footer footer'; } p { padding: 1vw 0 1vw 0; } h1,h2,h3 { line-height: 2.0; margin-top: 0vw; letter-spacing: 0.2vw; } input[type="text"], input[type="email"], input[type="url"], textarea, input[type="submit"] { padding: 0.8vw; width: 72%; }  .elastic-image { max-width: 1100px !important;  } .text-spacing-break { margin-top: 2vw; } .reach-out-image{ border-radius: 5vw; }   .header { height: 15vw; padding: 1.5vw 0 1vw 0; margin-bottom: 1vw; } .desktop-header { text-align: center; display: block; } .desktop-header { padding: 1.2vw 0 1vw 0; } .desktop-header img { width: 30vw; height: 4vw; } .mobile-header { display: none; } .menu { list-style-type: none; display: flex; justify-content: center; margin: 0; padding: 0 0 1.5vw 0; } .menu-link { padding: 0 1.5vw 0 1.5vw; } .menu-icon { display: none; } .menu-link-current { font-size: 1.5vw;  }   .meta-info li { padding: 0 2vw 0 0; margin: 0; } .post { border: 0.1vw solid #ddd; box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1); border-radius: 1vw; margin: 0 0 0 2vw; padding: 1.5vw 1.5vw 3vw 1.5vw; } .post img { border-radius: 1vw; margin: 2vw; width: 80%;  }  .post-tags ul, .post-archives-post-tags ul { margin: 2vw; } .post-tags li, .post-archives-post-tags li { padding: 0 2vw 0 0; margin: 0; } .tell-your-friends li { margin-bottom: 1vw; }  .post-archives { grid-template-columns: 1fr; gap: 2vw; padding: 0vw 0 0 2vw; } .post-archives-column { border: 0.1vw solid #ddd;  box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1);  border-radius: 1vw; padding: 2vw; } .post-archives-column img { box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1);  border-radius: 5vw; } .post-archives-post-title { font-size: 1.5vw; } .hero-content-box { box-shadow: 0 0.2vw 0.8vw rgba(0, 0, 0, 0.1);  border: 0.1vw solid #ddd;  border-radius: 0.8vw; padding: 1vw 2vw 1vw 2vw; margin: 0 0 2vw 2vw; } .pagination ul { gap: 4vw; font-size: 2vw; line-height: 4vw; padding: 2vw; }  .form { padding: 1vw 0 1vw 0; border-radius: 1vw; width: 60% }  .utility-bar { border: 0.1vw solid #ddd; box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1); border-radius: 1vw; margin: 0 2vw 0 0; height: 180vw; padding: 1.5vw 0 0 0; } .horizontal-utility-bar-container { gap: 1vw; padding: 1vw 1vw 3vw 1vw; } .horizontal-utility-bar-column-img img { border-radius: 1vw; } .utility-bar-post-title { font-size: 1.5vw; line-height: 2.5vw; padding-bottom: 1vw; }  .tag-cloud { padding: 2vw; gap: 2vw; } .tag-cloud li a { padding: 0.5vw 1vw; font-size: 1vw; border-radius: 0.5vw; border: 0.5vw solid #ccc; }   .random-posts { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2vw; padding: 2vw 2vw 0 2vw; } .random-posts-column { border: 0.1vw solid #ddd;  box-shadow: 0 0.2vw 1vw rgba(0, 0, 0, 0.1);  border-radius: 1vw; padding: 2vw; } .random-posts-column img { border-radius: 5vw; margin: 2vw 0 1vw 0; } .random-posts-post-title { font-size: 1.3vw; margin-bottom: 1.2vw; }  .random-post-tags ul { margin: 2vw; } .random-post-tags li { padding: 0 2vw 0 0; margin: 0; }   .footer { grid-template-columns: 1fr 1fr 1fr; gap: 4vw; padding: 3vw; } .footer-social-pages a { margin: 1vw 0 1vw 0; line-height: 2; } .footer-content-box { grid-column: span 3; } .breadcrumb { padding: 0; margin-bottom: 0; } }