h1,h2,h3,h4 {
    font-family: "Playfair Display", sans-serif;
}

body{
    font-family: "Roboto", sans-serif;
    font-size:16px;
}


.container{
    max-width:1400px;
    margin: 0 auto;
}


header{
    background-image: linear-gradient(rgba(30, 16, 0, 0.2), rgb(30, 16, 0,1)), url("../images/Minoa-Pera-Icerisi.jpeg");
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: white;
    padding: 200px 0;
}

header h1{
font-family: "Playfair Display", sans-serif;
font-weight: 700;
font-size: 128px;
line-height: 1;
margin:0;
}

header h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.5;
    margin:0;
}

header h3 {
    font-family: "Roboto", sans-serif;
    font-Weight:900;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing:5px;
    margin:0;
}

header a{
    display:inline-block;
    margin-top: 32px;
    padding: 16px 32px ;
    background-color: white;
    color: black;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height:1.5;
    text-decoration: none;
    letter-spacing: 2px;  
}

header a:hover{
   background-color: brown;
    color: white; 
}

main h3{
font-family:"Roboto", sans-serif;
font-weight:700;
font-size:16px;
line-height:1.5;
letter-spacing:3px;
opacity:0.3;
margin:0;
}

main h2{
font-weight:700;
font-size:40px;
line-height:1.5;
margin:0;
}

main p{
font-weight:400;
line-height:1.5;
opacity:0.7;
}

main h4{
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    margin:0
}
main h5{
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    margin:0
}



footer{
    color: white;
    background-image: linear-gradient(rgba(30, 16, 0,0.9), rgba(30, 16, 0,1)),url("../images/Ampersand-bookshop.jpeg");
     background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    padding:0 100px;
}

footer h4{
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

footer ul {
    padding:0;
}

footer li {
    list-style: none;
    padding:0;
    margin:0;
}

footer a{
    color:white;
    opacity: 0.7;
    text-decoration: none;
}

footer a:hover{
    color:brown;
}

footer p{
    line-height: 20px;
    font-weight: 400;
    opacity: 0.7;
}

section{
    max-width: 100%;
    margin: 0 auto;
    padding: 100px;
}

section.secondary {
background: rgba(110, 58, 0, 0.319);

}

.grid {
    display:grid;
    grid-gap:64px;
}

.grid-2-column{
    grid-template-columns:1fr 1fr;
    padding: 100px 0;
}

.grid-3-columns{
grid-template-columns: 1fr 1fr 1fr;
}

.card{
    background-color: white;
    margin:30px 0;
    box-shadow: rgba(48, 26, 0, 0.367) 0px 8px 24px;;
}

.card-header.grid{
grid-gap:0;
padding:0
}

.embed {
 width:100%;
 aspect-ratio: 1 / 1;
}

.video-grid-3-columns{
width: 100%;
  display: grid;
  margin-top: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.youtube-media{
margin: 0 auto;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.card-body{
    padding:30px; 
}


.card p{
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    opacity: 70%;
}

.card-footer{
    padding:0 30px 20px;
}

.btn{
display: block;
background-color: brown;
color:white;
padding:16px 32px;
font-size: 14px;
text-decoration: none;
text-align: center;
letter-spacing: 3px;
font-weight: 700;
}


.img-responsive {
  max-width: 100%;
  margin-top:60px;
}

.img-card-responsive{
    width: 100%;
}

.text-center{
    text-align: center;
}


@media (max-width: 960px){
    body{
        font-size: 12px;
    }
    
    header {
    padding: 60px 0;
    }

    header h1{
    font-size: 64px;
    }

    header h2 {
    font-size: 18px;
    }

    header h3 {
    font-size: 12px;
    letter-spacing:2px;
    }

    header a{
    margin-top: 16px;
    padding: 8px 16px ;
    font-size: 12px;
    letter-spacing: 0;
    }


    section{
        padding:30px;
    }

    main h2{
        font-size: 26px;
    }

    main h3 {
        font-size:12px;
    }

     footer{
        padding:0 50px;
     }

    footer h4{
    font-size:16px;
    margin:0;
    }

    .grid{
        grid-template-columns: 1fr;
        grid-gap:30px;
    }

    .img-responsive {
     margin-top:0px;
    }

    .card-header img{
        display: none;
    }

.embed {
 aspect-ratio: 16 / 9;
}

.video-grid-3-columns {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
}