* { box-sizing: border-box; margin: 0px; }
*::after, *::after { box-sizing: border-box; }
a { font: inherit; color: unset; }
html { font-family: sans-serif}
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.2rem; }
.duzyText { font-size: 3rem; }
p { margin-bottom: 0.5rem; }
li { margin-bottom: 0.3rem; }
@media screen and (width > 600px) { .duzyText { font-size: 5rem; } }
@media screen and (width >= 700px) { .duzyText { font-size: 6.5rem; } }
@media screen and (width >= 900px) { .duzyText { font-size: 7.5rem; } }
@media screen and (width >= 1100px) { .duzyText { font-size: 10rem; } }

.spacer { flex: 1; }

.headerFooterCommon {
    width: 100%; height: 4.5rem; min-height: 1.5rem; padding: 0.2rem 0.8rem;

    display: flex; flex-direction: row; gap: 0.4rem; align-items: center;
}

footer {
    background-color: #ccc; border-top: 1px solid #ddd;

    font-size: 1.2rem;
}

header {
    position: sticky; top: 0px; z-index: 10;

    background-color: white; border-bottom: 1px solid #ddd; font-size: 1.2rem;
}

.headerLogo { height: 100%; text-decoration: none; }
.logoLink { height: 100%; }

.headerLink {
    height: 100%;
    padding: 0px 0.2em;
    border-radius: 4px;
    min-width: 5em;

    display: flex; align-items: center; justify-content: center;

    transition: color 1s, background-color 1s;
    text-decoration: none;
    cursor: pointer;
}
.headerLink:hover {
    background-color: #eef;
    color: rgb(0, 0, 185);
}
@media screen and (width <= 600px) { .headerLink { font-size: 1.0rem; } }

.backToTopButton {
    position: fixed; right: 0.5em; bottom: 4em; z-index: 9;
    padding: 0.7em;

    background-color: white;
    border: 2px solid #ddd;
    border-radius: 4px;

    cursor: pointer;
    /* transition: right 2s; */
}

.backToTopMarker {
    top: 0px; width: 0px; height: 0px;
}

.bigLogo {
    /* height: 100%; */
    opacity: 1.0;
    animation: 3s alternate slide-in;
}
@keyframes slide-in {
    from {
        translate: -100vw 0;
        opacity: 0.0;
    }
    to {
        translate: 0 0;
        opacity: 1.0;
    }
}

.searchContainer {
    width: 100%; padding: 1rem 0px;

    display: flex; flex-direction: column; gap: 1rem;
    align-items: center; justify-content: center;
}

.searchBar {
    width: calc(min(90%, 40rem));
    padding: 1rem;
    border: 2px solid #aaa; border-radius: 4px;
    background-color: #eee;

    font-size: 1.5rem;

    transition: border 1s;
}
.searchBar:focus { outline: none; border: 2px solid #87d3ff; }
.searchBar:hover { border: 2px solid #87d3ff; }
@media screen and (width <= 600px) { .searchBar { font-size: 1rem; } }

@media screen and (width >= 50rem) {
    .headerFooterCommon {
        font-size: 1.5rem;
        padding: 0.2rem 4.0rem;
    }
    .backToTopButton {
        bottom: 5rem;
    }
}

.bgGray { background-color: #eee; }

.genericContainer {
    width: 100%; padding: 1rem 0px;

    display: flex; flex-direction: column; gap: 1rem;
    align-items: center; justify-content: center;
}

#logoContainer {
    width: 100%; height: 40vh;
    display: flex; justify-content: center; align-items: center;
    background-color: #eee;
}
@media screen and (width <= 600px) { #logoContainer { height: 10vh; } }

#contentDiv {
    min-height: calc(100vh - 9rem);
}

.animCommon {
    width: 200px;
    height: 200px;
	pointer-events: none;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
.animRainbow {
	animation-name: arbow;
}
@keyframes arbow {
	0% {
		scale: 0%;
	}
	60% {
		scale: 0%;
		opacity: 0.0;
	}
	80% {
		scale: 100%;
		opacity: 1.0;
	}
	90% {
		scale: 100%;
		opacity: 1.0;
	}
	100% {
		scale: 100%;
		opacity: 0.0;
	}
}
.animPill {
	scale: 70%;
	animation-name: apill;
}
@keyframes apill {
	0% {
		translate: -70% 0;
		opacity: 0.0;
	}
	20% {
		translate: -70% 0;
		opacity: 1.0;
	}
	80% {
		translate: -10% 0;
		opacity: 1.0;
	}
	100% {
		translate: -10% 0;
		opacity: 0.0;
	}
}
.animCrab {
	scale: 70%;
	animation-name: acrab;
}
@keyframes acrab {
	0% {
		translate: 50% 0;
		opacity: 0.0;
	}
	20% {
		translate: 50% 0;
		opacity: 1.0;
	}
	80% {
		translate: 10% 0;
		opacity: 1.0;
	}
	100% {
		translate: 10% 0;
		opacity: 0.0;
	}
}

.containerAnimInfo {
    width: 70%;
    margin-bottom: 1.25cm;
}
#boxGeneralInformation { scroll-margin-top: 80px; }

.animContainer { float:right; width: 400px; height: 200px; transform: translate(100px); }
@media screen and (width <= 600px) { .animContainer { float: none; width: 70%; transform: translate(35px); } }