styles.css

/* colors */
:root{
    --black: #2a2829;
    --white: #F0F0F0;
    --accent: #66FF99;
}

/*  typography */
html {
    font-size: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.75;
}
h1, h2, h3, h4, h5 {
    margin: 0.5rem 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}
h1 {font-size: 3rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.3rem;}
h4 {font-size: 1rem;}
p {margin-bottom: 1rem;margin-top: 0px;}
a{color:var(--white);}
.card a{color:var(--black);}
a:hover, a:focus {color: var(--accent);}
.footer-text, .tooltip-text {font-size: 0.75rem;}

/* structure */
body{
    background-color: var(--black);
    color: var(--white);
    margin: 4% 18%;
}
main{
    width:100%;
}
footer{
    margin-top:5rem;
    border-top: 2px solid var(--white);
    padding-top:1rem;
}
footer p{
    margin: 0px;
    font-size: 0.8rem;
}
main div{
    margin-bottom:3rem;
}

/* homepage tweaks */
#home h1{
    margin-top:8rem;
}

/* mobile structure */
@media only screen and (max-width: 1200px) {
    body{
        margin:4% 12%;
    }
}
@media only screen and (max-width: 1000px) {
    body{
        margin:4%;
    }
}
@media only screen and (max-width: 600px) {
    .cta-link{
        width: calc(100% - 2.8rem) !important;
        text-align: center !important;
    }
}

/* call to action links */
.cta-link{
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border: 2px solid var(--black);
    background: var(--white);
    color: var(--black);
    border-radius: 5px;
    font-weight: 700;
    font-size: 1rem;
    width: fit-content;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    text-decoration:none;
}
.cta-link:hover, .cta-link:focus{
    border: 2px solid var(--white);
    background: var(--black);
    color: var(--accent);
    text-decoration:none;
}

/* img */
img#partnership{
    object-fit: cover;
    width: 100%;
    max-height: 20rem;
    border: 2px solid var(--white);
    margin: 2rem 0px;
}