@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

:root {
    --primary: #222831;
    --secondary: #00ADB5;
    --text: #393E46;
    --off-white: #F3F4F6;
}

body {
    font-family: 'Roboto', sans-serif;
    text-align: left;
    color: var(--text);
}

.container-center {
    width: 600px;
    max-width: 85vw;
    margin: auto;
}
header{
    background-color: var(--primary);
    border: solid 0;
    color: var(--secondary);
    padding: 1rem;
    border-radius: 0 0 1rem 1rem ;
}

header h2{
    color: var(--secondary);
}

.content{
    background-color: var(--off-white);
    padding: 1rem;
    border: solid 0;
    border-radius: 1rem;
    margin-top: 1rem;
    
}

hr {
    border-style: dotted;
    border-width: 0rem 0 0.5rem;
    max-width: 5rem;
    margin: 2rem auto;
}

.icons {
    max-width: 2rem;
}

footer {
    text-align: center;
    margin: 1rem 1rem 0rem;
    padding: 1rem;
    padding-top: 0.5rem;
    border-top-right-radius: 1rem;
    color: var(--secondary);
}

.footer h3 {
    margin-top: 0rem;
}

.container-footer-links {
    padding: 0.5rem;
}

.container-footer-links a {
    padding: 1rem 1rem;
}