html {
    /*--fonttype: Arial, Helvetica, sans-serif;*/
    --fonttype: "Raleway", serif;

    /*LIGHT THEME*/
    /*--accent: #d6af00;*/
	/*
    --accent: #f7a8d0;
    --bg-color: #ffffff;
    --bg2-color: #aaaaaa;
    --darker: #e63073;	
    --font: #000;
    --title: #f7b2bb;
    --rev-font: #ffff;
    --darkfont: #e63073;
	*/
	--accent: #f7b2bb;
    --bg-color: #ffffff;
    --bg2-color: #aaaaaa;
    --darker: #3b3a3a;	
    --font: #000;
    --title: #8c8b8b;
    --rev-font: #f7b2bb;
    --darkfont: #e63073;
}

header {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: static;
    left: 0;
    top: 0;
    font-family: var(--title);
    color: var(--rev-font);
    text-shadow: 0 0 3em var(--fonttype);
    background-color: var(--darker);
    background-image: linear-gradient(to top, var(--darker) 20%, var(--title));
    border-bottom: var(--rev-font);
	border-bottom-style: groove;
    border-width: 1em;
    min-height: 5;
}

@keyframes headAnim {
	0% {font-size: 200%}
}
header h1 {
	transition: 1s linear;
    animation-name: headAnim;
    animation-duration: 1s;	
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    font-family: var(--fonttype);
    font-size: medium;
}

footer {
    bottom: 0;
    left: 0;
    padding-bottom: 0.1ex;
    margin-top: 1em;
    width: 100%;
    border-top-color: var(--rev-font);
    border-top-style: ridge;
    border-width: 1em;
    text-align: center;
    color: var(--rev-font);
    background-color: var(--darker);
    font-family: var(--fonttype);
}

section {
    margin-top: 2em;
    margin-left: 10%;
    margin-right: 10%;
    font-size: medium;
}

.mainBody {
    font-size: 1.2em;
    font-family: system-ui, serif;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    /*position: relative;*/
    width: 80%;
}

a{
    color: #f27485;
}

fieldset {
    background-color: var(--bg-color);
    color: var(--font);
    /*background-image: linear-gradient(to bottom right, var(--bg-color) 50%, var(--bg2-color));*/
    border-style: groove;
    border-color: var(--accent);
    border-width: medium;
    border-radius: 0.5em;
    text-align: left;
    width: fit-content;
    padding-left: 1em;
    padding-right: 1em;
}

fieldset legend {
    font-style: italic;
    color: var(--font);
    font-weight: bold;
    font-size: x-large;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

h1 {
    font-size: 4em;
    word-spacing: 0.2em;
}

h3 {
    margin: 0;
    color: var(--accent);
}

#hx {
	font-size: 1em;
    padding: 0;
    margin-bottom: 0;
    color: var(--darkfont);
	font-weight: bold;
}

.top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 1.5em;
}

.top fieldset {
    margin-top: 1.5em;
    line-height: 1.5em;
}

.tutors {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1.5em;
    padding-left: 1.5em;
}

.tutors fieldset {
    margin-top: 1em;
}

.info {
    margin-top: 1.5em;
    line-height: 1.5em;
}

.info2 {
    margin-top: 2em;
}

.bottom {
	transition: 1s ease;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    align-items: left;
}

.bottom fieldset {
    margin-right: 2em;
    margin-left: 2em;
    margin-top: 2em;
}

.popis {
    padding-top: 1em;
	text-align: left;
    align-items: start;
}

.casovyPlan {
    text-align: left;
	padding-left: 1em;
}

.popis2 {
	margin-top: 2em;
    padding-left: 2em;
    padding-right: 2em;
    line-height: 1.5em;
    text-align: left;

}

.bottomVertical {
	transition: 1s ease;
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: right;
    align-items: right;
}
@media (min-width:1000px) {
	.bottom {
		transition: 1s ease;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: left;
		align-items: left;
	}
	.bottomVertical {
		transition: 1s ease;
		transform: translateY(0.8em);
		justify-content: right;
		align-items: right;
		right: 0;
		width: 80%;
	}
}
@media (max-width:700px) {
	@keyframes headAnim {
		0% {font-size: 100%}
	}
	header h1 {
		font-size: 100%;
		transition: 0.3s linear;
		animation-name: headAnim;
		animation-duration: 1s;	
	}
}