:root {
    --primary: #222831;
    --secondary: #b52b65;
    --tertiary: #ed6663;
    --fourth: #edc988;
}

body {
    background-color: black;
    font-family: 'Fredoka One', cursive;
}

main {
    margin-top: -62px;
}

/* navbar stylings */
.navbar {
    background-color: var(--secondary);
    color: var(--fourth);
}

nav h1 {
    font-size: 42px;
    margin-top: 8px;
    text-shadow: black;
}

.navbar a {
    color: inherit;
    text-decoration: none;
}

.navbar btn {
    border-radius: 5px;
}

.navbar btn:hover {
    background: rgb(189,99,237);
    background: linear-gradient(18deg, rgba(189,99,237,1) 26%, rgba(48,127,214,1) 56%, rgba(172,236,163,1) 91%);
}

/* jumbotron stylings */
.jumbotron {
    color: white;
    background-color: black;
    background-image: url("../images/hero-img.jpg");
    background-repeat: no-repeat;
}

.intro {
    text-align: end;
    padding-bottom: 400px;
}

/* about me section styling */

#aboutMe {
    color: white;
    background-color: black;
    border-radius: 5px;
    border: var(--secondary) solid 3px;
    padding: 50px;
    margin-bottom: 100px;
}

.aboutText {
    border: var(--secondary) solid 5px;
}

#aboutMe img {
    border-radius: 5px;
}

#aboutMe h2 {
    margin-bottom: 25px;
}

/* works styling */
#works {
    border: var(--secondary) solid 3px;
    color: white;
    background-color: black;
    border-radius: 5px;
    padding: 50px;
}

#fifty {
    width: 75%;
}

#twentyFive {
    width: 30%;
}

/* contact styling */
#contact {
    border: var(--secondary) solid 3px;
    padding: 50px;
    margin-top: 100px;
    color: white;
    background-color: black;
    border-radius: 5px;
}

.contact-card {
    background-color: var(--secondary);
}

#contact h2 {
    text-align: center;
}

#contact a {
    color: inherit;
    text-decoration: none;
}

#contact img {
    border-radius: 5px;
}

/* footer styling */

footer {
    background-color: none;
    color: white;
}

.footer {
    color: white;
}

.heart {
    color: red;
}

.headset {
    color: pink;
}

@media screen and (max-width: 575px) {
}