@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root {
    --primary: #0A3D62; /*#4A90E2*/
    --background: #F5F7FA;
    --text: #040404;
}

::selection {
    color: var(--background);
    background: var(--primary);
}

::-moz-selection {
    color: var(--background);
    background: var(--primary);
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Merriweather', serif;q
}

body {
    background-color: var(--background);
    color: var(--text);
}

html, body {
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

a {
    color: white;
}

li {
    margin: 10px;
}

p {
    text-indent: 2em;
}

/* https://prismic.io/blog/css-button-animations */
button {
    cursor: pointer;
    position: relative;
    overflow:hidden;
    color: white;
}

button:before {
    content: "";
    position: absolute;
    width: 0;
    background : #fff;
    left: 45%;
    height: 2px;
    bottom: 0;
    transition: all .3s;
    opacity: 0.7;
}

button:hover:before {
    width: 100%;
    left:0;
}

.theme_toggle {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 10px;
}

.title {
    width: 100%;
    height: 80px;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.navbar {
    width: 100%;
    height: auto;
    min-height: 60px;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
}

.navbar button {
    height: 36px;
    padding: 10px;
    background: none;
    border: none;
}

.content {
    margin-top: 10px;
    padding-top: 4px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content * {
    margin: 20px;
}

.content p, ul {
    /*max-width: min(360px, 90%);*/
    max-width: min(65ch, 90%);
    overflow-wrap: break-word;
    text-align: justify
}

.content a {
    color: var(--primary);
}

.tile {
    max-width: min(400px, 90%);
    width: 100%;
    height: auto;
    background-color: var(--primary);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    flex-direction: column;
    box-shadow: 4px 4px #072e4a;
}

.tile *::selection {
    color: var(--primary);
    background: var(--background);
}

.tile *::-moz-selection {
    color: var(--primary);
    background: var(--background);
}

/* https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro */
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

/* Usuwanie porgrubienia pierwszego wiersza */
table tr:first-child th {
    font-weight: normal;
}

table td, th {
    max-width: 400px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer {
    margin-top: 60px;
    width: 100%;
    height: auto;
    min-height: 60px;
    background-color: var(--primary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.footer p {
    max-width: 90%;
    word-wrap: break-word;
}

.footer *::selection {
    color: var(--primary);
    background: var(--background);
}

.footer *::-moz-selection {
    color: var(--primary);
    background: var(--background);
}