/* ###################### */
/* ### General layout ### */
/* ###################### */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {
    scroll-behavior: smooth; /* Scroll smoothly to jump marks */
}

body {
    background-color: #f2f2f2;
    font-family: Montserrat, sans-serif;
    margin: 0 auto;
    /* For the alignment of the footer */
    display: flex;
    flex-direction: column;
}

header{
    background-image: url('../images/running-landscape.jpg');
    background-size: cover; /* Image takes up the entire size of the header */
    background-position: center; /* Center the image */
    height: 80vh; /* Set the height of the header to 80% of the screen */
}

/* Used for the text within the image */
.header-container {
    padding: 20px; /* Inner distance */
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    height: 65vh; /* Set the height of the header-container to 65% of the screen */
}

nav {
    background-color: #fff;
}

main {
    padding: 10px;
    /* For the alignment of the footer */
    width: 100%;
    flex: 1 0 auto;
}

main, .nav-container {
    margin: 0 auto;
    max-width: 1080px;
}

/* Box Layout */
section, aside {
    background-color: #fff;
    border: 1px solid #e0e0e6;
    box-shadow: 2px 2px 5px silver;
    width: 100%;
    padding: 20px; /* Inner distance */
    border-radius: 10px;
    margin: 10px auto; /* 10px top/bottom, auto left/right for centering */
}

section:hover, aside:hover {
    box-shadow: 2px 2px 8px silver;
}

.flex-container {
    display: flex;
}

.pacerechner-section {
    max-width: 400px;
    margin-right: 20px;
}

footer {
    background-color: #fff;
    color: #1c1b22;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* For the alignment of the footer */
    flex-shrink: 0;
}

footer a {
    color: #1c1b22;
}

footer p {
    text-align: center;
}

/* ############# */
/* ### Fonts ### */
/* ############# */

h1 {
    font-size: 45px;
    text-align: center;
}

h1:not(.header-container > h1) {
    animation: textwelle 3s;
}

.header-container > h1 {
    font-size: 70px;
    color: white;
    text-align: center;
    width: 90vw;
}

h2 {
    font-size: 30px;
    text-align: center;
}

h2:first-child {
    margin-top: 0px;
}

.legalNotice > h2 {
    text-align: left;
}

h1, a {
    overflow-wrap: break-word;
}

/* ################################ */
/* ### Buttons and Input Fields ### */
/* ################################ */

/* Buttons and summary (tempo table) */
input[disabled] {
    color: #000;
    /* -webkit-text-fill-color: #000; */
}

button {
    background-color: #fff;
    color: #1c1b22;
}

button:hover:not(.active-button) {
    background-color: #f0f0f4;
}

button, summary {
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
}

summary, .active-button {
    background-color: #1c1b22;
    color: white;
}

.toggle-button {
    border: 1px solid #1c1b22;
    flex: 1;
}

.toggle-buttons {
    display: flex;
    margin-bottom: 20px;
}

.toggle-left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0px;
}

.toggle-right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
}

.calculatorInputAndLabel input {
    font-size: 16px;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
}

.calculatorInputAndLabel input[disabled] {
    opacity: 1;
}

.calculatorInputAndLabel label {
    text-align: center;
    display: block;
    margin-bottom: 10px;
}

/* ################### */
/* ### Tempo Table ### */
/* ################### */

/* Used for Time Table */
details {
    margin-bottom: 10px;
}

summary {
	border-radius: 3px;
	box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);
    cursor: pointer;
}

/* Triangle not shown - Style for Webkit-Browser */
/*summary::-webkit-details-marker {
	display: none;
}*/
/* Instead of Triangle closed */
/*summary::before {
	content: '+ ';
}*/
/* Instead of Triangle open */
/*details[open] summary::before {
	content: '- ';
}*/

/* Styling the summary in case of open 'details' */
details[open] summary {
	border-radius: 3px 3px 0 0;
}

.details-container {
    background-color: #fff;
	margin: 0;
	padding: .25rem 1rem;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);
}

.tempoTable {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

.tempoTable tr:hover, .tempoTable tr:nth-child(even):hover {
    background-color: #cfcfd8;
}

.tempoTable tr:nth-child(even) {
    background-color: #f0f0f4;
}

.tempoTable th, .tempoTable td {
    width: 50%;
}

.tempoTable tr:not(:last-child) {
    border-bottom: 1px solid black;
}

/* ###################### */
/* ### Training Zones ### */
/* ###################### */

/* Table */
.trainingZones {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
}

/* Inside distance for training zones */
.trainingZones th, .trainingZones td {
    padding: 12px;
}

/* Color gradient for training zones */
.trainingZones tr:nth-child(1) { /* Header row */
    color: white;
    background-color: #1c1b22;
}

.trainingZones tr:nth-child(2) {
    background-color: #4D80FF;
}

.trainingZones tr:nth-child(3) {
    background-color: #6B9EFF;
}

.trainingZones tr:nth-child(4) {
    background-color: #85B3FF;
}

.trainingZones tr:nth-child(5) {
    background-color: #99CCFF;
}

.trainingZones tr:nth-child(6) {
    background-color: #B3D9FF;
}

.trainingZones tr:nth-child(7) {
    background-color: #D0E6FF;
}

.trainingZones tr:nth-child(8) {
    background-color: #E6F2FF;
}

@keyframes textwelle {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	70% {
		transform: scale(1.25);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@media (max-width: 1080px) {
    main {
        padding-top: 0px;
    }
}

@media (max-width: 700px) {
    .header-container > h1 {
        font-size: 45px;
    }
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 22px;
    }
    header{
        height: 50vh; /* Set the height of the header to 50% of the screen */
    }
    /* Used for the text within the image */
    .header-container {
        height: 40vh; /* Set the height of the header-container to 40% of the screen */
    }
    .flex-container {
        flex-direction: column; /* Containers displayed one below the other */
    }
    .pacerechner-section {
        max-width: none;
    }
    .hideInMobileView {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #15141a;
    }
    section, aside {
        border: 1px solid #23222b;
        background-color: #1c1b22;
        box-shadow: 2px 2px 5px black;
    }
    section:hover, aside:hover {
        box-shadow: 2px 2px 8px black;
    }
    nav {
        background-color: #1c1b22;
    }
    button {
        background-color: #2b2a33;
        color: #fff;
    }
    button:hover:not(.active-button) {
        background-color: #222128;
    }
    summary, .active-button {
        background-color: #15141a;
        color: white;
    }
    .toggle-button {
        border: 1px solid #15141a;
    }
    .toggle-left {
        border-right: 0px;
    }
    .toggle-right {
        border-left: 0px;
    }    
    input[disabled] {
        color: #fff;
        /* -webkit-text-fill-color: #fff; */
    }
    .details-container {
        background-color: #2b2a33;
    }
    .tempoTable tr:hover, .tempoTable tr:nth-child(even):hover {
        background-color: #1c1b22;
    }
    .tempoTable tr:nth-child(even) {
        background-color: #3a3944;
    }
    .trainingZones tr {
        color: black;
    }
    footer {
        background-color: #1c1b22;
        color: white;
    }
    footer a {
        color: white;
    }
}