body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}




#loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.733);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    z-index: 1000;
}

#content {
    /* Vlastné štýly pre váš obsah */
}

/* Tu pridajte váš CSS pre animovanú načítavaciu obrazovku */
.three-body {
 --uib-size: 70px;
 --uib-speed: 0.8s;
 --uib-color: #5D3FD3;
 position: relative;
 display: inline-block;
 height: var(--uib-size);
 width: var(--uib-size);
 animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
 position: absolute;
 height: 100%;
 width: 30%;
}

.three-body__dot:after {
 content: '';
 position: absolute;
 height: 0%;
 width: 100%;
 padding-bottom: 100%;
 background-color: var(--uib-color);
 border-radius: 50%;
}

.three-body__dot:nth-child(1),
.three-body__dot:nth-child(2),
.three-body__dot:nth-child(3) {
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1) {
 bottom: 5%;
 left: 0;
 transform: rotate(60deg);
}

.three-body__dot:nth-child(1)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite ease-in-out;
 animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
 bottom: 5%;
 right: 0;
 transform: rotate(-60deg);
}

.three-body__dot:nth-child(2)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite
    calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
 bottom: -5%;
 left: 0;
 transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
 top: 0;
 left: 0;
 animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

@keyframes wobble1 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(-66%) scale(0.65);
  opacity: 0.8;
 }
}

@keyframes wobble2 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(66%) scale(0.65);
  opacity: 0.8;
 }
}


/** website *//


body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

header {
    background: #333;
    color: #fff;
    padding-top: 30px;
    padding-bottom: 15px;
}

header h1 {
    margin: 0;
    text-align: center;
}

nav ul {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
    
}

nav ul li {
    display: inline-block;
    margin: 0 120px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
}

main {
    padding: 20px;
}

article {
    margin-bottom: 20px;
    text-align: center;
}

article h2 {
    color: #333;
}

article img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: white;
}

.blog-section {
    display: flex;
    margin-bottom: 20px;
}

.image-container {
    flex: 0 0 30%;
    margin-right: 20px;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.text-container {
    flex: 1;
}

.text-container h2 {
    margin-top: 0;
}

.text-container p {
    margin: 10px 0;
}

.text-container a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #5a5766;
    color: #fff;
    text-decoration: none;
}

.text-container a:hover {
    background-color: #321F8E;
}