/* ======================================= */
/* ========== ZAKLADNE NASTAVENIA ======== */
/* ======================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  background-color: #0e0e0e;
  color: #fff;
  display: flex;
  height: 100vh;
}

:root {
    --index: calc(1vw + 1vh);
}

/* ======================================= */
/* ========== MENU (POUZIVANIE ASIDE TAG) ======== */
/* ======================================= */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: calc(var(--index)*12.5);
    background-color: #111;  
    border-right: 1px solid #222;
    padding: calc(var(--index)*1) calc(var(--index)*0.8);
    z-index: 2;
}

.logo img {
    width: 80%;
}

.profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: calc(var(--index)*1) 0;
}

.profile img {
  width: 35%;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: calc(var(--index)*0.5);
}

.status {
  font-size: calc(var(--index)*0.7);
  color: #aaa;
}

.status .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #00ff6a;
  border-radius: 50%;
  margin-right: 4px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.menu a {
  color: #ccc;
  text-decoration: none;
  font-size: calc(var(--index)*0.7);
  transition: 0.3s;
}

.menu a:hover,
.menu a.active {
  color: #fff;
  transform: translateX(4px);
}

.menu a i {
  margin-right: 10px;
}

/* END MENU */


/* ======================================= */
/* ========== INDEX.HTML ======== */
/* ======================================= */

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(var(--index)*2) calc(var(--index)*2);
    color: #fff;
    margin-left: calc(var(--index)*12.5);   
}

.hero {
    text-align: center;
    margin-bottom: calc(var(--index)*2);
    max-width: 60%;
}

.hero-title {
    font-size: calc(var(--index)*2);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: calc(var(--index)*0.5);
}

.hero-title span {
  color: #00ffd1;
}

.hero-subtitle {
    font-size: calc(var(--index)*0.8);
    font-weight: 500;
    color: #aaa;
    margin-bottom: calc(var(--index)*0.5);
}

.hero-desc {
    font-size: calc(var(--index)*0.7);
    color: #888;
    line-height: 1.6;
    margin-bottom: calc(var(--index)*1);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: calc(var(--index)*0.5) calc(var(--index)*0.7);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn.primary {
  background-color: #00ffd1;
  color: #000;
}

.btn.primary:hover {
  background-color: #00cfa6;
}

.btn.secondary {
  border: 1px solid #444;
  color: #fff;
}

.btn.secondary:hover {
  background-color: #222;
}

/* ======================================= */
/* ========== TU JE UKAZ PRACE Z ID TAGOM DIV ======== */
/* ======================================= */

#stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 900px;
  width: 100%;
}

.stat-card.stack {
  grid-column: 1 / -1; 
}

.stat-card {
  background-color: #161616;
  border: 1px solid #222;
  border-radius: 12px;
  padding: calc(var(--index)*1.3);
  text-align: center;
  transition: all 0.3s ease;
}

/* ======================================= */
/* ========== HOVER EFECT KDE SA ZMENI BACKGROUND A TENE BLOKU S UKAZANIEM TRANSFORMACII ======== */
/* ======================================= */

.stat-card:hover {
  background-color: #1e1e1e;
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.stat-card h2 {
  font-size: calc(var(--index)*1.8);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.header-and-padding {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
}

.header-and-padding .text {
  color: #fff;
}

.stat-card h3 {
  font-size: calc(var(--index)*0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stat-card p {
  color: #aaa;
  font-size: calc(var(--index)*0.6);
}

/* STACK ICONS */
.stack-icons {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  font-size: 2.2rem;
}

.stack-icons i {
  color: #999;
  transition: all 0.3s ease;
}

.stack-icons i:hover {
  color: #fff;
  transform: scale(1.2);
}

/* ======================================= */
/* ==========MEDIA INDEX.HTML ======== */
/* ======================================= */
@media (max-width: 768px) {

  .menu {
    flex-direction: row;
    gap: 0.8rem;
  }

  main {
    margin-left: 0;
    margin-top: calc(var(--index)*5); 
  }

  .hero {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-desc {
    font-size: 0.9rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  #stats {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .stat-card h2 {
    font-size: 1.6rem;
  }
}

/* ======================================= */
/* ==========FOOTER PRE VSETKY STRANKY ======== */
/* ======================================= */

footer {
  width: 100%;
  margin-top: 25px;
  padding: 2rem;
  text-align: center;
  border-top: 1px solid #222;
}

footer a {
  color: #aaa;
  font-size: 0.9rem;
  text-decoration: none;
  margin: 0 0.5rem;
}

/* ======================================= */
/* ==========MEDIA PRE HEADER SIDEBAR ======== */
/* ======================================= */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: calc(var(--index)*1) calc(var(--index)*2);
    border-right: none;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #111;
    z-index: 10;
  }

  .profile {
    display: none; 
  }

  .menu {
    flex-direction: row;
    gap: 0.8rem;
  }

  .menu a {
    font-size: calc(var(--index)*1.2);
  }

  main {
    margin-left: 0;
    margin-top: calc(var(--index)*5); 
  }

  footer {
    padding: 1rem;
    font-size: 0.8rem;
  }

}

/* MAIN END */

/* ======================================= */
/* ==========ABOUT.HTML ======== */
/* ======================================= */

.about-hero {
  text-align: center;
  margin-bottom: 3rem;
}

.about-hero h1 {
  font-size: calc(var(--index)*2);
  font-weight: 700;
}

.about-hero .subtitle {
  color: #aaa;
  font-size: calc(var(--index)*0.8);
}

.about-content {
  max-width: 800px;
  margin: 0 auto 4rem;
  line-height: 1.8;
  color: #ccc;
  font-size: 1rem;
  text-align: center;
}

.about-content p {
  margin-bottom: calc(var(--index)*0.5);
}

.about-stack {
  text-align: center;
  margin-bottom: calc(var(--index)*1.5);
}

.about-stack h2 {
  font-size: calc(var(--index)*1);
  margin-bottom: 1.5rem;
}

.stack-icons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 2.4rem;
}

.stack-icons i {
  color: #999;
  transition: all 0.3s ease;
}

.stack-icons i:hover {
  color: #fff;
  transform: scale(1.2);
}

.about-cta {
  text-align: center;
  margin-top: calc(var(--index)*1);
}

.about-cta p {
  margin-bottom: 1rem;
  color: #aaa;
}

.btn.primary {
  display: inline-block;
  padding: calc(var(--index)*0.6) calc(var(--index)*1);
  background: #00ffd1;
  color: #000;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn.primary:hover {
  background: #00cfa6;
}

/* ======================================= */
/* ==========MEDIA ABOUT.HTML ======== */
/* ======================================= */

@media (max-width: 768px) {
    .about-hero {
        text-align: center;
        margin-bottom: 1rem;
    }

   .about-hero .subtitle {
        color: #aaa;
        font-size: calc(var(--index)*1);
    }

  .about-content {
        font-size: 0.95rem;
        margin: 0 auto 2rem;
  }

  .about-stack h2 {
    font-size: calc(var(--index)*2);
    }

}
/* ABOUT END*/


/* ======================================= */
/* ==========CONTACT HTML ======== */
/* ======================================= */

.contact-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #eee;
}

.contact-hero {
  text-align: center;
  margin-bottom: 2rem;
  max-width: 700px;
}

.contact-hero h1 {
  font-size: calc(var(--index)*2);
  font-weight: 700;
}

.contact-hero .subtitle {
  margin-top: calc(var(--index)*0.5);
  color: #aaa;
  font-size: calc(var(--index)*0.8);
  line-height: 1.6;
}

.contact-form-section {
  width: 100%;
  max-width: 600px;
  background-color: #161616;
  border: 1px solid #222;
  border-radius: 12px;
  padding: calc(var(--index)*1);
  box-shadow: 0 0 0 transparent;
  transition: all 0.3s ease;
}

.contact-form-section:hover {
  background-color: #1e1e1e;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-group label {
  font-weight: 600;
  font-size: calc(var(--index)*0.6);
  margin-bottom: 0.3rem;
  display: block;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid #333;
  border-radius: 8px;
  padding: calc(var(--index)*0.5) calc(var(--index)*0.5);
  color: #fff;
  font-size: calc(var(--index)*0.7);
  transition: border 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #00ffd1;
  outline: none;
}

.btn.primary {
  background: #00ffd1;
  color: #000;
  font-weight: 600;
  border: none;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn.primary:hover {
  background: #00cfa6;
}

.contact-links {
  text-align: center;
  margin-top: 3rem;
}

.contact-links p {
  color: #aaa;
  margin-bottom: 1rem;
}

.contact-links .links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.contact-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.3s;
}

.contact-links a:hover {
  color: #00ffd1;
}

/* ======================================= */
/* ==========MEDIA CONTACT.HTML ======== */
/* ======================================= */

@media (max-width: 768px) {

    
   .form-group input,
  .form-group textarea {
    font-size: 1rem;
  }
}

/* CONTACT END */


/* ======================================= */
/* ==========PROJECT.HTML ======== */
/* ======================================= */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 1.2rem; 
  width: 100%;
}

.projects .block {
  background-color: #1c1c1c;
  border-radius: 0.5rem;
  overflow: hidden;
  color: #fff;
  font-family: "Inter", sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  max-width: 100%;
}

.projects .block:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.project-header {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  opacity: 0.85;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-title {
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: calc(var(--index)*0.8);
}

.project-menu {
  font-size: 1.4rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.project-menu:hover {
  opacity: 1;
}

.project-images img {
  height: 300px; 
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ======================================= */
/* ==========HOVER ANIMACIE KDE OBRAZOVKA ZVYSIE NA 1.05 ======== */
/* ======================================= */
.projects .block:hover .project-images img {
  transform: scale(1.05);
}

.project-footer {
  padding: 1.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-tech {
  margin-bottom: 1rem;
}

/* ======================================= */
/* ==========TRANSITION UKAZUJE PRE RYCHLOST ZMENY POZADIA A COLORU ======== */
/* ======================================= */
.project-tech .tech {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  padding: 0.35rem 1rem;
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: background 0.3s ease, color 0.3s ease;
}


/* ======================================= */
/* ==========HOVER ANIMACIA KTORE ZMENIU POZADIE A COLOR BLOKU======== */
/* ======================================= */

.project-tech .tech:hover {
  background: #fff;
  color: #000;
}

.project-link {
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.4px;
}

.project-link .icon {
  font-size: 1rem;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

.project-link:hover .icon {
  transform: translateX(5px);
}

.footer-project {
    margin-top: calc(var(--index)*5.2);
}


/* ======================================= */
/* ==========MEDIA PROJECT.HTML ======== */
/* ======================================= */
@media (max-width: 768px) { 
  .projects {
    grid-template-columns: 1fr;
  }

  .project-title {
    font-size: calc(var(--index)*1.5);
   }

  .project-images img {
    height: 200px;
  }

  .project-footer {
    padding: 1rem;
  }

  .contact-form-section {
    padding: 1rem;
  }

  .project-tech .tech {
    font-size: 0.4rem;
    }

 
}

/* PROJECT END */


/* ======================================= */
/* ==========OBYCAJNY HEADER (KTORY JE LEN NA CACHE.HTML ======== */
/* ======================================= */
.main header {
  text-align: center;
  margin-bottom: calc(var(--index) * 2);
}

.main header h1 {
  font-size: calc(var(--index) * 2);
  color: #00ffd1;
  margin-bottom: 0.5rem;
}

.main header p {
  color: #aaa;
  font-size: calc(var(--index) * 0.9);
}



/* ======================================= */
/* ==========SEKCIA NA CACHE.HTML ======== */
/* ======================================= */
.main section {
  width: 80%;
  margin-bottom: calc(var(--index) * 2);
  line-height: 1.8;
}

.main section h2 {
  font-size: calc(var(--index) * 1.2);
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #222;
  padding-bottom: 0.3rem;
  color: #00ffd1;
}

.main section p {
  color: #ccc;
  margin-bottom: 0.8rem;
  font-size: calc(var(--index) * 0.8);
}

/* --- TEXTOVE ELEMENTY --- */
strong {
  color: #00ffd1;
}

em {
  color: #ffcc00;
}

blockquote {
  border-left: 4px solid #00ffd1;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #ddd;
  font-style: italic;
}

q {
  color: #aaa;
  font-style: italic;
}

mark {
  background-color: #00ffd1;
  color: #000;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* --- ODKAZY --- */
a {
  color: #00ffd1;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #00cfa6;
}

/* --- ZOZNAMY --- */
ul,
ol,
dl {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

ul li,
ol li {
  margin-bottom: 0.5rem;
}

ul img {
  width: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

/* --- DEFINICNY ZOZNAM --- */
dl dt {
  font-weight: bold;
  color: #fff;
}

dl dd {
  color: #aaa;
  margin-bottom: 0.5rem;
}

/* --- MAPA --- */
.main img[usemap] {
  max-width: 100%;
  border-radius: 12px;
  margin: 2rem 0;
  transition: transform 0.4s ease;
}

.main img[usemap]:hover {
  transform: scale(1.05);
}

/* --- ARTICLE --- */
article {
  max-width: 800px;
  background-color: #161616;
  border: 1px solid #222;
  border-radius: 12px;
  padding: calc(var(--index) * 1);
  margin-top: 1.5rem;
  transition: all 0.3s ease;
}
/* ======================================= */
/* ==========HOVER ANIMACIA KTORA ZMENI POZADIE POLOZENIE BLOKU A HO TEN' ======== */
/* ======================================= */
article:hover {
  background-color: #1e1e1e;
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

article h2 {
  color: #00ffd1;
  margin-bottom: 0.8rem;
}

article p {
  color: #ccc;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

td img {
  width: 50px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.belgia-text {
  width: 500px;
  float: right;
}