:root {
    --font-body: Arial, Helvetica, sans-serif;
    --font-headline: "Oswald","Arial Narrow Bold", sans-serif;
    --font-header:"Cinzel","Arial Narrow Bold", sans-serif;
    /* colors */
    --primary-color: #32533D;
    --secondary-color: #ED9390;
    --tertiary-color: #F374AE;
    --light-color:#D8CFAF;
    --neutral-color: #E6B89C  ;

    --light-text: #F7FFF7;
    --dark-text: #292F36;
  
    /* sizes */
    --font-base: 20px;
    --small-font: 0.8em;
    --medium-font: 1.5em;
    --large-font: 2em;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    font-family: var(--font-body);
}
h1{
    font-family: var(--font-header);
}
h2,h3{
    margin: 0.5em;
    color: var(--light-text);
    font-family: var(--font-headline);
    font-size: var(--large-font);
}
header {
    font-size: var(--large-font);
    grid-column: 1 / -1;
    grid-row: 1;
    color: var(--neutral-color);
    padding: 1rem;
    background-color: var(--primary-color);
}
.links {
    display: flex;
    justify-content:space-around;
    background-color: var(--light-color);
    padding: 2rem;
}
.links a {
    color: var(--light-text);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--medium-font);
}
.links a:hover{
    color: var(--tertiary-color);
}
.links-header{
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
}
.links-card{
    flex-direction: column;
    background-color: var(--neutral-color);
}

.content {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    width: 100%;
    grid-template-columns:70% 30%;
    min-height: 0;
}
.card{
    padding: 1em;
    background-color: var(--secondary-color);
}
.card h1{
    background-color: var(--light-text);
    border-radius: 20rem;
    padding-left: 1em;
    margin-bottom: 1em;
    color: var(--tertiary-color);
}
.card p{
    color: var(--light-text);
    font-size: var(--font-base);
    margin: 1em;
}
.photo {
    border-radius: 1em;
    transform: rotate(-5deg);
    float: right;
    width: 10rem;
    height: 10rem;
    margin: 1em;
  }
.introduction{
    padding: 2rem;
    border: 5px solid var(--tertiary-color);
    background-color: var(--neutral-color);
    border-radius: 1em;
}
footer {
    grid-row: 4;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    grid-column: 1 / -1;
    font-size: var(--large-font);
    color: white;
    background-color: var(--primary-color);
    padding: 1rem;
    text-align: center;
    font-size: var(--small-font);
}
img{
    width: 100%;
}
main{
    max-width: 100%;
}

@media screen and (max-width: 900px){
    .content{
        display: flex;
        flex-direction: column;
    }
    .links{
        flex-direction: column;
    }
    
}