/* 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;
    flex-flow: column;
    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 { /* Default */
    height: 929%;
}

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

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

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

/* Headers */

.obsolete-header {
    z-index: 99;
    width: 100%;
    background: yellow;
    text-align: center;
    padding: 4px;
    font-size: 1.05rem;
}

.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 0 -16px;
    position: absolute;
    height: 130px;
    width: 945px;
    top: 0;
    z-index: -2;
}

/* Links */

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

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

.link-selected {
    color: #000;
}

.kiretsk-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.svg);
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-content-download {
    background: url(Assets/banner.png);
}

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

/* Downloads */

.download-button, a.blue {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 4px 10px;
    width: fit-content;
    text-decoration: none;
    float: left;
    /*   margin-right: 15px; */
    /*   margin-bottom: 15px; */
    display: block;
    color: #fff;
    line-height: 18px;
    /*   font-size: 12pt; */
    font-size: inherit;
    font-weight: bold;
}

.download-button::-moz-focus-inner, a.button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.download-button:active,.download-button:focus,a.button:active,a.button:focus {
    outline: none;
    ie-dummy: expression(this.hideFocus =         true);
}

.download-button {
    background-image: linear-gradient(to bottom, #408CD4 5%, #104B82 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408CD4
        ), color-stop(1, #104B82));
    background-image: -moz-linear-gradient(top, #408CD4 5%, #104B82 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408CD4',
        endColorstr='#104B82');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#408CD4', EndColorStr='#104B82')";
    background-color: #408CD4;
    border: 1px solid #3C6991;
    text-shadow: 1px 1px 0px #005ab3;
}

.download-button:hover, a.blue:hover {
    background-image: linear-gradient(to bottom, #64AAEB 5%, #104B82 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #64AAEB
        ), color-stop(1, #104B82));
    background-image: -moz-linear-gradient(top, #64AAEB 5%, #104B82 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64AAEB',
        endColorstr='#104B82');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#64AAEB', EndColorStr='#104B82')";
    display: block;
}

.download-button:active, a.blue:active {
    background-image: linear-gradient(to bottom, #9BC6EB 5%, #5598D4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9BC6EB
        ), color-stop(1, #5598D4));
    background-image: -moz-linear-gradient(top, #9BC6EB 5%, #5598D4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9BC6EB',
        endColorstr='#5598D4');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9BC6EB', EndColorStr='#5598D4')";
    text-shadow: 1px 1px 0px #004080;
    /* margin-top: 1px; */
}

.lang-button, a.bluesec {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 2px 10px;
    width: fit-content;
    text-decoration: none;
    float: left;
    /*   margin-right: 15px; */
    /*   margin-bottom: 15px; */
    display: block;
    color: #fff;
    line-height: 18px;
    /*   font-size: 12pt; */
    font-size: inherit;
    font-weight: bold;
}

.lang-button::-moz-focus-inner, a.lang::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.lang-button:active,.lang-button:focus,a.lang:active,a.lang:focus {
    outline: none;
    ie-dummy: expression(this.hideFocus =         true);
}

.lang-button {
    background-image: linear-gradient(to bottom, #408CD4 5%, #104B82 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408CD4
        ), color-stop(1, #104B82));
    background-image: -moz-linear-gradient(top, #408CD4 5%, #104B82 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408CD4',
        endColorstr='#104B82');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#408CD4', EndColorStr='#104B82')";
    background-color: #408CD4;
    border: 1px solid #3C6991;
    text-shadow: 1px 1px 0px #005ab3;
}

.lang-button:hover, a.lang:hover {
    background-image: linear-gradient(to bottom, #64AAEB 5%, #104B82 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #64AAEB
        ), color-stop(1, #104B82));
    background-image: -moz-linear-gradient(top, #64AAEB 5%, #104B82 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64AAEB',
        endColorstr='#104B82');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#64AAEB', EndColorStr='#104B82')";
    display: block;
}

.lang-button:active, a.lang:active {
    background-image: linear-gradient(to bottom, #9BC6EB 5%, #5598D4 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9BC6EB
        ), color-stop(1, #5598D4));
    background-image: -moz-linear-gradient(top, #9BC6EB 5%, #5598D4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9BC6EB',
        endColorstr='#5598D4');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9BC6EB', EndColorStr='#5598D4')";
    text-shadow: 1px 1px 0px #004080;
    /* margin-top: 1px; */
}

.grey-button, a.grey {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 4px 10px;
    width: fit-content;
    text-decoration: none;
    float: left;
    /*   margin-right: 15px; */
    /*   margin-bottom: 15px; */
    display: block;
    color: #fff;
    line-height: 18px;
    /*   font-size: 12pt; */
    font-size: inherit;
    font-weight: bold;
}

.grey-button::-moz-focus-inner, a.grey::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.grey-button:active,.grey-button:focus,a.grey:active,a.grey:focus {
    outline: none;
    ie-dummy: expression(this.hideFocus =         true);
}

.grey-button {
    background-image: linear-gradient(to bottom, #B2B2B2 5%, #787878 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #B2B2B2
        ), color-stop(1, #787878));
    background-image: -moz-linear-gradient(top, #B2B2B2 5%, #787878 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2B2B2',
        endColorstr='#787878');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#408CD4', EndColorStr='#104B82')";
    background-color: #B2B2B2;
    border: 1px solid #666666;
    text-shadow: 1px 1px 0px #555555;
}

.grey-button:hover, a.grey:hover {
    background-image: linear-gradient(to bottom, #B2B2B2 5%, #787878 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #B2B2B2
        ), color-stop(1, #555555));
    background-image: -moz-linear-gradient(top, #B2B2B2 5%, #787878 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2B2B2',
        endColorstr='#555555');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#B2B2B2', EndColorStr='#555555')";
    display: block;
}

.grey-button:active, a.grey:active {
    background-image: linear-gradient(to bottom, #CCCCCC 5%, #9C9C9C 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #CCCCCC
        ), color-stop(1, #9C9C9C));
    background-image: -moz-linear-gradient(top, #CCCCCC 5%, #9C9C9C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC',
        endColorstr='#9C9C9C');
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorStr='#CCCCCC', EndColorStr='#9C9C9C')";
    text-shadow: 1px 1px 0px #004080;
    /* margin-top: 1px; */
}

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

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

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

.grey-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: 0px 50px;
    margin-top: 26px;
    padding-top: 23px;
    width: 628px;
    display: flex;
    flex-direction: column;
    padding-bottom: 150px;
}

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

.cards {
    display: flex;
    gap: 20px;
}

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

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

.extras {
    margin-top: 24px;
    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;
    width: 925px;
    bottom: 0;
}

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

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

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

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

.real-content {
    display: flex;
}

.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 */

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

.kiretsk-logo:hover, .kiretsk-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;
}