/* Keyframes */

@keyframes FadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* Universal */

* {
    margin: 0%;
    padding: 0%;
}

a {
    color: #0066CC;
    text-decoration: none;
    vertical-align: baseline;
}

/* Body */

body {
    margin: 0%;
    padding: 0%;
    font-family: "Segoe UI", sans-serif;
    display: flex;
    background: #DAF3FD;
    justify-content: center;
    align-items: center;
    font-size: .83em;
}

.body-content,
.body-content-credits,
.body-content.projects {
    background-color: #fff;
    width: 90%;
    max-width: 945px;
    padding-top: 1vw;
    box-shadow: -10px 0 15px rgba(0, 0, 0, 0.1), 10px 0 15px rgba(0, 0, 0, 0.1);
}

/* Body Length */

.body-content {
    position: relative;
    /* Default */
    height: 929%;
}

.body-content.credits {
    height: 1157%;
}

.body-content.changelog {
    height: 1079%;
}

.body-content {
    z-index: 1;
}

/* Headers */

.top-header {
    display: flex;
    gap: 1.5%;
    padding: 0px 20px;
    font-size: 100%;
    font-weight: light;
    text-align: right;
    justify-content: right;
    padding-bottom: 0.5%;
}

.bottom-header {
    padding: 0px 2%;

}

.language-header {
    font-weight: bold;
}

.nav-banner {
    background: transparent url("Assets/header.png") no-repeat scroll 0 -520px;
    position: absolute;
    height: 130px;
    width: 50%;
    top: 0;
    margin-left: 160px;
    z-index: -1;
}

.nav-gradient {
    background: transparent url("Assets/gradient.png") repeat-x scroll 0px -16px;
    position: absolute;
    height: 130px;
    width: 100%;
    top: 0;
    z-index: -2;
}

/* Links */

.navlinks {
    display: flex;
    align-items: center;
    gap: 3.2%;
}

.navlinks a {
    font-size: 115%;
}

.link-selected {
    color: #000;
}

.reunion-logo {
    padding-bottom: 1.75%;
}

.navbar {
    padding-bottom: 2.25%;
}

/* Banners */

.banner-content,
.banner-content-download {
    color: white;
    padding: 0px 40px;
    background: url(Assets/banner.png);
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-content-download {
    height: 330px;
    padding: 0 40px;

    background-image: url("Assets/banner-downloads.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: white;
    animation: FadeIn 1.2s ease-in-out forwards;
}


.header-banner {
    padding-bottom: 1%;
}

/* Downloads */

.download-button {
    background-color: #0066CC;
    color: #fff;
    padding: 4px 10px;
    border: 1px solid #fff;
    width: fit-content;
}

.download-button:hover {
    background-color: #5E9AF0;
}

.pg-banner {
    padding-bottom: 15px;
}

.download-button-line {
    border-top: 1px solid #e4e4e4;
    margin-top: 10px;
    padding-top: 10px;
    width: 220px;
}

/* Cards */

.content-cards,
.content-cards-download {
    border-top: 1px solid #e4e4e4;
    margin-top: 26px;
    padding-top: 23px;
    display: flex;
    flex-direction: column;
}

.content-cards-download {
    padding-bottom: 201px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
}

.card-header,
.addons-header {
    color: #22436C;
    font-size: 146%;
    font-weight: 400;
    padding-bottom: 25px;
}

.addons-header {
    padding-bottom: 10px;
}

.extras {
    padding-top: 23px;
    width: 198px;
}

.card,
.project-card {
    display: flex;
    flex-direction: column;
    width: 200px;
}

.card-header-link {
    color: #0099CC;
    font-size: 105%;
}

.card-header-link.mirror {
    color: #1e69f8;
}

.line-spacing {
    width: 100%;
    height: 1px;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: #a1a1a136;
}

.project-card {
    transition: 0.1s ease-in-out;
}

.showcase-img,
.project-img {
    padding-bottom: 10px;
}


/* Padding */

.line-padded.region {
    padding-bottom: 636px;
}

.line-padded.projects {
    padding-bottom: 371px;
}

.content-padded {
    padding: 0 20px 20px 20px;
}

.line-padded {
    padding: 0 20px 20px 20px;
    line-height: 25px;
}

/* Footer */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    max-width: 925px;
    bottom: 0;
    padding-top: 150px;
    gap: 10px;
}

.footer-404 {
    padding-bottom: 712px;
}

.copyright,
.right-side {
    display: flex;
    align-items: center;
    gap: 15px;
}

.copyright {
    flex-wrap: wrap;
}

.right-side {
    flex-wrap: wrap-reverse
}

.psa {
    font-weight: bold;
    font-size: 12px;
}

.team-logo {
    padding-right: 20px;
    width: 120px;
}

.real-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 50px;
}

.list {
    padding-left: 27px;
}

.list.credit {
    padding-top: 2px;
    padding-bottom: 15px;
}

.list.specs>*>* {
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

.list.specs2>*>* {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
}

.header-404 {
    padding-bottom: 3px;
}

.footer-credits {
    padding-bottom: 46px;
}

.credit-pg {
    padding-bottom: 15px;
}

.list.region {
    padding-bottom: 10px;
    border-bottom: 1px solid #0000001a;
}

.content-projects {
    padding-top: 30px;
}

/* Titles */

.region-title {
    padding-bottom: 20px;
}

.project-title {
    color: #22436C;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 240%;
    font-style: normal;
    font-weight: normal;
}

.project-subtitle {
    color: #22436C;
    padding-bottom: 10px;
}

/* Animations */
/* Landing page */

.banner-content,
.banner-content *,
/* Added * so the elements also get wrapped, along with the main element */
.banner-content-download,
.banner-content-download *,
.real-content,
.real-content *,
.line-padded,
.line-padded *,
.footer-credits,
.footer-credits * {
    opacity: 0;
    animation: FadeIn 1.5s ease-in-out 0.1s;
    animation-fill-mode: forwards;
}

/* Darkening when hovering over a link */

.navlinks a:hover,
a[href="#"]:hover,
a[href^="https"]:not([href*="reunion7.com"]):hover {
    filter: brightness(50%);
}

/* Brighten site logo when hovering */

.reunion-logo,
.reunion-logo-footer {
    transition: 0.3s ease-in-out;
}

.reunion-logo:hover,
.reunion-logo-footer:hover {
    filter: brightness(120%)
}

/* Download button hold animation */

.download-button {
    transition: 0.1s ease-in-out;
}

.download-button:hover {
    transform: scale(98%)
}

.download-button:active {
    transform: scale(95%)
}

/* Project-img box-shadow */

.project-card:hover {
    transform: scale(1.05);
}

/* Tooltips */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip img {
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.tooltip .tooltiptext {
    display: none;
    width: 120px;
    background-color: rgb(0, 0, 0);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-left: 110%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    display: block;
}