.color-blue {
    color: rgb(120, 192, 168);
}

.color-brown {
    color: rgb(93, 65, 47);
}

.color-orange {
    color: rgb(240, 120, 24);
}

.color-red {
    color: rgb(196, 61, 50);
}


html {
    font-family: 'Roboto Condensed', sans-serif;
    height: 100%;
    color: rgb(93, 65, 47);
}

body {
    background: rgb(255, 255, 255);
    background: -moz-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(252, 235, 182, 1) 100%);
    background: -webkit-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(252, 235, 182, 1) 100%);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(252, 235, 182, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#fcebb6", GradientType=1);
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
    align-items: center;
    display: flex;
    justify-content: center;
}

header {
    height: 110px;
    overflow: hidden;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fugaz One', cursive;
    font-weight: 600;
    text-transform: uppercase;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.flex-item {
    margin: 1rem;
}

.hero {
    display: grid;
    align-items: center;
    width: 80%;
}

.hero img {
    width: 100%;
    max-width: 400px;
    border-radius: 50%;
    height: auto;
    border: 0.5rem solid rgb(93, 65, 47);
}

.title {
    font-size: 2rem;
}

.subtitle {
    font-size: 1.5rem;
}

.bottom-divider {
    border: none;
    border-top: 0.5rem dashed rgb(93, 65, 47);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.subtitle-addition-container {
    text-align: left;
    text-justify: newspaper ;
}

ul {
    list-style: square;
}