/* --- OGÓLNE --- */
* {
    font-size: 17pt;
}

body {
    margin: 0px;
    font-family: "Gill Sans MT", "Basic Sans", "Noto Sans", sans-serif;
    color: white;     
   
    /* Zapewniamy, że tło rozciągnie się na minimum całą wysokość ekranu */
    min-height: 100vh; 
    
    /* Jeden gradient, który robi wszystko na raz */
    background: linear-gradient(
        to bottom,
        #ffffff 0px,         /* Start: biały pasek na samej górze */
        #ffffff 100px,        /* Koniec białego paska (tutaj ma 60 pikseli) */
        #0d1f5dff 60px,      /* Natychmiastowy start pierwszego koloru gradientu */
        #416af4ff calc(100% - 100px), /* Koniec gradientu płynnie przechodzącego w jasny niebieski */
        #ffffff calc(100% - 100px),   /* Natychmiastowe odcięcie do bieli */
        #ffffff 100%         /* Koniec: biały pasek na samym dole */
    );
    
    /* Zapobiega powtarzaniu się tła, jeśli strona będzie bardzo długa */
    background-attachment: fixed; 
}

hr {
    border: 2px solid rebeccapurple;
}

table {
    border-collapse: collapse;
    padding: 0px;
}

td { 
    padding: 0px;
    transition: background-color 1s;
}

/* --- FORMULARZ I INPUTY --- */
input {
    /* Wyłączono uppercase, aby widzieć rzeczywisty wpisywany tekst */
    text-transform: none !important; 
    font-size: 80%;
    /* Szybsza reakcja na zmianę koloru walidacji */
    transition: background-color 0.2s ease-in-out;
}

/* Zapobieganie żółtemu tłu autouzupełniania (Autofill) */
/* Pozwala na poprawne wyświetlanie kolorów zielony/czerwony z JS */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: black !important;
    /* Opóźnienie zmiany koloru tła, by nie nadpisywało walidacji */
    transition: background-color 5000s ease-in-out 0s;
}

.rejestracja td {
    padding: 5px;
}

.t1 {
    color: white;    
    background-color: whitesmoke;
}

#temat {
    background-color: white;
    color: black;
    font-style: italic;
    font-size: 180%;
    padding-top: 10px;
}

/* --- HARMONOGRAM --- */
#harmonogram1 td, #harmonogram2 td {
    padding-left: 15px;
}

.blok, .organizacja{
    width: 15%;
    padding-left: 15px;
    margin-bottom: 5px;
    margin-right: 5px;
    text-align: right;
}

.blok { background-color: #d3efff; }
.organizacja { background-color: white; }
.temat { background-color: #bcdeff; }

.programblok, .programorganizacja, .temat{
    margin-left: 10px;
    padding-right: 15px;
}

.programblok { background-color: #d3efff; }
.programorganizacja { background-color: white; }
.temat { background-color: #bcdeff; }

.dzien1 {
    padding-top: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
}

.dzien1 { background-color: dodgerblue; }


/* --- SEKCJE --- */
#miejsce {
    font-size: 110%;
    font-weight: bold;
    padding-bottom: 10px;
    background-color: white;
    color: black;
    font-family: "Cambria", sans-serif;
}

#menu {
    padding: 25px;
    font-size: 115%;
    background-color: #071b61;
}

#menu a {
    font-style: italic;
    font-size: 115%;
    color: white;
    transition: color 2s, weight 2s;
    padding-left: 1%;
    padding-right: 1%;
}

#menu a:hover { font-size: 120%; }

.spacer { height: 3px; background-color: white; }

#spp {
    color: #00199a;
    background-color: white;
    transition: size 1s, color 1s;
}

#spp-dane { color: black; background-color: white; }
#spp a:hover { font-size: 110%; }
#spp a, a:active, a:visited, a:link { color: black; }

/* --- TREŚĆ --- */
.impcontent, .impcontent2 {
    background-color: red;
    padding: 25px 15px;
    color: white;
    text-align: justify;
}

.content, .contentw {
    padding: 25px 15px;
    text-align: justify;
}

.content { color: black; }
.contentw { color: red; background-color: white; }

.impheader, .impheader2 {
    color: red;
    padding: 13px 15px;
    font-size: 150%;
    font-weight: bold;
    text-align: left;
}

.impheader { background-color: #a22; }
.impheader2 { background-color: red; }

.header {
    padding: 13px 15px;
    font-size: 125%;
    font-weight: bold;
    text-align: center;
    background-color: #bcdeff;
    color: black;
}

.headerw {
    color: #00199a;
    padding: 13px 15px;
    font-size: 150%;
    font-weight: bold;
    text-align: left;
    background-color: red;
}

/* --- ELEMENTY INTERAKTYWNE --- */
.collapsible {
    background-color: purple;
    color: white;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-style: italic;
    font-family: inherit;
    font-size: 85%;
}

.active, .collapsible:hover { background-color: rebeccapurple; }

.akceptcontent { display: none; overflow: hidden; font-size: 70%; } 

.akceptgrid {
    display: grid;
    grid-gap: 10px;
    grid-template-areas: 'check info';
}

#akceptcheck { grid-area: check; }
#akceptinfo {
    grid-area: info;
    text-align: justify;
    margin-right: 10px;
    font-size: 90%;
}

.smalltext { font-style: italic; font-size: 80%; }

.left { margin-left: 15px; margin-right: 5px; text-align: right; }
.middle { text-align: center; }
.right { text-align: left; font-weight: bold; }

ul { list-style-position: inside; margin: 0; }
li { list-style-type: square; text-align: left; }

a { text-decoration: none; transition: size 1s, color 1s; }
a:active, a:visited, a:link { color: purple; font-weight: bold; }
a:hover { color: black; }

img { border: 0; }

#col1, #col3 { width: 22%; }
#col2 { width: 56%; }

#komunikat { background-color: yellowgreen; color: black; }

/* --- RESPONSYWNOŚĆ --- */

@media only screen and (max-width: 600px) {
    * { font-size: 10pt; }
    .content, .contentw { padding: 5px; }
    .header, .headerw { padding: 5px 10px; font-size: 120%; }
    #menu { font-size: 80%; padding: 5px 0; }
    #col1, #col3 { width: 0%; }
    #col2 { width: 100%; }
    #harmonogram1 td, #harmonogram2 td { padding-left: 5px; }
    .godzina1, .godzina2, .godzina3, .godzina4, .godzina5 { width: 20%; padding-left: 3px; }
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
    * { font-size: 12pt; }
    #temat { padding-top: 0px; }
    .impcontent, .impcontent2, .content, .contentw { padding: 5px; }
    .impheader, .impheader2, .header, .headerw { padding: 10px; font-size: 120%; }
    #menu { font-size: 80%; }
    #col1, #col3 { width: 5%; }
    #col2 { width: 90%; }
    #harmonogram1 td, #harmonogram2 td { padding-left: 10px; }
    .godzina1, .godzina2, .godzina3, .godzina4, .godzina5 { width: 20%; }
}

@media only screen and (min-width: 801px) and (max-width: 1200px) {
    * { font-size: 16pt; }
    #temat { padding-top: 5px; }
    .impcontent, .impcontent2, .content, .contentw { padding: 5px; }
    .impheader, .impheader2, .header, .headerw { padding: 10px; font-size: 150%; }
    #menu { font-size: 90%; }
    #col1, #col3 { width: 5%; }
    #col2 { width: 90%; }
}

@media only screen and (min-width: 1201px) and (max-width: 1700px) {
    * { font-size: 16pt; }
    #temat { padding-top: 10px; }
    #menu { font-size: 100%; }
    .impcontent, .impcontent2, .impheader, .impheader2, .content, .contentw, .header { padding: 10px; font-size: 150%; }
    #col1, #col3 { width: 10%; }
    #col2 { width: 80%; }
}