/* main-style.css */

@import "components/button-effects-style.css";

@import "components/font-style.css";

@import "components/background-and-font-color-style.css";

/* Minden projekt szekciót Flexbox-szá teszünk */

.hero,
.modern-projects,
.old-school-projects {
    display: flex;

    flex-wrap: wrap; /*Ha nem férnek el egy sorban, törjenek új sorba*/

    gap: 20px; /* Ez a kulcs: fix távolság a gombok között minden irányban*/

    padding: 30px 0; /*Kis hely alul-felül*/

    align-items: center; /*Függőlegesen középre igazítja a különböző magasságú gombokat*/
}

/*=============================================================*/
/*Tiszta kezdő pont beállítása.*/
* {
    margin: 0;
    padding: 0;
}

/*Minden új projektnél ezt érdemes beállítani.*/
body {
    min-height: 100vh;
}

.unicorning {
    width: 30px;
    margin-left: 15px; /* Kis hely a bal széltől */
    margin-right: 10px; /* Kis hely az unikornis és a szöveg között */
}
/* Ez az elem fogja ellökni a többi menüpontot jobbra */
.page-name-container {
    margin-right: auto !important;
    display: flex;
    align-items: center;
}

nav {
    background-color: rgba(89, 61, 192, 0.9);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
nav li {
    height: 50px;
}
nav a {
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
}
nav a:hover {
    background-color: #f0f0f0;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari támogatás! */
    z-index: 9999; /* Legyen minden felett */
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.sidebar li {
    width: 100%;
}
.sidebar a {
    width: 100%;
}
.menu-button {
    display: none;
}

a {
    color: rgb(73, 176, 205);
}

@media (max-width: 800px) {
    .hideOnMobile {
        display: none;
    }
    .menu-button {
        display: block;
    }
}
@media (max-width: 400px) {
    .sidebar {
        width: 100%;
    }
}