*, ::before, ::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/*  rem = 1rem = 10px, rem means root em, em is relative to the parent element,
2rem = 20px  62.5% = 10px 
 */
html{
    font-size: 62.5%;

}
body{
    font-family: Baskervville, serif;
    color: linen;
    background-color: rgb(20, 30, 40);
}
h1{
    font-family: Anton, sans-serif;

}
h2,h3,h4,h5,h6{
    font-family: Raleway, sans-serif;
}
a{
    text-decoration: none;
    color: linen;
}
/* fr means fraction, 1fr = 1 fraction of the available space */
main{
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
    row-gap: 3rem;
}
.heading{
    grid-column: 2/3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
}
.hero{
    grid-column: 1/-1;
    position: relative;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-title{
    text-align: center;
    color: orangered;
    font-size: 8rem;
}
.hero-subtitle{
    font-size: 2.4rem;
    color: orangered;
    text-align: center;
}
.author{
    font-size: 2rem;
    font-family: Raleway, sans-serif;
}
.author-name a:hover{
    background: #306203;
}
.publish-data{
    color: rgba(255, 255, 255, 0.5) ;
}