/* Color Scheme:
Main: #0d1f2d Rich Black
Accent: #ffcc00 Jonquil 
Complement: #7a918d Battleship grey
Others: #93b1a7, #99c2a2
#acc3bb ciemniejszy / #b7ccc6 jasniejszy
Całe tła: #e7eeec Anti flash white
red #e8111a
*/

/* Czarny motyw */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #2A2131;
        color: #ddd;
    }
    section, div.section {
        background-color: #3E3149;
        border: 1px solid #151018;
    }
    article, div.article {
        background-color: #3E3149;
    }
    footer {
        color: #ddd;
    }
    ul.topnav, ul.topnavside {
        background-color: #3e314985;
    }
    ul.sticky {
        background-color: #3e314943;
    }
    ul.topnav li a:hover:not(.active), .upust:hover .upustguzik {
        background-color: #53416283; /* Kolor Podswietlenia */
    }
    ul.topnav .upustcontent {
        background-color: #53416283; /* Color menu jezykowego */
    }
    .grad {
        background: linear-gradient(-135deg, #ff00ee, #e7ef04);
    }
}

/* Biały motyw */

@media (prefers-color-scheme: light) {
    body {
        color: #0d1f2d; /* Cały tekst */
        background-color: #e7eeec; /* Całe tło */
    }
    section, div.section {
        background-color: #acc3bb;
        border: 1px solid #93b1a7;
    }
    article, div.article {
        background-color: #acc3bb;
    }
    footer {
        color: #7a918d; /* Kolor Textu stopki */
    }
    ul.topnav, ul.topnavside {
        background-color: #7a918d60; /* Kolor Paska */
    }
    li.trzykrechy {
        color: #ddd;
    }
    ul.sticky {
        background-color: #7a918d19;
    }
    ul.topnav li a:hover:not(.active), .upust:hover .upustguzik {
        background-color: #93b1a769; /* Kolor Podswietlenia */
    }
    ul.topnav .upustcontent {
        background-color: #93b1a769; /* Color menu jezykowego */
    }
    .grad {
        background: linear-gradient(-135deg, #25bf8c, #fff348);
    }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: medium;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        section, div.section {
            width: 90%;
            padding: 20px;
            margin: 0 auto;
            margin-bottom: 30px;
            border-radius: 15px;
            margin-top: 30px;
        }
        article, div.article {
            flex: 1; /* Równa szerokość */
            padding: 10px;
        }
        section.flex, div.section.flex { /* Sekcja flex dla info */
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;
        }
        h1, .as_h1 {
            text-align: center;
            font-size: 70px;
            color: #ddd;
            text-shadow: 2px 2px 5px #0d1f2d;
            user-select: none;
        }
        h2.mid, h2.center {
            text-align: center;
        }
        h2.welcome, h3.welcome {
            text-align: center;
            margin: 30px;
        }
        h2.left {
            text-align: left;
        }
        h2.right {
            text-align: right;
        }
        h2.left span.right {
            float: right;
            color: rgb(154, 154, 154);
        }
        footer {
            text-align: center;
            margin-bottom: 30px;
        }
        hr {
            width: 80%;
            border-radius: 20px;
        }



        div.sensor {
            width: calc(view-250px);
            height: 100vh;
            opacity: 0;
            position: absolute;
            z-index: -1;
        }



        /* Pasek */

        ul.topnav { 
            list-style-type: none; /* Usuwa kropki/markery */
            margin: 0 auto; /* Margines i padding przywraca do ustawień domyśnych */
            padding: 0; 
            overflow: hidden;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            border-radius: 15px;
            margin-top: 10px;
            position: fixed;
            transition: 0.4s;
            z-index: 10;
            width: 100%;
        }
        ul.topsidenav {
            list-style-type: none;
            margin: 0 auto; /* Margines i padding przywraca do ustawień domyśnych */
            padding: 0; 
            overflow: hidden;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            border-radius: 15px;
            position:fixed;
            background-color: rgba(0, 0, 0, 0.313);
            transition: 0.4s;
            z-index: 10;
            width: 100%;
        }
        ul.sticky {
            margin-top: 1px;
        }
        ul.topnav.sticky li a, .upustguzik {
            padding: 8px 16px;
        }
        ul.topnav li {
            float: left; /* Latająca lista */
        }
        ul.topnav li a, .upustguzik {
            display: inline-block;
            color: #ddd;
            text-shadow: 2px 2px 5px #0d1f2d;
            transition: 0.4s;
            text-align: center;
            padding: 16px 16px;
            text-decoration: none; /* Nie pokazuje hiperlinków */
        }
        ul.topnav li a:hover:not(.active), .upust:hover .upustguzik {
            border-radius: 15px;
            text-shadow: 2px 2px 5px #0d1f2d;
        }
        ul.topnav li a.active {
            background-color: #ffcc00; /* Kolor aktywnego paska */
            border-radius: 15px;
        }
        ul.topnav li a.active:hover {
            background-color: #e9ba00;
        }
        ul.topnav li.right {
            float: right;
        }
        ul.topsidenav li.right{
            float: right;
            font-size: 40px;
        }
        .sideon {
            display: none;
        }
        nav#side {
            display: none;
        }

        
        /* Lista w pasku */

        ul.topnav li.upust {
            display: inline-block;
        }
        ul.topnav .upustcontent {
            display: none;
            position: fixed;
            max-width: 101px;
            border-radius: 15px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 11;
        }
        ul.topnav .upustcontent a {
            color: #ddd;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: center;
        }
        ul.topnav .upustcontent a:hover {
            background-color: #ddd;
        }
        ul.topnav .upust:hover .upustcontent {
            display: block;
        }
        .tlokontener {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -5;
        }
        .tlo {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 2s ease-in-out;
        }
        .tloprezentowane {
            opacity: 1;
            z-index: -1;
            transition: none;
        }
        div.tylne {
            height: 100vh; /* view per hight */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
          }
          
        .button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
          }
          
        .button:hover span {
            padding-right: 25px;
          }
          
        .button:hover span:after {
            opacity: 1;
            right: 0;
          }

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
         }

        .sidenav a, .sidenav p{
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        .sidenav p {
            color: white;
        }
        .sidenav a:HOVER {
            color: #ffffff;
            transition: 0.4s all;
        }
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        li.trzykrechy {
            cursor: pointer;
            font-size: 40px;
            margin: 0 auto;
            padding-left: 10px;
            display: inline-block;
        }
        #top li.right {
            padding: 10px;
        }


        /* Download */

        .downloadbutton {
            padding: 20px;
            background-color: green;
            color: aliceblue;
            text-align: center;
            border-radius: 16px;
            border: 0px;
            cursor: pointer;
            transition: all .4s;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            text-decoration: none;
        }
        .downloadbutton:hover {
            background-color: rgb(0, 98, 0);
        }
        section.download div.flex {
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 50px;
        }
        div.download {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
        }
        div.downloadmid {
            justify-content: center;
            display: flex;
        }
        section.download span {
            float: right;
            color: white;
        }


        
        /* WAW  */
        h2.waw {
            text-align: right;
            margin: 15px;
        }
        h1.waw {
            font-size: 8vh;
        }
        img.logowaw {
            width: 12vw;
        }
        div.article.waw {
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 30px;
        }

        /* Link */
        #link img {
            margin-left: 20px;
            padding: 20px;
        }
        #link .btn {
            border: 1px solid black;
            border-radius: 24px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            transition: 0.7s all;
            overflow: hidden;
        }
        #link .btn:hover {
            background-color: #ffcc00;
        }
        #link a {
            text-decoration: none;
            width: 100%;
        }
        #link div.article {
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 30px;
        }
        #link h1 {
            font-size: 4rem;
            padding-left: 10px;
        }

        /* About */
        #history h3 b{
            color: green;
        }
        #history h3 i{
            color: rgb(157, 157, 157);
        }
        #history h3{
            margin: 10px;
            padding: 20px;
        }
        #history h3 span{
            opacity: 0;
            transition: 1s all;
        }
        #history h3:hover span{
            opacity: 1;
        }
        h3:hover {
            cursor: pointer;
        }
        #about p{
            margin: 10px;
        }
        #about h3{
            margin-left: 10px;
        }
        #history h3.info {
            color: #505050;
            margin: 10px;
            text-align: center;   
        }

        /* Server */
        section#server {
            display: flex;
            justify-content: center;
        }
        section#server div.left {
            margin-right: auto;
        }
        section#server div.middle {
            position: absolute;
            font-weight: bolder;
        }
        section#server div.right {
            font-size: 40px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            user-select: none;
        }
        section#server div.right span:first-child {
            cursor: pointer;
        }
        section#server div.right span#alert_success {
            font-size: 1.5rem;
            opacity: 0;
            transition: 0.4s all;
        }
        button#mc-refresh {
            padding: 25px 50px;
        }
        div.btn-container {
            display: flex;
            justify-content: flex-end;
        }
        p#mc-playerlist {
            margin-left: 30px;
        }
        p#mc-players {
            text-align: center;
        }
        p#mc-motd {
            text-align: center;
        }
        div#server_info p {
            font-size: 1.5rem;
            font-weight: 500;
        }


        /* Screenshots */

    

        /* Login */

        body.log {
            overflow: hidden;
            height: 100vh; /* view per hight */
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;

        }
        .logbox {
            width: 90%;
            height: 90%;
        }
        .logboxa {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        h1.log {
            font-size: 5vw;
            text-align: left;
        }
        body.log div.sectionw {
            border-radius: 32px;
        }
        div.artlog {
            flex: 1;
            height: 90%;
            padding: 15px;
            justify-content: center;
            align-items: center;
            margin: 15px;
            display: flex;
            border-radius: 15px;
        }
        div.artlog.center {
            flex-direction: column;
        }
        img.logo {
            width: 10vw;
            padding-right: 10px;
            transition: 0.4s all;
        }
        img.logo:hover {
            transform: scale(1.15);
        }
        div.frybtn {
            opacity: 0;
        }
        a.frybtn:hover {
            opacity: 1;
        }
        #login h4 {
            color: #ddd;
        }
        #login input, div.submit {
            width: 60%;
            display: block;
            border-radius: 15px;
            height: 3rem;
            margin: 10px;
            padding: 5px 20px;
            background-color: rgba(0, 0, 0, 0.15);
            border: 1px solid black;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            color: #ddd;
        }
        form#logfor {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        div.submit {
            width: 60%;
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        div.submit a {
            text-decoration: none;
            color: #ddd;
            width: 100%;
            height: 100%;
            text-align: center;
            flex: 1;
            justify-content: center;
            align-items: center;
            display: flex;
        } 
        #login input.submit:hover, div.submit:hover {
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.282);
        }
        #login input.submit, div.submit {
            transition: 0.2s all;
            margin-top: 20px;
        }
        .grad {
	        background-size: 400% 400%;
	        /* animation: gradient 15s ease infinite; */
	        height: 100vh;
        }
        a.frybtn.middle {
            display: none;
        }
        .loginbtntop {
            text-decoration: none;
            color: #ddd;
            font-size: 30px;
        }
        body.log div.sectionw {
            background-color: #00000046;
        }
        #login input {
            outline: none;
            transition: 0.2s all;
        }
        #login input:focus {
            border: 1px solid #ddd;
        }
        







        /* Responsywny pasek */

        @media screen and (max-width: 770px) {
            ul.topnav {z-index: -10; display: none;}
            body {font-size: 80%;}
            main {margin: 10px;}
            h1 {font-size: 40px;}
            .sideon {display: block;}
            nav#side {display: block;}
            section.flex, div.section.flex {
                flex-direction: column;
                align-items: flex-start;
            }
            #download section.flex, #download div.section.flex {
                align-items: center;
                flex-direction: unset;
            }
            #download h2 {
                font-size: 4vw;
            }
            #download section.download div.flex {
                flex-direction: column;
            }
            #download section.download div.flex div.article {
                width: 100%;
            }
            #download section.download div.article.download {
                justify-content: center;
            }
            #download section.download div.article a {
                width: 100%;
            }
            section.flex article, div.section.flex div.article {
                justify-content: flex-start;
            }
            div.artlog.leftie {display: none;}
            a.frybtn.middle {display: block;}
            div.article.waw {padding: 0; flex-direction: column;}
            div.artlog {flex-direction: column;}
            h2.waw {text-align: left;}
            img.logowaw {width: 12vh;}
            img.logo {width: 16vh; padding: 0;}
            #link div.article {flex-direction: column;}
            #link h1 {font-size: 4vh;}
            #link img {margin: 0;}
            section.download {gap: 4px;}
            .tlo {top: -25px;};

        }
        @media screen and (min-width: 770px) {
            span#alert_success::after {content: "Copied IP to clipboard";}
        }
        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
          }