.tempest-storyline {
    width: 80%;
    margin: auto;
    border: 10px solid var(--content-background);
    background: var(--body-background);
    padding: 20px;
    margin-bottom: 20px;
}

.tempest-storyline_head {
    margin-bottom: 10px;
    line-height: 20px;
}

.tempest-storyline_headline {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mainfont);
    font-size: 35px;
    font-weight: bold;
    color: var(--headline-color);
    margin-bottom: 3px;
}

.tempest-storyline_subline {
    padding: 5px 0;
    font-family: var(--subfont);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--font-color);
    font-weight: normal;
}

.tempest-storyline_cityL {
    margin: 20px 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.tempest-storyline_cityPic {
    width: 25%;
}

.tempest-storyline_cityPic img {
    border-radius: 100%;
    width: 150px;
    height: 150px;
    border: 4px solid var(--circle-color);
}

.tempest-storyline_cityDesc {
    width: 72%;
    color: var(--font-color);
    text-align: justify;
    font-size: 14px;
}

.tempest-storyline_cityName {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mainfont);
    font-size: 20px;
    font-weight: bold;
    color: var(--headline-color);
    margin-bottom: 3px;
}

.tempest-storyline_cityR {
    margin: 20px 0;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: row-reverse;
}

.tempest-storyline_links {
    display: flex;
    justify-content: space-around;
}

.tempest-storyline_link {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--mainfont);
    font-size: 20px;
    font-weight: bold;
}

.tempest-storyline_link a:link,
.tempest-storyline_link a:visited,
.tempest-storyline_link a:active,
.tempest-storyline_link a:hover {
	color: var(--headline-color);
	text-decoration: none;
}