body{
    margin:0;
}

/* Header */
header {
    width:100%;
}
nav ul {
    display:flex;
    background-color:hwb(240 11% 89%);
    margin:0;
    padding:0;
    justify-content:center;
    align-items:center;
    width: 100%;
    height:70px;
    list-style:none;
    font-family:'Trebuchet MS', Helvetica, 'Lucida Sans', sans-serif;
    font-size:25px;
    gap:60px;
}

nav a:link, nav a:visited {
    text-decoration:none;
    color:azure;
}

nav a:hover, nav a:active {
    color:rgb(218, 0, 0);
}

/* Hero Section */
.hero {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    background-image: url("media/hero-section-3.jpg");
    background-size: cover;
    height:790px;
    color:hwb(0 9% 91%);
    font-family: 'futura';
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
}

.hero img {
    margin-top:290px;
    border-radius:0;
}

.hero a {
    padding:20px 30px;
    background-color:rgb(43, 152, 199);
    border-radius:35px;
    margin-top:30px;
    font-family:'Trebuchet MS', Helvetica, 'Lucida Sans', sans-serif;
    font-size:15px;
    letter-spacing:2px;
    box-shadow:0 6px 16px rgba(0, 0, 0, 0.15);
}

.hero a:link, .hero a:visited {
    text-decoration:none;
    color:azure;
}

.hero a:hover, .hero a:active {
    color:rgb(218, 0, 0);
}

/* About Section */
main section {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin:50px 150px 50px 150px;
    justify-items:center;
}

main section h2, main section p{
    grid-column:1;
    margin:0;
}

main section img{
    grid-column:2;
    grid-row:1 / span 2;
    align-items: center;
    border-radius:50px;
}

main section h2{
    font-size:45px;
    height:60px;
    text-transform:uppercase;
    align-self:center;
    margin:0;
}

main section p{
    margin:0 40px 0 70px;
    font-family:'montserrat', 'poppins', sans-serif;
    font-size:20px;
    color:rgb(52, 51, 51);
    align-self:center;
}

/* Footer */
footer {
    display:flex;
    background-color:hwb(240 11% 89%);
    color:azure;
    margin:0;
    padding:0;
    justify-content:space-between;
    align-items:center;
    position:relative;
    width: 100%;
    height:110px;
    font-family:'Trebuchet MS', Helvetica, 'Lucida Sans', sans-serif;
    font-size:15px;
}

footer p{
    position:absolute;
    left:50%;
    margin:0;
}


/* CAST PAGE */
/* Cast Cards */
section {
    display:grid;
    grid-template-columns: 1fr 1fr;
}

section h1{
    grid-column:1 / span 2;
    margin-left:55px;
}

section div{
    display:grid;
    grid-template-columns: 1fr 2fr;
    background-color:rgb(193, 225, 232);
    margin:20px 50px 50px 50px;
    gap:1rem;
    align-items:start;
    padding:1rem;
    border-radius:8px;
    height:203px;
    font-family:'montserrat', 'poppins', sans-serif;
}

section div img{
    grid-row:1 / span 4;
    object-fit:cover;
    border-radius:8px;
}

section div h2, section div p{
    margin:0 60px 0 0;
}

section div a{
    padding:15px 30px;
    background-color:rgb(170, 16, 16);
    border-radius:35px;
    font-family:'Trebuchet MS', Helvetica, 'Lucida Sans', sans-serif;
    font-size:15px;
    letter-spacing:2px;
    box-shadow:0 6px 16px rgba(0, 0, 0, 0.15);
    width:fit-content;
    height:fit-content;
}

section div a:link, section div a:visited{
    text-decoration:none;
    color:white;
}

section div a:hover, section div a:active{
    color:rgb(88, 172, 228);
}

section div p{
    font-size:15px;
    line-height:18px;
}

/* Dragons Section */
.dragons{
    display:grid;
    grid-template-columns: 1fr 2fr;
    background-color:rgb(193, 225, 232);
    margin:50px;
    gap:1rem;
    align-items:start;
    padding:1.2rem;
    border-radius:8px;
    font-family:'montserrat', 'poppins', sans-serif;
    height:fit-content;
}

.dragons img{
    grid-row:1 / span 4;
    object-fit:cover;
    border-radius:8px;
}

.dragons ul li {
    margin:0 0 0 60px;
}

.dragons ul li ul li{
    margin:3px 0 15px -5px;
}

.dragons h2{
    margin: 0 0 0 40px;
}

.dragons a{
    padding:20px 30px;
    background-color:rgb(170, 16, 16);
    border-radius:35px;
    font-family:'Trebuchet MS', Helvetica, 'Lucida Sans', sans-serif;
    font-size:15px;
    letter-spacing:2px;
    box-shadow:0 6px 16px rgba(0, 0, 0, 0.15);
    width:fit-content;
    justify-self:center;
    margin-top: 0px;
}

.dragons a:link, .dragons a:visited{
    text-decoration:none;
    color:white;
}

.dragons a:hover, .dragons a:active{
    color:rgb(88, 172, 228);
}