@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Boldonse&display=swap');

.blur {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

html nav {
    position: relative;
    z-index: 2;
}

html nav, #nav-bottom {
    background-color: ghostwhite;
}

.lang-btn {
    cursor: pointer;
}

#nav-top {
    background-color: #222222;
}

#nav-top-hamburger {
    fill: beige;
}

#nav-bottom-right a svg {
    height: 1.5rem;
    fill: var(--color-red-800);
    margin-bottom: 0.25rem;
}

#nav-dropdown {
    display: block;
    bottom: 0;
    position: absolute;
    background-color: ghostwhite;
    border: 3px solid black;
    border-top: none;
    width: fit-content;
    z-index: -1;
    border-radius: 0 0 20px 20px;

    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-property: transform, z-index;
}

#nav-dropdown > a {
    display: block;
    padding: 1rem 10rem;
    text-align: center;
    border-bottom: 1px solid black;
    color: var(--color-red-800); /* From tailwindcss */
    font-size: x-large;
}

#nav-dropdown > a:last-child {
    border: none;
}

html nav .dropdown-open {
    transform: translateY(100%);
}

html body {
    background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" enable-background="new 0 0 1600 1026" xml:space="preserve" viewBox="1 1 1599.95 1026.03"><path fill="%23ECD9C8" opacity="1.000000" stroke="none" d=" M433.000000,1027.000000 C431.933136,1027.000000 430.866302,1027.000000 429.332092,1026.584229 C426.893524,1026.038574 424.922272,1025.908447 422.997131,1025.446045 C424.323029,1023.606018 425.449036,1021.926697 426.908112,1020.619080 C435.443817,1012.969482 444.482117,1005.830017 452.556580,997.726868 C469.430298,980.793030 486.020447,963.563354 502.334564,946.088745 C520.049255,927.113892 535.468323,906.237671 549.471680,884.459961 C565.186523,860.020569 579.167358,834.595886 590.514343,807.696228 C600.747498,783.436951 609.739014,758.792053 616.139465,733.315979 C620.413818,716.302612 623.637207,698.953735 626.125366,681.582336 C628.802429,662.891602 631.220337,644.026306 631.665283,625.187927 C632.225830,601.450256 631.273376,577.626465 629.840942,553.908264 C628.713257,535.235535 626.771484,516.509338 623.562317,498.090698 C619.437378,474.416443 614.346680,450.857635 608.431335,427.564148 C603.254456,407.178253 596.924988,387.034454 590.083008,367.135040 C581.820984,343.105713 573.231689,319.132111 563.404602,295.713287 C552.966187,270.837585 541.255798,246.472626 529.451416,222.200500 C520.384583,203.557159 510.885925,185.072891 500.558868,167.104324 C481.463776,133.879868 461.635712,101.076363 442.031860,68.145813 C441.308044,66.929985 439.731903,66.221588 438.612000,65.165146 C438.671082,65.053581 438.899872,65.160378 438.870697,64.808784 C438.366425,63.982155 437.891327,63.507122 437.177673,62.813324 C433.608398,56.514198 430.632874,50.204025 426.877045,44.398659 C417.439270,29.810867 407.648956,15.451162 398.000000,1.000001 C686.029358,1.000000 974.058777,1.000000 1262.511841,1.411676 C1264.918701,10.586500 1266.670532,19.409529 1268.922363,28.103085 C1283.193604,83.200981 1296.985474,138.432251 1312.056152,193.311737 C1336.004395,280.518402 1363.979248,366.492249 1395.948120,451.073730 C1416.187744,504.622864 1437.405396,557.868835 1460.288086,610.333252 C1481.774292,659.595764 1505.955200,707.685852 1529.183105,756.180420 C1531.174316,760.337463 1530.786621,762.841492 1528.003296,766.303711 C1507.509888,791.796631 1489.486816,818.967834 1473.766235,847.651306 C1447.548584,895.487488 1429.307861,946.198547 1419.435303,999.856873 C1417.787598,1008.812073 1417.120239,1017.947754 1416.000000,1027.000000 C1415.555542,1027.000000 1415.111084,1027.000000 1414.246094,1026.577637 C1412.163452,1026.106201 1410.501587,1026.013794 1408.839600,1026.013672 C1175.114258,1026.005737 941.388977,1026.004028 707.663696,1026.002686 C617.871887,1026.002197 528.080078,1025.997314 438.288300,1026.044922 C436.525360,1026.045898 434.762756,1026.667847 433.000000,1027.000000 z"/><path fill="%23B41728" opacity="1.000000" stroke="none" d=" M397.533020,1.000001 C407.648956,15.451162 417.439270,29.810867 426.877045,44.398659 C430.632874,50.204025 433.608398,56.514198 437.281219,63.149986 C438.048828,64.190392 438.474365,64.675377 438.899872,65.160370 C438.899872,65.160378 438.671082,65.053581 438.657074,65.534637 C440.756683,70.971161 442.868042,75.927597 444.984253,80.881958 C479.105499,160.763428 507.270264,242.619934 526.831055,327.339935 C535.936584,366.777130 543.067627,406.570343 547.815918,446.753967 C553.610474,495.791199 555.926514,545.005798 554.049988,594.388550 C551.989380,648.613159 544.903198,702.145935 532.410217,754.964722 C520.230957,806.457092 503.062103,856.240723 480.854523,904.238770 C461.180176,946.761780 437.947083,987.294861 410.623535,1025.788330 C347.212372,1025.885376 284.264893,1025.916504 221.317383,1025.937988 C147.878250,1025.963013 74.439125,1025.979614 1.000000,1026.000000 C1.000000,684.437683 1.000000,342.875336 1.000000,1.000000 C133.021851,1.000000 265.043945,1.000000 397.533020,1.000001 z"/><path fill="%23636363" opacity="1.000000" stroke="none" d=" M1416.468506,1027.000000 C1417.120239,1017.947754 1417.787598,1008.812073 1419.435303,999.856873 C1429.307861,946.198547 1447.548584,895.487488 1473.766235,847.651306 C1489.486816,818.967834 1507.509888,791.796631 1528.003296,766.303711 C1530.786621,762.841492 1531.174316,760.337463 1529.183105,756.180420 C1505.955200,707.685852 1481.774292,659.595764 1460.288086,610.333252 C1437.405396,557.868835 1416.187744,504.622864 1395.948120,451.073730 C1363.979248,366.492249 1336.004395,280.518402 1312.056152,193.311737 C1296.985474,138.432251 1283.193604,83.200981 1268.922363,28.103085 C1266.670532,19.409529 1264.918701,10.586500 1262.967773,1.411676 C1375.634888,1.000000 1488.269775,1.000000 1600.942627,1.000000 C1600.942627,343.000000 1600.942627,685.000000 1600.942627,1027.000000 C1539.569214,1027.000000 1478.253174,1027.000000 1416.468506,1027.000000 z"/><path fill="%23FEFEFD" opacity="1.000000" stroke="none" d=" M411.087189,1025.718018 C437.947083,987.294861 461.180176,946.761780 480.854523,904.238770 C503.062103,856.240723 520.230957,806.457092 532.410217,754.964722 C544.903198,702.145935 551.989380,648.613159 554.049988,594.388550 C555.926514,545.005798 553.610474,495.791199 547.815918,446.753967 C543.067627,406.570343 535.936584,366.777130 526.831055,327.339935 C507.270264,242.619934 479.105499,160.763428 444.984253,80.881958 C442.868042,75.927597 440.756683,70.971161 438.598022,65.646202 C439.731903,66.221588 441.308044,66.929985 442.031860,68.145813 C461.635712,101.076363 481.463776,133.879868 500.558868,167.104324 C510.885925,185.072891 520.384583,203.557159 529.451416,222.200500 C541.255798,246.472626 552.966187,270.837585 563.404602,295.713287 C573.231689,319.132111 581.820984,343.105713 590.083008,367.135040 C596.924988,387.034454 603.254456,407.178253 608.431335,427.564148 C614.346680,450.857635 619.437378,474.416443 623.562317,498.090698 C626.771484,516.509338 628.713257,535.235535 629.840942,553.908264 C631.273376,577.626465 632.225830,601.450256 631.665283,625.187927 C631.220337,644.026306 628.802429,662.891602 626.125366,681.582336 C623.637207,698.953735 620.413818,716.302612 616.139465,733.315979 C609.739014,758.792053 600.747498,783.436951 590.514343,807.696228 C579.167358,834.595886 565.186523,860.020569 549.471680,884.459961 C535.468323,906.237671 520.049255,927.113892 502.334564,946.088745 C486.020447,963.563354 469.430298,980.793030 452.556580,997.726868 C444.482117,1005.830017 435.443817,1012.969482 426.908112,1020.619080 C425.449036,1021.926697 424.323029,1023.606018 422.653839,1025.537720 C422.176331,1026.307861 422.088165,1026.653931 422.000000,1027.000000 C418.638702,1027.000000 415.277435,1027.000000 411.767029,1026.698975 C411.440979,1026.171265 411.264069,1025.944580 411.087189,1025.718018 z"/><path fill="%23362A1E" opacity="1.000000" stroke="none" d=" M433.457947,1027.000000 C434.762756,1026.667847 436.525360,1026.045898 438.288300,1026.044922 C528.080078,1025.997314 617.871887,1026.002197 707.663696,1026.002686 C941.388977,1026.004028 1175.114258,1026.005737 1408.839600,1026.013672 C1410.501587,1026.013794 1412.163452,1026.106201 1413.912720,1026.577637 C1087.305298,1027.000000 760.610596,1027.000000 433.457947,1027.000000 z"/><path fill="%235A000A" opacity="1.000000" stroke="none" d=" M410.623535,1025.788330 C411.264069,1025.944580 411.440979,1026.171265 411.308960,1026.698975 C274.333344,1027.000000 137.666672,1027.000000 1.000000,1026.500000 C74.439125,1025.979614 147.878250,1025.963013 221.317383,1025.937988 C284.264893,1025.916504 347.212372,1025.885376 410.623535,1025.788330 z"/><path fill="%23362A1E" opacity="1.000000" stroke="none" d=" M422.437500,1027.000000 C422.088165,1026.653931 422.176331,1026.307861 422.607788,1025.870117 C424.922272,1025.908447 426.893524,1026.038574 428.932373,1026.584229 C426.958344,1027.000000 424.916656,1027.000000 422.437500,1027.000000 z"/><path fill="%23FEFEFD" opacity="1.000000" stroke="none" d=" M438.870697,64.808777 C438.474365,64.675377 438.048828,64.190392 437.519775,63.368752 C437.891327,63.507122 438.366425,63.982155 438.870697,64.808777 z"/></svg>');
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Montserrat', sans-serif !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    font-weight: bold;
    overflow-x: hidden;
}

.page-content {
    margin-bottom: auto;
    width: 100%;
    padding: 2.5em 8em;
    /*flex: 1; Destroyed videoplayer*/
    overflow-x: auto;
}

html .mpowerx {
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(107, 35, 29);
}

html input {
    max-width: 90%;
}

html table input {
    max-width: fit-content !important;
}

html input:not([type="submit"]) {
    background-color: transparent;
    border: 1px solid black;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
}

html input[type="submit"] {
    cursor: pointer;
}

html a:not(.btn) {
    text-decoration: none;
}

html .link {
    color: dodgerblue;
}

html .link:hover {
    color: rgb(0, 115, 255);
}

html .btn {
    border-radius: 3px;
    padding: 0.25em 0.5em;
    cursor: pointer;
    color: white;
}

html .btn-success {
    background-color: rgb(0, 152, 54);
}

html .btn-info {
    background-color: rgb(0, 115, 255);
}

html .btn-warning {
    background-color: rgb(255, 136, 0);
}

html .btn-error {
    background-color: rgb(226, 0, 0);
}

html .alert {
    display: inline-block;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    margin: 0.5em 0;
    color: white;
}

html .alert-success {
    background-color: rgb(0, 152, 54);
}

html .alert-info {
    background-color: rgb(0, 115, 255);
}

html .alert-warning {
    background-color: rgb(255, 136, 0);
}

html .alert-error {
    background-color: rgb(226, 0, 0);
}

html .video-player {
    aspect-ratio: 16/9;
}

html video {
    max-height: 40em;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/*.video-info, .video-player, .video-title-container {
    width: 70%;
}*/

html .video-container {
    width: 70%;
}

html .video-recommendation-item {
    width: 20%;
}

html .video-recommendation-img {
    width: 100%;
    aspect-ratio: 16/9;
}

html .video-recommendation-img img {
    /*width: 100%;*/
    max-height: 100%;
}

html table td, th {
    padding: 0.25rem 2rem;
    text-align: center;
}

html table tr {
    border-bottom: 1px solid black;
}

/**
Hide elements that are loaded by AlpineJS until Alpine is ready
 */
[x-cloak] {
    display: none; !important;
}

.grid-3 {
    display: grid;
    grid-template-columns: 15rem auto 30%;
    grid-gap: 1rem;
}

/**
<= medium container
 */
@media only screen and (max-width: 900px) {
    .grid-3 {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 638px) {
    #nav-bottom-items {
        display: block !important;
    }
}

@media only screen and (max-width: 638px) {
    html .page-content {
        margin-bottom: auto;
        padding: 0.5em 0.25em;
    }

    html .video-container {
        width: 95%;
    }

    html .video-recommendation-item {
        width: 30%;
    }
}