* {
    font-family: 'Comfortaa', Courier, monospace;
    text-decoration: none;
}
a {
    color: black;
}
html {
    scroll-behavior: smooth;
    line-height: 2rem;
}
  
/*title area*/
@keyframes IntroMain { /*welcome animation*/
    0% {opacity: 0; content: "Hi!";}
    15% {opacity: 1; content: "Hi!";}
    20% {opacity: 1; content: "Hi!";}
    40% {opacity: 0; content: "Hi!";}
    41% {opacity: 0; content: "Welcome.";}
    55% {opacity: 1; content: "Welcome.";}
    60% {opacity: 1; content: "Welcome.";}
    80% {opacity: 0; content: "Welcome.";}
    81% {opacity: 0; content: "MaHorna";}
    100% {opacity: 1; content: "MaHorna";}
}
@keyframes IntroMainSk { /*welcome animation*/
    0% {opacity: 0; content: "Ahoj!";}
    15% {opacity: 1; content: "Ahoj!";}
    20% {opacity: 1; content: "Ahoj!";}
    40% {opacity: 0; content: "Ahoj!";}
    41% {opacity: 0; content: "Vitaj.";}
    55% {opacity: 1; content: "Vitaj.";}
    60% {opacity: 1; content: "Vitaj.";}
    80% {opacity: 0; content: "Vitaj.";}
    81% {opacity: 0; content: "MaHorna";}
    100% {opacity: 1; content: "MaHorna";}
}
@keyframes IntroNonMain { /*remaining text reveal*/
    0% {opacity: 0;}
    81% {opacity: 0;}
    100% {opacity: 1;}
}
/* Main skills section styling */
.masonry-tile > div[lang] > div {
    margin-bottom: 0.5rem;
    display: block;
}

.masonry-tile .skill-icon-gen,
.masonry-tile .skill-text {
    display: inline-block;
    vertical-align: middle;
}

/* HR styling to maintain spacing */
.masonry-tile hr {
    margin: 1rem 0;
    border-top: 1px solid #ccc;
}

/* Subtitle styling */
.subtitle-skills {
    display: block;
    font-weight: bold;
    margin: 1rem 0 0.5rem 0;
}
/* Fix for inline elements in masonry tiles */
.masonry-tile > div > span {
    display: block;
}

/* Ensure proper spacing between skill items */
.skill-masonry-tile-small > div > span {
    margin-bottom: 0.3rem;
}

/* Make sure line breaks work properly */
.masonry-tile br {
    display: none;
}
.masonry-tile > div > span {
    display: block;
    margin-bottom: 0.5rem;
}
/* Main title animations (only when animated class is present) */
.title-main-box span.animated[lang="en"]::after {
    content: "";
    animation: IntroMain 4s ease forwards;
}
.title-main-box span.animated[lang="sk"]::after {
    content: "";
    animation: IntroMainSk 4s ease forwards;
}

/* Non-main intro animations (only when animated class is present) */
.title-left-box.animated,
.title-right-box.animated,
.title-bottom-box.animated {
    animation: IntroNonMain 4s ease forwards;
}

/* Default state (no animation) */
.title-main-box span[lang="en"]::after,
.title-main-box span[lang="sk"]::after {
    content: "MaHorna";
    opacity: 1;
}

.title-left-box,
.title-right-box,
.title-bottom-box {
    opacity: 1;
}

.center_content {
    display: flex; 
    justify-content: center;
    align-items: center;
}
.mid {
    position:absolute;
    width: 100%;
    top:40%;
    height: 15%;
    display:grid;
    grid-template-columns: 1fr auto 1fr ;
}
.title-screen {
    color: white;
    background-color: black;
    height: 100vh;
}
.title-left-box {
    justify-content: right;
    padding-right: 0.5em;
}
.title-main-box {
    font-size: 6rem;
}
@media screen and (max-width: 600px) { /*smaller text on smaller devices*/
    html {
        font-size: 0.7em;
    }
}
.title-right-box {
    font-size: 0.7rem;
    display: flex;
    padding-right: 0.5rem;
    justify-content: right;
}
.right-inside { /*positioning text inside of right box (move cursor to right side to reveal ...)*/
    display: flex; 
    flex-direction: column;
    align-items: flex-end;
    justify-content: right;
    text-align: right;
    width: 1px;
}
.title-bottom-box {
    position:absolute;
    width: 100%;
    top:57%;
    height:5%;
    font-size: 0.9rem;
}
/*title area*/

/*masonry area*/
.masonry-content {
    max-width: 1500px;
    margin:auto;
    padding:1rem;
}
.masonry-container { /*css columns feature */
    columns: 5 18rem;
}
.masonry-tile { /*tile*/
    box-shadow: inset 0rem 0rem 0rem 0rem white;
    width: 100%;
    display: inline-block;
    background-color: lightgray;
    border-radius: 1rem;
    transition: 1s;
    margin-bottom: 1rem;
    box-sizing: border-box;
    padding: 2rem;
}
.masonry-tile img { /*image in tile*/
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    margin: auto;
    margin-bottom: 2rem;
    box-shadow: 0rem 0rem 2rem 1rem grey;
}
.masonry-tile .title{ /*title in tile*/
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding-bottom: 1rem;
}
.masonry-tile span { /*text in tile*/
    display: block;
    text-align:justify;
}


.skill-icon-gen {
    border-radius:50%;
    display: inline-block !important;
    text-align: center;
    margin-right: 0.5rem;
    padding-left: 0.45rem;
}

.sib {
    line-height: 1.5rem;
    height: 1.5rem;
    width: 1.15rem;
    font-size: 1rem;
}

.sis {
    height: 0.7rem;
    width: 0.6rem;
    font-size: 0.7rem;
    padding-left: 0.2rem;
}

.skill-masonry-tile-small {
    line-height: 0.8rem;
}

.skill-text {
    display: inline-block !important;
}

.skill-text-small {
    font-size: 0.7rem;
    display: inline-block !important;
}

#novice {
    background-color: orange;
}
#intermediate {
    background-color: red;
}
#advanced {
    background-color: purple;
}
#superior {
    background-color: blue;
}
#expert {
    background-color: green;
}

.masonry-tile .longer { /*bigger image */
    width: 13rem;
    height: 23rem;
    border-radius: 50%;
}
.link-to-section { /*link covering the tile*/
    display: block;
    height: 100%;
    width: 100%;
}
.masonry-tile:hover{ /*repeating animation */
    animation: hover-masonry-tile 3s ease infinite;
}
@keyframes hover-masonry-tile {
    0% {box-shadow: inset 0rem 0rem 0rem 0rem white;}
    50% {box-shadow: inset 0rem 0rem 3rem 1rem lightgray;}
    100% {box-shadow: inset 0rem 0rem 0rem 0rem white;}
}
/*masonry area*/

/*info sections*/
.info-content { /*whole page on 100% width looks weird*/
    max-width: 1500px;
    margin:auto;
}
.info-section {
    padding: 1rem;
}
.container-section-title { /*big title */
    display: flex;
    justify-content: center;
    padding: 2rem 0rem 0rem 0rem;
    font-size: 2rem;
}

.section-title-link {
    padding: 1rem;

    height: 2rem;
    width: 2rem;
    border-radius: 2rem;
    background-color: black;
    margin: 2rem 1rem 2rem 1rem;
}

.section-title-icon {
    height: 2rem;
    width: 2rem;
    border-radius: 2rem;
    color: white;
    filter: invert(1);
    object-fit: cover;

}

.not-used {
    display: none !important;
}


.info-section-title { /*smaller title - project name*/
    padding: 1rem;
    background-color:black;
    color: white;
    border-radius: 2rem;
    margin: 2rem 1rem 2rem 1rem;
}
.info-section-title-big { /*bigger title - section name*/
    padding: 1rem;
    background-color:black;
    color: white;
    width: 100vw;
    text-align: center;
    font-size: 3rem;
}
.info-pair { /*img text pair*/
    display: flex;
    padding: 3rem 0rem 3rem 0rem;
    margin: 3rem 0rem 3rem 0rem;
    background-color: white;
    border-radius: 2rem;
    transition: 1s;
}
.info-pair:hover {
    background-color: lightgray;
}
@media screen and (max-width: 600px) { /*on small screen, display pair under each other */
    .info-pair {
        display: block;
    }
}
.media img {
    width: 100%;
    border-radius: 2rem;
    max-height: 70vh;
}
.info-texts {   
    padding: 1rem;
    width: 50%;
    max-width: 18rem;
    margin: auto;
}
.info-title {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
}
.info-text {
    display: flex;
    text-align: justify;
}
.info-texts-solo { /*info section without image*/
    width: calc(100%-2rem);
    padding:3rem 1rem 3rem 1rem;
    margin: 1rem 0rem 1rem 0rem;
    border-radius: 2rem;
    transition: 1s;
}
.info-texts-solo:hover {
    background-color: lightgray;
}
/*info sections*/

/*contact, footer*/
.contact {
    color: white;
    background-color: black;
    padding: 3rem;
}
.contact .container {
    max-width: 800px;
    margin: auto;
}
.input-help {
    color: gray;
    margin-left: 0.8rem;
    font-size: 0.8rem;
}
label, input, textarea {
    display: block;
    width: calc(100% - 1.6rem);
    border:none;
    padding:0.8rem;
    border-radius:0.8rem;
}
.button {
    margin-top: 1.6rem;
    width: 100%;
}
.footer {
    background-color: black;
    padding: 2rem;
    color: white;
    position: relative;
}
/*contact, footer*/

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;  
    box-shadow: 0 0 1rem #dadada;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 4rem;
    background-color: black;
    white-space:nowrap;
}

.mybtn {
    transition: 0.3s;
    font-size: 1.25rem;
    width: 100%;
    text-align: left;
    display: block;
    cursor: pointer;
    color: white;
    background-color: black;
    padding: 0.7rem 1rem;
    border: none;
}

.mybtn:hover {
    background-color: #444;
}

.subpage-title {
    display: flex;
    justify-content: center;
    padding: 5rem 0rem 0rem 0rem;
    font-size: 6rem;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid black;
    margin: 1em 0;
    padding: 0;
}

.mybtn2 {
    display: inline-block;
    cursor: pointer;
    color: black;
    line-height: normal;
    border-radius: 50%;
    background-color: white;
    box-sizing:initial;
    
}
.mybtn2:hover {
    background-color: #444;
}

.mybtn2_img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}