/* basics */

* {
    margin: 0;
    padding: 0;
}

body {
    background: #111111;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-size: 100%;
}

h1 {
    color: #ffffff;
}

/* sites */

.site {
    width: 100%;
    height: 100vh;
    overflow-x: hidden !important;
}

#site1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#topSite3 {
    width: 100%;
    height: 25vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#headerSite3 {
    text-align: center;
    letter-spacing: 1vh;
    padding: 5vh;
    border: 0.2vh solid #ffffff;
    border-radius: 1.25em;
    margin-top: 10vh;
}

#stats {
    width: 100%;
    height: 45vh;
    display: flex;
    transform: translate(3vh, 3vh);
}

#statsLeft {
    width: 45%;
    height: 45vh;
}

#statsLeftTop {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#statsLeftTop img {
    height: 100%;
    border-radius: 1.25em;
}

#statsLeftBottom {
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#statsLeftBottom h1 {
    text-align: center;
}

#statsRight {
    width: 55%;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#statsRight ul {
    list-style: none;
}

#statsRight ul li {
    color: white;
}

#profile {
    position: absolute;
    width: 7vh;
    bottom: 10vh;
    border-radius: 1.25em;
    cursor: pointer;
}

/* social media */

#socialMedia {
    position: fixed;
    top: 75vh;
    height: 15vh;
    width: 100%;
    border-bottom: 0.3vh solid #ffffff;
    border-top: 0.3vh solid #ffffff;
    background: #222222;
    z-index: 1;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#instaIcon {
    cursor: pointer;
    width: 10vh;
    margin-left: 32%;
    border-radius: 1.25em;
}

#closeIcon {
    cursor: pointer;
    margin-left: 18%;
    width: 7vh;
}

#socialMediaArrow {
    position: fixed;
    top: 78.5vh;
    height: 8vh;
    z-index: 1;
    transform: rotate(180deg);
}

/* footer */

#footer {
    width: 100%;
    height: 10vh;
    background: #1db954;
    border-radius: 1.25em 1.25em 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer p {
    color: #111111;
    text-decoration: underline;
    letter-spacing: 0.5%;
    cursor: pointer;
}

#footer p:nth-child(1) {
    margin-right: 20%;
}

#footer p:nth-child(2) {
    margin-left: 20%;
}

/* lines */

#startLineLeft {
    position: absolute;
    top: 30vh;
    background: #6E2594;
    border: none;
    height: 0.2vh;
    width: 100%;
    opacity: 0.7;
    visibility: hidden;
}

#startLineRight {
    position: absolute;
    top: 70vh;
    background: #ECD444;
    border: none;
    height: 0.2vh;
    width: 100%;
    opacity: 0.7;
    visibility: hidden;
}

#mainTimeLine {
    position: absolute;
    left: 50%;
    top: 100vh;
    height: 100vh;
    width: 0.3vh;
    background: #ffffff;
    opacity: 0;
}

#firstEntryTimeLine {
    position: absolute;
    left: 50%;
    top: 120vh;
    width: 15%;
    background: #ffffff;
    height: 0.2vh;
    opacity: 0;
}

#secondEntryTimeLine {
    position: absolute;
    right: 50%;
    top: 140vh;
    width: 15%;
    background: #ffffff;
    height: 0.2vh;
    opacity: 0;
}

#thirdEntryTimeLine {
    position: absolute;
    left: 50%;
    top: 160vh;
    width: 15%;
    background: #ffffff;
    height: 0.2vh;
    opacity: 0;
}

#fourthEntryTimeLine {
    position: absolute;
    right: 50%;
    top: 180vh;
    width: 15%;
    background: #ffffff;
    height: 0.2vh;
    opacity: 0;
}

/* header time line */

#firstHeaderTimeLine, #secondHeaderTimeLine, #thirdHeaderTimeLine, #fourthHeaderTimeLine {
    position: absolute;
    color: #1db954;
    opacity: 0;
}

#firstHeaderTimeLine {
    top: 110vh;
    left: 60%;
    font-size: 1.25em;
}

#secondHeaderTimeLine {
    top: 130vh;
    right: 60%;
    font-size: 1.25em;
    text-align: right;
}

#thirdHeaderTimeLine {
    top: 150vh;
    left: 60%;
    font-size: 1.25em;
}

#fourthHeaderTimeLine {
    top: 170vh;
    right: 60%;
    font-size: 1.25em;
    text-align: right;
}

/* img time line */

#imgTimeLineAstoria {
    position: absolute;
    bottom: -75vh;
    right: 60%;
    height: 20vh;
    border-radius: 1.25em;
    transform: rotate(-7deg);
    opacity: 0;
}

#imgTimeLineKsc {
    position: absolute;
    bottom: -55vh;
    left: 60%;
    height: 20vh;
    border-radius: 1.25em;
    transform: rotate(7deg);
    opacity: 0;
}

#imgTimeLineDurlachAue {
    position: absolute;
    bottom: -35vh;
    right: 60%;
    height: 20vh;
    border-radius: 1.25em;
    transform: rotate(-7deg);
    opacity: 0;
}

/* slide show */

#slideShow {
    width: 100%;
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#slideShowArrowLeft {
    margin-right: 35%;
}

#slideShowArrowRight {
    margin-left: 35%;
    transform: rotate(180deg);
}

#slideShowArrowRight, #slideShowArrowLeft {
    cursor: pointer;
    opacity: 0.7;
}

#slideShowArrowRight:hover, #slideShowArrowLeft:hover {
    opacity: 1;
}

#card1 {
    position: absolute;
    height: 50vh;
    border-radius: 1.25em;
}

#card2 {
    position: absolute;
    opacity: 0;
    height: 50vh;
    border-radius: 1.25em;
}

#card3 {
    position: absolute;
    opacity: 0;
    height: 50vh;
    border-radius: 1.25em;
}

/* fussball.de */

#widget1 {
    border-radius: 1.25em;
    height: max-content;
}

#scrollTable {
    height: 50vh;
    overflow-y: scroll;
}

#leagueTable {
    height: 50vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive */

@media screen and (max-width: 550px) {
    body {
        font-size: 70%;
    }
}

/* animation classes */

.animationSlideShowRightOut {
    animation: slideShowRightOut 1s linear;
}

.animationSlideShowLeftIn {
    animation: slideShowLeftIn 1s linear;
}

.animationSlideShowRightIn {
    animation: slideShowRightIn 1s linear;
}

.animationSlideShowLeftOut {
    animation: slideShowLeftOut 1s linear;
}

.animationStartLineTop {
    animation: startLineTop 1s linear;
}

.animationStartLineBottom {
    animation: startLineBottom 1s linear;
}

.animationTimeLineMain {
    animation: timeLineMain 1s linear;
}

.animationTimeLineAside {
    animation: timeLineAside 1s linear;
}

.animationShowText {
    animation: showText 4s linear;
}

.animationHideText {
    animation: hideText 1s linear;
}

.animationSocialMediaArrow {
    animation: socialMediaArrow 1s linear;
}

.animationShowSocialMedia {
    animation: showSocialMedia 1s linear;
}

.animationShowSubpage {
    animation: showSubpage 1s linear;
}

.animationHideSubpage {
    animation: hideSubpage 1s linear;
}

/* keyframes */

@keyframes slideShowRightOut {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }
    to {
        transform: translate(10vh, 0);
        opacity: 0;
    }
}

@keyframes slideShowLeftIn {
    from {
        transform: translate(-10vh, 0);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideShowRightIn {
    from {
        transform: translate(10vh, 0);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideShowLeftOut {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }
    to {
        transform: translate(-10vh, 0);
        opacity: 0;
    }
}

@keyframes startLineTop {
    from {
        width: 0;
        right: 0;
    } 
    to {
        width: 100%;
        right: 0;
    }
}

@keyframes startLineBottom {
    from {
        width: 0;
        left: 0;
    } 
    to {
        width: 100%;
        left: 0;
    }
}

@keyframes timeLineMain {
    from {
        height: 0;
    }
    to {
        height: 100vh;
    }
}

@keyframes timeLineAside {
    from {
        width: 0;
    }
    to {
        width: 15%;
    }
}

@keyframes showText {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hideText {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes socialMediaArrow {
    from {
        left: 0;
    }
    to {
        left: 100%;
    }
}

@keyframes showSocialMedia {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}

@keyframes showSubpage {
    from {
        height: 0;
    }
    to {
        height: 65vh;
    }
}

@keyframes hideSubpage {
    from {
        height: 65vh;
    }
    to {
        height: 0;
    }
}

/* subpages */

.subPage {
    background: #6E2594;
    position: absolute;
    bottom: -310vh;
    width: 100%;
    height: 65vh;
    border-radius: 1.5em 1.5em 0 0;
    opacity: 0.95;
    z-index: 2;
}

.subPage h1 {
    text-align: center;
    font-size: 2em;
    margin-top: 5vh;
    margin-bottom: 12vh;
}

.subPage p {
    text-align: center;
    font-size: 1.6em;
}

#contactPage {
    visibility: hidden;
}

#imprintPage {
    background: #00072D;
    visibility: hidden;
    opacity: 1;
    font-family: consolas;
}

#imprintPage p {
    color: white;
}

#arrowSubpage {
    position: absolute;
    top: 350vh;
    right: 5%;
    width: 7%;
    transform: rotate(-90deg);
    visibility: hidden;
    cursor: pointer;
    z-index: 3;
}

/* xit */

#xitLogo {
    height: 15vh;
    cursor: pointer;
}

#imprintBottom {
    position: absolute;
    height: 20vh;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 700px) {
    #xitLogo {
        left: 44%;
    }
    #arrowSubpage {
        width: 5%;
    }
    #leagueTable {
        width: 80%;
        transform: translateX(10%);
    }
}

@media screen and (min-width: 1000px) {
    #xitLogo {
        left: 47%;
    }
    #arrowSubpage {
        width: 2%;
    }
    #leagueTable {
        width: 70%;
        transform: translateX(15%);
    }
}