body {position: relative; float: left; width: 100%; margin: 0; background-color: #000; font-family: "Roboto Mono", monospace;}

.first {width: 100%; background-color: #000000; color: #ffffff; position: fixed; z-index: 10;padding: 20px 0px 30px 0px; text-align: center; height: 82px; float: left;}

.second {width: 100%; min-height: 520px; background-color: #101010; position: relative; padding: 0px 0px 100px 0px; float: left; margin-top: 132px; padding-bottom: 200px;}
.second div {min-height: 100%;}

footer div {float: left; margin: 10px 10px 10px 10px;}

.third {width: 100%; background-color: #000000; color: #ffffff; position: fixed; padding: 0px 0px 30px 0px; text-align: center; clear: both; float: left; bottom: 0px;}

.fourth {width: 100%; height: 1px; background-color: #000000; color: #ffffff; position: relative; text-align: center; clear: both; float: left; bottom: 0px;}


.chat-container {width: 99%; margin: auto; font-size: 28pt;}

.user-message {padding: 10px; margin: 5px; border-radius: 5px; border: 1px solid #ddd; background-color: #007bff; color: white; text-align: right; max-width: 50%; float: right; clear: both;}
.bot-message {padding: 10px; margin: 5px; border-radius: 5px; border: 1px solid #ddd; background-color: #333; text-align: left; max-width: 60%; float: left; clear: both; color:white;}

.bot-message-zagadka { padding: 10px; margin: 5px; border-radius: 5px; border: 1px solid #ddd; background-color: #333; color: white; text-align: left; max-width: 60%; float: left; clear: both; font-weight: bold;}
.bot-message-link {padding: 10px; margin: 5px; border-radius: 5px; border: 1px solid #ddd; background-color: #333; text-align: left; max-width: 60%; float: left; clear: both; text-decoration: underline; color: #00f;}

input {width: 80%; padding: 10px; margin-top: 5px;}

.afirst {position: absolute; width: 340px; height: 120px; left: 3px; margin-top: -8px; font-size: 28pt; margin-left: 5px;}
.asfirst {position: absolute; width: 410px; height: 120px; right: 0px; top: 0px;}
.ffirst {width: 95px; height: 95px; margin: 30px 20px 10px 20px; background-color: #fff; float: left;}
.ifirst {width: 100%; height: 100%;}

audio {margin: auto; position: relative;}

h6 {position: absolute; top: -999999px;}

.acts-data {max-width: 400px; max-height: 400px; position: relative; float: left; margin: 20px 20px 20px 20px;}

.data-container {display: flex; flex-wrap: wrap;}

.data-container * {position: relative; float: left; margin: 20px 20px 20px 20px;}

.tile {position: relative; width: 640px; min-height: 800px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease-in-out; color: white; margin: 10px 10px 10px 10px; float: left;}
.tile figure {width: 480px;  object-fit: cover; margin: auto;}
.tile img {width: 100%; height: 100%;}
.tile .content {padding: 10px;}
.tile h3 {margin: 5px 0 5px; text-align: center;}


.acts {position: relative; width: 640px; height: 100%; border: 1px solid #ddd; border-radius: 8px; color: white; margin: 10px 10px 10px 10px; background-color: #000;}


.zdjecia {width: 100%; height: 100%;}

.transcript-btn {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-size: 20pt;
}

.transcript-btn:hover {background-color: #0056b3;}

.transcript {
    margin-top: 10px;
    padding: 10px;
    background-color: #000;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .acts {
        width: 96%;
    }
    .transcript {
        width: 96%;
    }
}




.hfirst {margin-top: -35px;}

p {font-size: 22pt;}
h1 {font-size: 38pt; margin-left: -40px;}
h3 {font-size: 36pt;}
.content {font-size: 24pt;}
td {padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}

audio {width: 500px; height: 50px;}






.fifth {width: 100%; height: 580px; background-color: #000; color: #fff; position: relative; float: left;}
.fifth.hidden {display: none;}
.przycisk {width: 440px; height: 180px; float: left; margin: 20px 19px 20px 19px; border: 1px solid #ddd; border-radius: 60px; background: #007; background: radial-gradient(#04e, #106);}
.przycisk span {font-size: 24pt; color: #fff; font-weight: bold;}

.third.hidden {display: none;}
#userInput {font-size: 36pt; width: 96%; margin: auto;}

.przycisk:hover {cursor: pointer; background: none; background-color: #055; }

.zer {position: absolute; z-index: 10; width: 100%; height: 100%; background-color: #101010; display: block;}
.zer div {margin-top: 10%; text-align: center;}
#full {width: 700px; height: 500px; margin: auto; color: #fff; font-size: 50pt; margin: 20px 19px 20px 19px; border: 1px solid #ddd; border-radius: 60px; background: #007; background: radial-gradient(#04f, #10b);}
.startowy {font-size: 64pt; color: #fff; top: 200;}

.hidden {display: none;}

a {color: #0bf;}