html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: 'Courier New', Courier, monospace;
}

.hero {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.hero,
.btn{
    background-color: indigo;
    border: indigo;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.card-body p,
.about p{
    color: rgba(0, 0, 0, 0.493);
}

.hero a {
    color: #ffd369;
    font-weight: bold;
    text-decoration: 2px underline wavy hotpink;
}

.hero a:hover,
.hero a:focus{
    text-decoration: 2px underline solid hotpink;
}

.hero {
    height: 300px;
}

nav ul {
    list-style-type: none;
    display: flex;
    gap: 30px;
}

.container{
    max-width: 960px;
}

.btn, 
.hero a, 
.nav li{
    cursor: pointer;
    transition: background 0.6s ease-in-out;
}

nav li:hover,
nav li:focus{
    background: indigo;
}

nav img{
    animation: rotate-center 4s linear 0s infinite normal none;
}

@keyframes rotate-center {

    0% {
        transform: rotate(0);
    }

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

h1{
    font-weight: 900;
}

.btn:hover,
.btn:focus{
    background-color: rgb(45, 0, 77);
}

p{
    letter-spacing: 0.5px;
}