Олександр

ОЛЕКСАНДР
БОЙКО
Front-Back end програміст
ПРО МЕНЕ НАВЧАННЯ
Народився 18.04.1992 на Львівщині. Мої Школа
хороші якості це харизм, точність та велика 1998 — 2009
мотивація до саморозвитку . (Ненавиджу Середній бал: 8/12
Русню!!!)
Технікум
КОНТАКТ 2010 — 2013
Комп’ютерний технік
Номер телефону:
[відкрити контакти](див. вище в блоці «контактна інформація»)

E-MAIL:
ДОСВІД
[відкрити контакти](див. вище в блоці «контактна інформація») Webos (Програміст) [Польща] 2016 — 2020
Програмування сайтів

ХОББІ Linpez (Агенство праці) 2020 — 2021
Контакт з клієнтом. Рекрутація на власному опрограмуванні
Програмування
Веб дизайн
Фріланс (Допомога мігрантам в евросоюзі) 2021 —
Штучний інтелект
Допомога мігрантам в євросоюзі, перенесення бізнес до країн Європи для
Фінансові ринки
громадян УкраЇни, Африки та деяких краЇн Азії.
Криптовалюти
Технології
Психологія
НАВИЧКИ
Python 85%

JavaScript 70%

HTML 100%

CSS 100%

Українська 100%

Польська 85%

Англійська 75%
 Приклад back end файл app.py
"""
This module implements a web application for Klaudia International, an intercontinental
trading.
"""
import os
import datetime
from flask import Flask, render_template, request, redirect, make_response, url_for
from flask_mail import Mail, Message
from blueprints.gold_blueprint import gold_blueprint
from blueprints.diamonds_blueprint import diamonds_blueprint
from blueprints.lithium_blueprint import lithium_blueprint
from blueprints.coffee_blueprint import coffee_blueprint
from blueprints.tea_blueprint import tea_blueprint
from blueprints.spices_blueprint import spices_blueprint
# ... import other blueprints

app = Flask(__name__, static_folder='static')

app.register_blueprint(gold_blueprint)
app.register_blueprint(diamonds_blueprint)
app.register_blueprint(lithium_blueprint)
app.register_blueprint(coffee_blueprint)
app.register_blueprint(tea_blueprint)
app.register_blueprint(spices_blueprint)
# ... register other blueprints

app.config["MAIL_SERVER"] = "smtp.gmail.com"
app.config["MAIL_PORT"] = 465
app.config["MAIL_USE_SSL"] = True
app.config["MAIL_USERNAME"] = os.environ.get("EMAIL_USER")
app.config["MAIL_PASSWORD"] = os.environ.get("EMAIL_PASS")
mail = Mail(app)

RULES_PRIVACY_ACCEPTED = 'RULES_PRIVACY_ACCEPTED'

def set_cookie_expiration():
"""Set the expiration date for the privacy policy acceptance cookie."""
expires = datetime.datetime.now()
expires = expires + datetime.timedelta(days=365)
return expires.strftime("%a, %d %b %Y %H:%M:%S GMT")

@app.route('/')
def home():
"""Render the home page."""
rules_privacy_accepted = bool(request.cookies.get(RULES_PRIVACY_ACCEPTED))
return render_template('home.html', rules_privacy_accepted=rules_privacy_accepted)

@app.route('/rules_privacy')
def rules_privacy():
"""Return the rules and privacy policy as an HTML snippet."""
return render_template('rules_privacy.html')

@app.route('/accept_rules_privacy', methods=['POST'])
def accept_rules_privacy():
"""Set the rules & privacy acceptance cookie and redirect to home."""
response = make_response(redirect(url_for('home')))
expires = set_cookie_expiration()
response.set_cookie(RULES_PRIVACY_ACCEPTED, 'true', expires=expires)
return response

@app.route('/about')
def about():
"""Render the about page."""
return render_template('about.html')

@app.route('/contact')
def contact():
"""Render the contact page."""
return render_template('contact.html')

@app.route("/send-email", methods=["POST"])
def send_email():
"""Contact form for e-mail"""
name = request.form["name"]
email = request.form["email"]
subject = request.form["subject"]
message_body = request.form["message"]

msg = Message(
"New Contact Form Submission",
sender=email,
recipients=["[відкрити контакти](див. вище в блоці «контактна інформація»)"],
)
msg.body = f"Name: {name}\nEmail: {email}\nSubject:
{subject}\n\nMessage:\n{message_body}"
mail.send(msg)

return redirect("/contact")

@app.context_processor
def override_url_for():
"""
This function is a context processor that adds a `static_url` variable
to the context of all templates. This variable contains the URL for the
`static` folder, so that we can use it in template files to link to
 static assets.

Example usage in a template file:

<link rel="stylesheet" href="{{ static_url }}css/styles.css">

Returns:
dict: A dictionary containing the `static_url` variable.
"""
return dict(static_url='/static/')

@app.context_processor
def inject_static_url():
"""Inject the static URL to the application context."""
return dict(static_url='/static/')

@app.context_processor
def inject_css_and_js():
"""Inject CSS and JS file URLs for each page to the application context."""
css_files = {
'base': 'base.css',
'rules_privacy': 'rules_privacy.css',
'home': 'home.css',
'about': 'about.css',
'contact': 'contact.css',
'gold': 'gold.css',
'diamonds': 'diamonds.css',
'lithium': 'lithium.css',
'coffee': 'coffee.css',
'tea': 'tea.css',
'spices': 'spices.css',
}
js_files = {
'base': 'base.js',
'rules_privacy': 'rules_privacy.js',
'home': 'home.js',
'about': 'about.js',
'contact': 'contact.js',
'gold': 'gold.js',
'diamonds': 'diamonds.js',
'lithium': 'lithium.js',
'coffee': 'coffee.js',
'tea': 'tea.js',
'spices': 'spices.js',
}
context = {}
for page, css in css_files.items():
context[f'{page}_css'] = f'<link rel="stylesheet" href="{{{ static_url }}}{css}">'
for page, js_file in js_files.items():
context[f'{page}_js'] = f'<script src="{{{ static_url }}}{js_file}"></script>'
 return context

if __name__ == '__main__':
app.run(debug=True)

Приклад використання blueprints
"""
This module implements a connection to Coffee selling pages.
"""
from flask import Blueprint, render_template

coffee_blueprint = Blueprint('coffee', __name__, template_folder='templates')

@coffee_blueprint.route('/coffee')
def coffee():
"""Render the coffee page."""
return render_template('coffee/coffee.html')

@coffee_blueprint.route('/coffee_partner1')
def coffee_partner1():
"""Render the coffee partner1 page."""
return render_template('coffee/coffee_partner1.html')

@coffee_blueprint.route('/coffee_partner2')
def coffee_partner2():
"""Render the coffee partner2 page."""
return render_template('coffee/coffee_partner2.html')

@coffee_blueprint.route('/coffee_partner3')
def coffee_partner3():
"""Render the coffee partner3 page."""
return render_template('coffee/coffee_partner3.html')

Приклад front end файл base.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="static/img/logo.webp">
<title>{% block title %}{% endblock %}</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"; rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">;
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
{% block css %}
 {% if style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/') }}{{ style }}">
{% endif %}
{% endblock %}
</head>

<body>
<header>
<div class="logo">
<h1 aria-label="Klaudia International">Klaudia International</h1>
<a href="{{ url_for('home') }}" class="home-link" alt="Home"></a>
</div>
<div class="menu-button">
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
<span id="span4"></span>
<span id="span5"></span>
</div>
<div class="menu">
<nav>
<ul>
<li><a href="#" aria-label="Link to the Catalog page, dropdown menu">Catalog <i
class="fa fa-sort-down"></i></a>
<ul class="submenu">
<li id="gold-link"><a href="{{ url_for('gold.gold') }}" aria-label="Link to the
Gold page">Gold</a></li>
<li id="diamonds-link"><a href="{{ url_for('diamonds.diamonds') }}"
aria-label="Link to the Diamonds page">Diamonds</a></li>
<li id="lithium-link"><a href="{{ url_for('lithium.lithium') }}"
aria-label="Link to the Lithium page">Lithium</a></li>
<li id="coffee-link"><a href="{{ url_for('coffee.coffee') }}"
aria-label="Link to the Coffee page">Coffee</a></li>
<li id="tea-link"><a href="{{ url_for('tea.tea') }}" aria-label="Link to the
Tea page">Tea</a></li>
<li id="spices-link"><a href="{{ url_for('spices.spices') }}"
aria-label="Link to the Spices page">Spices</a></li>
</ul>
</li>
<li><a href="{{ url_for('about') }}" aria-label="Link to the About Us page">About
Us</a></li>
<li><a href="{{ url_for('contact') }}" aria-label="Link to the Contact
page">Contact</a></li>
</ul>
</nav>
</div>
<div class="menu-overlay"></div>
</header>
<main>
{% block content %}
{% endblock %}
</main>
 <footer>
<p>© 2023 Klaudia International. All rights reserved.<br>
<a href="/rules_privacy">Rules & Privacy Policy</a>
</p>

<div class="modal">
<div class="modal-content">
{% include 'rules_privacy.html' %}
</div>
</div>
</footer>

<script src="{{ url_for('static', filename='js/base.js') }}"></script>
{% block js %}
<script src="{{ url_for('static', filename='js/rules_privacy.js') }}"></script>
{% endblock %}
{% if js %}
{% for script in js %}
<script src="{{ url_for('static', filename='js/') }}{{ script }}"></script>
{% endfor %}
{% endif %}
</body>

</html>

Приклад JavaScript файл base.js
// Pobieramy елементи сторінки
let menuButton = document.querySelector('.menu-button'); // Menu button
let menu = document.querySelector('.menu'); // Menu
let menuOverlay = document.querySelector('.menu-overlay'); // Menu overlay
let spans = document.querySelectorAll('.menu-button span'); // Menu button lines

let catalogLink = document.querySelector('a[href="#"]'); // Katalog links
let submenu = document.querySelector('.submenu'); // Submenu
let submenuLinks = document.querySelectorAll('.submenu li'); // Submenu links
let isMenuActive = false; // Flag if menu is active
let isSubmenuActive = false; // Flag if submenu is active

// Add eventListener for menu button
menuButton.addEventListener('click', function () {
// Change menu
isMenuActive = !isMenuActive;
menu.classList.toggle('active', isMenuActive);
menuOverlay.style.display = isMenuActive ? 'block' : 'none';

// Modify menu button look to X
if (isMenuActive) {
spans[0].style.opacity = "0";
spans[1].style.transform = "translateY(0.45rem) rotate(45deg)";
spans[1].style.opacity = "1";
spans[2].style.opacity = "0";
spans[3].style.transform = "translateY(-0.45rem) rotate(-45deg)";
 spans[3].style.opacity = "1";
spans[4].style.opacity = "0";
} else {
spans[0].style.opacity = "1";
spans[1].style.transform = "none";
spans[1].style.opacity = "0";
spans[2].style.opacity = "1";
spans[3].style.transform = "none";
spans[3].style.opacity = "0";
spans[4].style.opacity = "1";
}
});

// Add eventListener to menu button
menuOverlay.addEventListener('click', function () {
// Hiding menu and overlay when cklick on overlay
menu.classList.remove('active');
menuOverlay.style.display = 'none';
isMenuActive = false;
// Reseting menu button to standard look
spans[0].style.opacity = "1";
spans[1].style.transform = "none";
spans[1].style.opacity = "0";
spans[2].style.opacity = "1";
spans[3].style.transform = "none";
spans[3].style.opacity = "0";
spans[4].style.opacity = "1";
});

// Add eventListener to Catalog
catalogLink.addEventListener('click', function (event) {
event.preventDefault(); // Запобігаємо стандартній дії
isSubmenuActive = !isSubmenuActive; // Змінюємо стан підменю

if (isSubmenuActive) {
// If Submenu is active, open it
submenu.style.maxHeight = submenu.scrollHeight + 'px';
setTimeout(() => {
submenuLinks.forEach((link, index) => {
link.style.animation = "slideInFromRight 0.5s ease-out forwards";
link.style.animationDelay = index * 0.1 + "s";
link.style.visibility = "visible";
});
}, 10);
} else {
// If submenu is not active, hide it
submenu.style.maxHeight = '0';
submenuLinks.forEach((link) => {
link.style.animation = "none";
link.style.visibility = "hidden";
});
}
});
// Open modal window on click in footer
document.addEventListener('DOMContentLoaded', function () {
var link = document.querySelector('footer a[href="/rules_privacy"]');
if (link) {
console.log('Found the link, adding event handler');
link.addEventListener('click', function (event) {
console.log('Link clicked, showing modal');
event.preventDefault();
showPrivacyModal();
});
} else {
console.log('Did not find the link');
}
// Some testing
function showPrivacyModal() {
var modal = document.querySelector('.modal');
if (modal) {
modal.classList.add('visible');
} else {
console.error('Could not find the modal element');
}
}
});

Приклад CSS файл base.css
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

header {
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
position: fixed;
top: 0;
width: 100%;
height: auto;
background-color: #242b3a;
filter: drop-shadow(0.3rem 0.6rem 0.9rem black);
}

.logo {
top: 0;
left: 0;
display: flex;
position: relative;
 z-index: 4;
filter: drop-shadow(0.2rem 0rem 0.3rem black);
flex-direction: row;
align-items: center;
height: 5rem;
width: auto;
justify-content: flex-start;
}

.logo h1 {
left: 5.5rem;
height: 5rem;
width: 40vw;
position: absolute;
display: flex;
color: white;
font-family: 'Yu Gothic UI Semibold', ui-serif;
top: 0;
align-items: center;
flex-direction: row;
margin-block-start: 0;
margin-block-end: 0;
}

.home-link {
top: 0;
left: 0;
height: 5rem;
width: 5rem;
position: absolute;
display: block;
background: url("/static/img/logo.webp") no-repeat center;
background-size: contain;
cursor: pointer;
}

.menu-button {
z-index: 5;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
position: absolute;
cursor: pointer;
width: 2rem;
height: 2rem;
filter: drop-shadow(0.2rem 0rem 0.3rem black);
}

.menu-button span {
display: block;
 background: white;
height: 0.2rem;
width: 100%;
transition: all 0.3s ease;
}

.menu-button span:nth-child(odd) {
opacity: 1;
}

.menu-button span:nth-child(even) {
opacity: 0;
}

.menu {
height: 100vh;
width: auto;
right: -100%;
z-index: 5;
position: fixed;
background-color: #12151d;
font-family: 'Yu Gothic UI Semibold', ui-serif;
transition: right 0.3s ease-out;
color: #fff;
top: 5rem;
}

.menu.active {
right: 0;
}

.menu nav {
display: flex;
height: 100%;
width: auto;
flex-direction: column;
align-items: flex-start;
}

.menu nav ul {
display: block;
height: 100%;
width: auto;
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 1.8rem;
}

.menu nav ul li {
width: 100%;
height: auto;
 transition: color 0.3s ease;
position: relative;
}

::marker {
content: "\2022";
}

.menu nav ul li a {
color: #fefefe;
cursor: pointer;
transition: color 0.3s ease;
text-decoration: auto;
display: flex;
height: auto;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0.3rem;
margin-left: 1rem;
text-shadow: 0.2rem 0rem 0.2rem black;
}

.menu nav ul li a i {
content: "\f107";
position: relative;
margin-left: 1rem;
font-size: 1.9rem;
}

.submenu {
padding-right: 2rem;
overflow: hidden;
transition: height 0.3s ease-out;
max-height: 0;
}

.submenu li {
text-decoration: none;
font-family: 'Yu Gothic UI Semibold', ui-serif;
opacity: 0;
}

.submenu li.show {
opacity: 1;
}

@keyframes slideInFromRight {
0% {
transform: translateX(100%);
opacity: 0;
 }

100% {
transform: translateX(0);
opacity: 1;
}
}

.menu-overlay {
z-index: 4;
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}

footer {
z-index: 3;
display: flex;
width: 100%;
position: relative;
bottom: 0;
height: auto;
background-color: #242b3a;
flex-direction: column;
align-items: center;
}

footer p {
margin-block-start: 2%;
margin-block-end: 2%;
display: block;
z-index: 3;
font-family: 'Yu Gothic UI Semibold', ui-serif;
text-align: center;
color: #ffffff;
}

footer a {
color: #ffffff;
}

.modal {
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
position: fixed;
 z-index: 1;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}

.modal.visible {
display: flex;
flex-direction: column;
align-items: center;
}

.modal-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Yu Gothic UI Semibold', ui-serif;
border: 0.1rem solid #888;
background-color: #161a23;
position: fixed;
z-index: 52;
}

::-webkit-scrollbar {
width: 2rem;
justify-items: stretch;
background-color: transparent;
}

::-webkit-scrollbar-track {
width: auto;
height: 100%;
border-radius: 1rem;
background-color: transparent;
}

::-webkit-scrollbar-track-thumb {
border-radius: 1rem;
background-color: #888;
}

::-webkit-scrollbar-track-thumb:hover {
background-color: #555;
}

/* Ekstra małe gadżety (telefony, do 480px [w] 799px [h]) */
@media only screen and (max-width: 479px) {

/* Style dla ekstra małych gadżetów */
.logo h1 {
font-size: 1.3rem;
}
 .menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 1.3rem;
}

.menu nav ul li a i {
font-size: 1.2rem;
}

::marker {
font-size: 1.7rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 0.9rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 1rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* Małe gadżety (telefony, 480px do 640px) */
@media only screen and (min-width: 480px) and (max-width: 639px) {

/* Style dla malych gadżetów */
.logo h1 {
font-size: 1.3rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 1.6rem;
}
 .menu nav ul li a i {
font-size: 1.6rem;
}

::marker {
font-size: 2.5rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 0.9rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 1rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* Średnie gadżety (tablety, 640px do 720px) */
@media only screen and (min-width: 640px) and (max-width: 719px) {

/* Style dla średnich gadżetów */
.logo h1 {
font-size: 1.7rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 1.9rem;
}

.menu nav ul li a i {
font-size: 1.9rem;
}

::marker {
font-size: 2.7rem;
}
 footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 1.25rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 1.5rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* Duże gadżety (małe laptopy, 720px do 1080px) */
@media only screen and (min-width: 720px) and (max-width: 1079px) {

/* Style dla dużych gadżetów */
.logo h1 {
left: 5.5rem;
font-size: 1.7rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 1.4rem;
}

.menu nav ul li a i {
font-size: 1.4rem;
}

::marker {
font-size: 2.2rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 1.1rem;
}
 .modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
font-size: 1rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* Ekstra duże gadżety (desktopy, 1080px do 1440px) */
@media only screen and (min-width: 1080px) and (max-width: 1439px) {

/* Style dla ekstra dużych gadżetów */
.logo h1 {
font-size: 1.7rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 1.7rem;
}

.menu nav ul li a i {
font-size: 1.5rem;
}

::marker {
font-size: 2.6rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 1.2rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
font-size: 1.4rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
 height: 62vh;
}
}

/* Extra extra duże gadżety (duże desktopy, 1440px do 1920px) */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {

/* Style dla extra extra dużych gadżetów */
.logo h1 {
font-size: 1.9rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 2.5rem;
}

.menu nav ul li a i {
font-size: 2.1rem;
}

::marker {
font-size: 3rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 1.5rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 1.6rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* Full HD monitory (1920px do 2560px) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

/* Style dla Full HD monitorów */
 .logo h1 {
font-size: 2rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 2.7rem;
}

.menu nav ul li a i {
font-size: 2.7rem;
}

::marker {
font-size: 3.7rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 1.9rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 2rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* 2K monitory (2560px do 3840px) */
@media only screen and (min-width: 2560px) and (max-width: 3839px) {

/* Style dla 2K monitorów */
.logo h1 {
font-size: 3rem;
}

.menu-button {
right: 2vw;
}
 .menu nav ul li a {
font-size: 4.8rem;
}

.menu nav ul li a i {
font-size: 4.3rem;
}

::marker {
font-size: 5rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 2.7rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 2.9rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}

/* 4K monitory i telewizory (3840px i więcej) */
@media only screen and (min-width: 3840px) {

/* Style dla 4K monitorów i telewizorów */
.logo h1 {
font-size: 3rem;
}

.menu-button {
right: 2vw;
}

.menu nav ul li a {
font-size: 5.5rem;
}

.menu nav ul li a i {
font-size: 5.3rem;
}
 ::marker {
font-size: 6rem;
}

footer p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
font-size: 3.7rem;
}

.modal-content {
width: 80vw;
height: 70vh;
margin-top: 15vh;
margin-bottom: 15vh;
font-size: 2.9rem;
}

#acceptPrivacyPolicyForm {
width: 70vw;
height: 62vh;
}
}