html{
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    position: relative;
    height: 100%;
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
main {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.navigation {
    background-color: none;
    margin-bottom: 20px;
}
@media (max-width: 800px){
    .navigation{
        display: flex;
        justify-content: space-between;
    }
}
.navigation ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    text-align: center;
}
.navigation li{
    height: 31px;
}
.navigation li:not(:first-child, :last-child) a::after {
    content: '';
    width: 0%;
    height: 3px;
    background: rgb(177, 0, 0);
    display: block;
    margin: 0 auto;
    transition: 0.5s ease;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px; /* odsuwa pasek o 2px od dolnej krawędzi tekstu */
}
.navigation li:not(:first-child) a:hover::after{
    width: 100%;
}
.navigation a{
    height: 100%;
    text-decoration: none;
    padding: 0;
    margin: 10px 17px;
    display: flex;
    align-items: center;
    color: rgb(0, 0, 0);
    font-weight: bold;
    position: relative;
}
.navigation li:not(:first-child) a{
    font-size: clamp(1rem, 0.912rem + 0.235vw, 1.2rem);
    margin-top: 12px;
}
.navigation li:last-child a{
    margin-top: 15px;
    position: static;
}
.navigation li:first-child{
    margin-right: auto;
}
.navigation li:first-child img{
    margin-top: 22px;
    margin-left: auto;
    width: clamp(18rem, 16.7647rem + 6.5882vw, 25rem);
}
.sidebar {
    top: 0;
    right: 0;
    position: fixed;
    height: 100%;
    width: 250px !important;
    z-index: 999;
    background-color: rgba(188, 188, 188, 0.4);
    backdrop-filter: blur(15px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: auto;
}
.sidebar li{
    padding: 15px;
    list-style: none;
    font-weight: bold;
    width: 100%;
}

.sidebar li:not(:first-child) a{
    font-size: clamp(1rem, 0.912rem + 0.235vw, 1.2rem);
}
.sidebar li:first-child a{
    font-size: clamp(1.2rem, 1.068rem + 0.353vw, 1.5rem);
    font-style: italic;
    margin: auto;
}
.sidebar a{
    text-decoration: none;
    color: black;
    width: 100% !important;
}

@media(max-width: 800px) {
    .hideonmobile{
        display: none;
    }
}
@media(min-width: 800px) {
    .hideonpc{
        display: none;
    }
}
@media(max-width: 400px) {
    .sidebar{
        width: 100% !important;
    }
}
.poczatek {
    display: flex;
    flex-direction: column;
}
.dragonlogo{
    position: absolute;
    height: clamp(3rem, 2.735rem + 1.412vw, 4.5rem);
    margin: 3px auto;
}
.logo{
    width: 100%;
    display: flex;
    justify-content: center;
}
.ptext {
    display: flex;
    align-items: center;
}
.tekstglowny{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 3%;
}
.tekstglowny h1{
    font-size: clamp(1.5rem, 0.607rem + 2.381vw, 2.75rem);
}
.tekstglowny p{
    font-size: clamp(1rem, 0.286rem + 1.905vw, 2rem);
    margin: 10px 0;
}
.poczatek img {
    width: 20%;
    height: auto;
    margin: 0 10% 0 5%;
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.5));
}
@media (max-width: 800px){
    .poczatek img{
        display: none;
    }
}
.wicemistrz{
    background-color: rgb(177, 0, 0);
    display: flex;
    text-align: center;
    height: fit-content;
}
.button0{
    background-color: rgb(233, 233, 233); /* Green */
    border-style: solid;
    color: black;
    border-color: rgb(0, 0, 0);
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: clamp(0.8rem, 0.657rem + 0.381vw, 1rem);
    font-weight: bolder;
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
@media (min-width: 1500px){
    .button0:hover{
        border-color: rgb(177, 0, 0);
        background-color: rgb(177, 0, 0);
        color: white;
        cursor: pointer;
    }
}

.wicemistrz{
    background: url(Grafiki/bg0.png);
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10% 5%;
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.5));
}
@media (max-width: 800px){
    .wicemistrz{
        padding: 20% 8%;
    }
}
.wicemistrz div{
    margin: 10px 30px;
}
.text1 {
    justify-content: center;
    width: 90%;
    height: fit-content;
    border-radius: 12px;
    padding: 5%;
    color: rgb(0, 0, 0);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}
.text1 h2{
    font-size: clamp(1.65rem, 1.257rem + 1.048vw, 2.2rem);
    margin-bottom: 10px;
}
.text1 p{
    font-size: clamp(1rem, 0.571rem + 1.143vw, 1.6rem);
}
.img1{
    border-radius: 12px;
}
.img1 a{
    display: flex;
    justify-content: center;
}
.img1 ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-direction: column;
}
.img1 li{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: 0.5s filter ease;
}
@media (min-width: 1500px){
    .img1 li:hover{
        filter: brightness(70%);
    }
}
.img1 img{
    height: auto;
    width: 75%;
    display: flex;
    margin: 10px 0;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    align-items: center;
}

@media (max-width: 800px){
    .wicemistrz{
        flex-direction: column;
    }
    .img1 ul{
        flex-direction: row;
    }
    .img1 {
        width: 100%;
        height: 100%;
    }
    .img1 img{
        margin: 0;
    }
}
.cotof1 {
    position: relative;
    padding: 0 28%;
}
.text2{
    display: flex;
    flex-direction: column;
    background-color: rgb(233, 233, 233);
    border-radius: 12px;
    width: fit-content;
    margin:auto;
    padding: 5%;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.text2 h2, .text2 p{
    text-align: center;
}
.text2 h2{
    font-size: clamp(1.65rem, 1.257rem + 1.048vw, 2.2rem);
    margin-bottom: 10px;
}
.text2 p{
    font-size: clamp(1rem, 0.571rem + 1.143vw, 1.6rem);
}
@media (max-width: 800px){
    .cotof1{
        padding: 0 10%;
    }
}
.sociale{
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 10% 20%;
    background: url(Grafiki/bg01.png);
    background-size: cover;
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.5));
}
@media (max-width: 800px) {
    .sociale{
        padding: 21% 10%;
    }
    .social img{
        height: auto;
        margin-top: 10px;
    }
}
.text3{
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    width: fit-content;
    margin: auto;
    padding: 5%;
    border-radius: 12px;
    height: fit-content;
    margin: 15px;
}
.text3 h2{
    font-size: clamp(1.65rem, 1.257rem + 1.048vw, 2.2rem);
    margin-bottom: 10px;
}
.text3 p{
    font-size: clamp(1rem, 0.571rem + 1.143vw, 1.6rem);
}
.social li{
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 15px 8px;
}
.social ul{
    display: flex;
    justify-content: center;
}
.social img{
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
    height: clamp(3.125rem, 1.691rem + 7.647vw, 11.25rem);
    width: 100%;
}
@media (min-width: 1500px){
    .social img:hover{
        transform: scale(1.2);
        cursor: pointer;
    }
}
.giradiv {
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.giradiv h2{
    margin: auto;
    font-size: clamp(1.25rem, 0.5rem + 4vw, 2rem);
    
}
.giradiv h3{
    margin: 15px auto;
    font-size: larger;
}
.giratel {
    display: flex;
    align-items: center;
    justify-content: center;
}
.giradiv img{
    height: 110px;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5));
}
.girasocial {
    display: flex;
    justify-content: center;
}
.girasocial i{
    margin: 20px 6px;
    font-size: clamp(2.8rem, 2.3rem + 1.333vw, 3.5rem);
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
}
@media (min-width: 1500px) {
    .girasocial i:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
}
.girasocial a{
    height: fit-content;
    width: fit-content;
}
.giradiv div{
    margin: 2px;
}
.numery i{
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5));
    margin: 15px 2px;
}
.numery p{
    font-size: clamp(0.9rem, 0.686rem + 0.571vw, 1.2rem);
}
@media (max-width:350px){
    .giraimg{
        display: none;
    }   
}
.giradiv{
    margin: 15px;
}
.textstartonas{
    padding: 0 20%;
    margin: 10px 0;
}
@media (max-width: 800px){
    .textstartonas{
        padding: 0 2%;
    }
}
.textstartonas h1{
    font-size: clamp(1.25rem, 1.065rem + 0.988vw, 2.3rem);
    text-align: center;
}
.textstartonas p{
    font-size: clamp(0.85rem, 0.709rem + 0.753vw, 1.65rem);
    margin: 10px 0;
    text-align: center;
}
.whydr{
    display: flex;
    align-items: center;
    background: url(Grafiki/bg0.png);
    background-size: cover;
    padding: 12% 5%;
    filter: drop-shadow(0.4vh 0.8vh 1.2vh rgba(0, 0, 0, 0.5));
}
@media (max-width:800px){
    .whydr{
        padding: 20% 5%;
    }
}
.whydrtext{
    text-align: center;
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    width: fit-content;
    padding: 5%;
    border-radius: 1.4vh;
    box-shadow: 0 0.8vh 1.6vh 0 rgba(0,0,0,0.2), 0 0.6vh 2vh 0 rgba(0,0,0,0.19);
    width: 80%;
}
.whydrtext h1{
    font-size: clamp(1.25rem, 1.065rem + 0.988vw, 2.3rem);
    margin-bottom: 10px;
}
.whydrtext p{
    font-size: clamp(0.85rem, 0.709rem + 0.753vw, 1.65rem);
}
.whydr img{
    filter: drop-shadow(0.3vh 0.6vh 0.9vh rgba(0, 0, 0, 0.5));
    width: 35%;
    height: auto;
    margin: auto;
    margin-left: 30px;
}
@media (max-width: 800px){
    .whydr img{
        display: none;
        margin-left: 0;
    }
    .whydr{
        justify-content: center;
        padding: 25% 0;
    }
}
.image1{
    display: flex;
    justify-content: center;
}
.image2{
    display: flex;
    justify-content: center;
}
.imgmain img{
    margin: 0;
    height: 100%;
    width: auto;
    transition: transform 0.5s ease;
    transform: scale(1.01);
}
.image1 img{
    position: relative;
    width: fit-content;
}
.image2 img{
    position: relative;
    width: fit-content;
}
@media (min-width: 1500px){
    .imgmain img:hover{
        transform: scale(1.12);
    }
}
.imgcontainer{
    overflow: hidden;
    position: relative;
    height: clamp(8rem, 5.529rem + 13.176vw, 22rem);
}
.imgmain{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    width: fit-content;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.imgcontainer p{
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    color: rgb(233, 233, 233);
    font-size: clamp(1.25rem, 0.875rem + 0.6vw, 1.625rem);
    text-align: center;
    z-index: 1;
    pointer-events: none;
}
#maks{
    filter: brightness(1.2);
}
.meetus{
    text-align: center;
    font-size: clamp(0.8rem, 0.535rem + 1.412vw, 2.3rem);
    margin: 30px 0;
    background-size: cover;
    background-position: 0;

}
.onasp p{
    margin-bottom: 10px;
    font-size: clamp(0.5rem, 0.368rem + 0.706vw, 1.25rem);
}
.buttononas {
    display: flex;
    justify-content: center;
}
.osiagnieciatext{
    display: flex;
    width: 100%;
    justify-content: center;
    margin: auto;
}
.osiagniecia{
    background: url(Grafiki/bg01.png);
    background-size: cover;
    padding: 10% 5%;
    filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.5));
}
.osiagniecia h1{
    font-size: clamp(1.5rem, 1.235rem + 1.412vw, 3rem);
    text-align: center;
    margin-bottom: 30px;
}
.osiagnieciabg {
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    border-radius: 12px;
    margin: 0 3%;
    padding:  0 2%;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
@media (max-width: 800px){
    .osiagnieciatext{
        flex-direction: column;
        height: auto;
        margin: 0 auto;
        justify-content: center;
    }
    .osiagnieciabg{
        width: 60%;
        margin: 15px auto;
        height: fit-content;     
    }
    .osiagniecia{
        padding: 15% 5%;
    }
    .osiagniecia h1{
        margin-top: 0;
    }
}
@media(max-width:600px){
    .osiagniecia{
        padding: 20% 5%;
    }
}
@media (max-width: 500px){
    .osiagniecia{
        padding: 35% 5%;
    }
}
@media (max-width: 360px){
    .osiagniecia{
        padding: 50% 5%;
    }
}
.osiagnieciabg2 {
    background: linear-gradient(-45deg, rgba(255, 0, 0, 0.7), rgb(233, 233, 233), rgba(255, 0, 0, 0.7), rgb(233, 233, 233));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    border-radius: 12px;
    margin: 0 3%;
    padding:  0 2%;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
@media(max-width: 800px) {
    .osiagnieciabg2{
        margin: 15px auto;
        height: fit-content;
        width: 60%;
    }
}
.achtext h2{
    font-size: clamp(1.25rem, 1.065rem + 0.988vw, 2.3rem);
    text-align: center;
}
.achtext p{
    font-size: clamp(0.85rem, 0.709rem + 0.753vw, 1.65rem);
    text-align: center;
    overflow-wrap: break-word;
    margin: 3px 10px;
}
.achtext2 h2{
    font-size: clamp(1.25rem, 1.065rem + 0.988vw, 2.3rem);
    text-align: center;
}
.achtext2 p{
    font-size: clamp(0.85rem, 0.709rem + 0.753vw, 1.65rem);
    text-align: center;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}