:root {
    /*color schemes*/
    --sectionheader: 'Dawning of a New Day', cursive;
    --mainFont: 'Quicksand', sans-serif;
    --black: black;
}

/*Nav Bar*/
nav a {
    font-family: var(--mainFont);
    font-size: larger;
}

/*Background*/
body {
    height:100vh;
    margin: 0;
    background-color: black;
    background-image: url("../images/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/*Text*/
h2 {
    font-family: var(--sectionheader);
}

p {
    font-family: var(--mainFont);
}

#work {
    padding: 10px;
}

/* Images */
.portrait {
    height: 400px;
    width: 300px;
    box-shadow: 12px 29px 50px 0px black;
}

/* Containers */
#aboutBox {
    margin-top: 100px;
    padding: 10px;
}

.whiteBG {
    background-color: white;
    box-shadow: 0px 0px 40px 40px white;
    padding: 10px;
}

#workBox {
    margin-top: 50px;
}

.card {
    margin-bottom: 15px;
}

/* Buttons */
.custom-btn {
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 500;
    background-color: #fff;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease 0s;
}

.custom-btn:hover {
    background-color: #85DC62;
    box-shadow: 0px 15px 20px rgba(19, 177, 1, 0.43);
    color: #fff;
    transform: translateY(-7px);
}

/*rotates icons on hover*/
.rotateicon:hover {
    animation-name: rotate;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/*Thanks for Visiting*/
footer {
    text-align: center;
    font-family: var(--sectionheader);
    font-size: 50px;
    padding: 20px;
    margin-top: -5px;
}