html,
body {
    box-sizing: border-box;
    max-width: 100%;
}

.bg-blue {
    background-color: rgb(7, 133, 206) !important;
}

.bg-blueGradient {
    background: linear-gradient(to right, rgb(0, 38, 59), rgb(15, 163, 249));
}

.text-blue {
    color: rgb(7, 133, 206) !important;
}

.text-md-white {
    color: white !important;
}

p,
h1,
h2,
h3,
h4 {
    font-size: 0.9em;
}

#heroSection {
    height: 20rem;
}

.inner-frame {
    border-radius: 15%;
    width: 13rem;
    height: 13rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);

}

.outer-frame {
    border-radius: 15%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(5deg);
    width: 15rem;
    height: 15rem;

}


.profile-img {
    border-radius: 15%;
    width: 10rem;
    height: 10rem;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);

}

section {
    scroll-margin-top: 4rem;
}

.line {
    width: 5rem;
    height: 0.2em;
}

.circle {
    width: 0.2em;
    height: 0.2em;
}

.vertical-line {
    width: 0.2em;
    height: 5rem;
}

#about .rounded-pill {
    width: 1.2rem;
    height: 3rem;
}

.block {
    height: 10rem;
}

.slidingCircle {
    animation-name: slideMeDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes slideMeDown {
    from {
        top: 0%;
    }

    to {
        /* top: 90%; */
        top: calc(100% - 30%);
        /* to make an absolutely positioned child sit exactly at the bottom edge of the parent. */
    }
}

.card {
    border-top: solid 0.3em rgb(7, 133, 206) !important;
}

.greyBox {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blueBox {
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.btn:hover {
    background-color: rgb(7, 133, 206) !important;
}

@media(max-width:768px) {

    #heroSection {
        height: 30rem;
    }

    .inner-frame {
        width: 11rem;
        height: 11rem;
    }

    .outer-frame {
        width: 13rem;
        height: 13rem;
    }

    .profile-img {
        width: 8rem;
        height: 8rem;
    }
}