@font-face {
    font-family: meu;
    src: url(res/fonts/meu.otf);
}
@font-face {
    font-family: mer;
    src: url(res/fonts/mer.otf);
    
}
:root {
    --deeper-black:#070c12;
    --black: #1A1A1D;
    --white: #ffeafc;
    --purple-dark: #3B1C32;
    --purple-mid: #6A1E55;
    --purple-light: #A64D79;
    --text: 0.8;
    --header-text: 1.0vmax;
    --button-yellow: rgba(249, 217, 35, 1);
    --button-red: rgba(235, 83, 83,1);
    --button-green: rgba(54, 174, 124,1);
    --button-blue: rgba(24, 116, 152,1);
    --daksda: hsl(343, 84%, 54%);
}
body {
    font-size: var(--text);
    font-family: mer;
    color: var(--white);
    background-color: var(--black);
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
a:active, a:visited,a:not(:visited) {
    text-decoration: none;
    color: unset;
}
header {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto;
    font-size: var(--header-text);
    border: 5px solid rgba(255, 234, 252, 0.02);
    background: linear-gradient(50deg,rgba(26,26,29,1) 0%, rgba(44, 19, 36, 0.5) 100%);
    box-shadow: 0 0 10px #000;
    backdrop-filter: blur(50px);
    width: 100vw;
    position: fixed;
    transition: 0.2s ease-in-out;
    z-index: 1;
}
.headerlogo {
    width: 16vw;
    margin: 1vw;
    padding: 0.5vw;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    border: 0px solid rgba(255, 234, 252, 0.01);
    box-shadow: 0 0 0px #000;
}
.headerlogo:hover {
    scale: 1.05;
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    box-shadow: 0 0 5px #000;
}
.headeritems {
    justify-self: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 4vw;
}
.headeritems > a {
    color: var(--purple-light);
    transition: 0.1s ease-in-out;
    padding: 2vh;
    border-radius: 10px;
    border: 0px solid rgba(255, 234, 252, 0.01);
    box-shadow: 0 0 0px #000;
}
.headeritems > a:hover {
    scale: 1.02;
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    box-shadow: 0 0 5px var(--purple-mid);
    backdrop-filter: blur(50px);
}
#uvod {
    margin-top: 30vh;
}
.uvod > h1 {
    margin: 0;
    margin-left: 4vw;
    text-align: left;
    font-size: 36pt;
    font-family: meu;
    background: linear-gradient(270deg, var(--white) 0%, var(--purple-light) 100%); 
    background-size: 400% 400%;
    animation: headerAnimation 7s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.2s ease-in-out;
}
.uvod > h1:hover {
    animation-duration: 1000ms;
}
@keyframes headerAnimation {
                    
    0% { background-position: 0% 50%; }
                      
    50% { background-position: 100% 50%; }
                      
    100% { background-position: 0% 50%; }
                    
}
.content {
    padding-left: 10vw;
    padding-right: 10vw;
}
.uvod > h2 {
    color: var(--purple-light);
    text-align: center;
    font-size: 28pt;
    margin-top: 6vh;
    transition: 200ms ease-in-out;
}
.uvod > h2 > a {
    color: var(--white);
    text-shadow: 0 0 5px var(--white);
}
.uvodcontent {
    display: flex;
    flex-direction: row;
    padding: 1vw;
    justify-content: space-around;
    align-items: center;
}
.uvodcontent > p {
    width: 35vw;
    font-size: var(--text);
    height: 100%;
    text-align:justify;
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    box-shadow: 0 0 5px #000;
    padding: 1vw;
    border-radius: 25px;
}
.uvodcontent > video {
    width: 35vw;
    border-radius: 25px;
    padding: 1vw;
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    box-shadow: 0 0 5px #000;
}
divider {
    background-size: cover;
    display: inline-block;
    width: 100vw;
    aspect-ratio: calc(900/100);
}
divider.one {
    background-image: url(res/section1.svg);
}
.ponuka {
    background-color: var(--deeper-black);
}
.ponukakurzov {
    background: linear-gradient(180deg, #ffeafc 0%, #a64d79 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3vmax;
}
.kurz {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}
.kurz > div {
    width: 60vw;
}
.kurz > div > h1 {
    color: var(--purple-light);
}
.ponukabutton {
    text-align: center;
    width: 11vw;
    height: max-content;
    padding: 2vw;
    border-radius: 35px;
    font-size: 18pt;
    transition: 200ms ease-in-out;
}
.ponukabutton:hover {
    font-family: meu;
    transform: scale(1.1);
}
a.kurz1{
    background-color: var(--button-yellow);
    color: var(--black);
}
a.kurz2{
    background-color: var(--button-blue);
    color: var(--white);
}
a.kurz3{
    background-color: var(--button-green);
    color: var(--white);
}
a.kurz4{
    background-color: var(--button-red);
    color: var(--white);
}
a.kurz1:hover{
    background-color: var(--black);
    color: var(--button-yellow);
}
a.kurz2:hover{
    background-color: var(--white);
    color: var(--button-blue);
}
a.kurz3:hover{
    background-color: var(--white);
    color: var(--button-green);
}
a.kurz4:hover{
    background-color: var(--white);
    color: var(--button-red);
}
divider.two {
    background-image: url(res/section2.svg);
    aspect-ratio: calc(900/150);
}
.produkty {
    background-color: var(--purple-dark);
    display: flex;
    flex-direction: column;
}
.produktobrazok {
    width: 15vw;
}
.produkt {
    display: flex;
    flex-direction: row;
    padding: 1vw;
    align-items: center;
    justify-content: space-between;
}
.produkt > span {
    padding-left: 1.5vw;
}
.produkt > a {
    border: 3px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple-dark) 100%);
    box-shadow: 0 0 5px #000;
    width: 5vw;
    height: 5vw;
    border-radius: 25px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 100ms ease-in-out;
}
.produkt > a:hover {
    box-shadow: 0 0 10px var(--purple-light);
}
.produkt > a > img {
    width: 3vw;
    height: 3vw;
    transition: 100ms ease-in-out;
}
.produkt > a > img:hover {
    transform: scale(1.125);
}
.produkt > div {
    width: max-content;
    aspect-ratio: 1/1;
    border: 10px solid rgba(255, 234, 252, 0.01);
    background: linear-gradient(45deg, rgba(41, 41, 46, 0.2) 0%, rgba(41, 41, 46, 0.8) 100%) ;
    box-shadow: 0 0 5px #000;
    border-radius: 75px;
    display: flex;
    align-items: center;
}
.produkttext {
    width: 80%;
}
.keyboard > div > img {
    transform: scale(1.3);
    z-index: 0;
}
divider.three {
    display: inline-block;
    background-image: url(res/section3.svg);
    aspect-ratio: 900/100;
}
.contact {
    background-color: var(--purple-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5vw;
}
form > div {
    width: 100%;
}
form > a {
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    box-shadow: 0 0 5px #000;
    padding: 1vw;
    border-radius: 25px;
    margin: 2vw;
}
.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0.5vw;
}
.formup {
    display: flex;
    flex-direction: row;
}
iframe {
    width: 60vw;
    height: 30vw;
    border: none;
    border-radius: 25px;
    margin: 3vw;
}
label {
    margin: 0.5vw;
}
textarea {
    resize: none;
    height: 30vh;
}
input, textarea, input:active, textarea:active {
    outline: none;
    border: 3px solid rgba(255, 234, 252, 0.01);
    background-color: rgba(41, 41, 46, 0.2);
    padding: 0.85vw;
    font-family: mer;
    color: var(--white);
    font-size: var(--text);
    box-shadow: 0 0 5px #000;
    border-radius: 25px;
}