@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');

:root{
    --primary:#283593;
    --seconday:#5C6BC0;
    --accent1:#ECEFF1;
    --accent2:#263238;
    --accent3:#90A4AE;
}

body{
    background-color: var(--accent3);
}

#wrapper{
    border: solid 7px var(--accent2);
    margin: 100px;
    padding: 20px;
    background-color: var(--accent1);
    border-radius: 20px;
}

header{
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: "Playfair Display SC", serif;
    font-weight: 700;
    font-style: normal;
    border-bottom: solid 7px var(--accent2);
}

main{
    margin-top: 30px;
}

.card{
    border-left: solid 3px var(--accent3);
    padding-left: 20px;
    margin-top: 100px;
    margin-bottom: 20px;
}

.button{
    border: solid 3px var(--accent2);
    background-color: var(--accent3);
    border-radius: 20px;
    width: 100px;
}

.button a{
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer{
    border-top: solid 3px var(--accent2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    padding-top: 20px;
}

h2{
    font-family: "Playfair Display SC", serif;
}
p{
    font-family: "Winky Rough", sans-serif;
    line-height: 2em;
}