@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* ===============================
   COLORS
=================================*/

.text-primary {
  color: #4a4a4a;
}
.text-secondary {
  color: #7f7f77;
}
.bg-primary {
  background-color: #f2efe8;
}
.bg-secondary {
  background-color: #e6e4e1;
}

/* ===============================
   BASE
=================================*/

body {
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.6;
}

h2, h1 {
  font-family: Merriweather;
}

h1 {
  font-size: 1.5rem;      
  font-weight: 300;   
  letter-spacing: 0.05em;    
  white-space: nowrap;  
}

img {
  width: 100%;
  border-radius: 0.5%;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover, 
input:hover, 
.social-list a:hover {
  color: #7f7f77; 
}

/* ===============================
   LAYOUT
=================================*/

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin: 0 10%;
}

.merits-container{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin: 0 10%;
}

/* ===============================
   COMPONENTS
=================================*/

/* Artwork (base + modifiers) */
.artwork {
  margin: 0 2%;
}

.artwork img {
  object-fit: cover;
  height: 100%;
}

.artwork--split {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.artwork--full img {
  margin-bottom: 20px;
}

/* Merits */
.merits-title {
  color: #4a4a4a;
  margin: 5% 15% 0 ;
}

.merits-list { 
  margin-top: 3%;
  margin-left: 3%;
}

.merits-list time, 
p time {
  color: #4a4a4a;
}

/* Forms */
form {
   max-width: 400px;
   padding: 3rem;
   margin: 10% 5% 0;
   border: 1px solid #d4c7b0;
   border-radius: 1rem;
   text-align: center;
}

input {
  font-size: 1rem;
  color: inherit;
}

input[type="email"],
input[type="name"] {
  width: 80%;
  padding: 0.5em;
  border: none;
  border-bottom: 1px dashed #a97455; 
  background: transparent;
  outline: none;
  font-size: 1rem;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: #a97455;
}

input[type="submit"] {
  background: #a97455;
  color: #fff;
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 0.5rem;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: #8c5c33;
  color: #7f7f77; 
}

/* News Feed */
.news-feed{
  max-height: 25rem;
  overflow-y: auto;
  padding-right: 0.5em;
}

/* Navigation */

ul {
  list-style: none;   
}

.nav-list{
  font-size: 1rem;
  display: flex;            
  flex-direction: column; 
  margin: 0% 15% 0;
  padding-bottom: 3%;
  color: #4a4a4a;
}

.nav-border {
  margin: 15% 15% 0;
  border-bottom: 1.0px solid;
 
}

.svg-arrow {
  display: flex;  
  justify-content: space-between;
  margin: 5% 10% 0;
}

.svg-arrow img {
  width: 3em;
  margin-left: -3em;
}

/* Social */
.social-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-list a {
  font-size: 1.8rem;
  color: #4a4a4a;
}

/* Dates */
.title-time time {
  font-size: 1.2rem;
  font-weight: 400; 
  color: #7f7f77;
  font-family: Nunito Sans;
}

/* Articles */
article {
  max-width: 800px;
  margin-left: 5%;
}

/* Footer */
footer {
  margin: 0% 0% 10%
}

/* ===============================
   EFFECTS
=================================*/

main img:hover{
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* ===============================
   MEDIA QUERIES
=================================*/

/* Tablet */
@media screen and (min-width: 768px), (max-width: 1023px) and (orientation: landscape) {
  .nav-list {
    font-size: 1.1rem;  
    flex-direction: row; 
    justify-content: space-between;
  }

  .svg-arrow img {
  width: 3.5em;
}
  
  .grid-container, .artwork--split {
  grid-template-columns: repeat(2, 1fr);
}

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

form {
   margin: 7% 5% 0;
}

}

/* Desktop */
@media (min-width: 1024px) {
  .nav-list {
    font-size: 1.2rem;  
    flex-direction: row; 
    justify-content: space-between;
  }

  .svg-arrow img {
  width: 4em;
}

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

  .artwork--split{
  grid-template-columns: repeat(2, 1fr);
}

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

form {
   margin: 5% 5% 0;
}

}