@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: roboto-b;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

.affiliate-message {
    color: yellow;
    background-color: #1a253a;
    font-size: 1.8rem;
    line-height: 2rem;
    text-shadow: none;
    text-align: center;
    font-family: roboto-b, georgia;
}

main {
    width: 100%;
    height: 100vh;
    /*background: linear-gradient(to bottom right, #0066ff, #249ced, #0066ff);*/
    background-color: #80aaff;
    background-size: 69vh, cover;
    background-image: url(../img/devenyi_laszlo_1140_1600_3.png);
    background-repeat: no-repeat;
    background-position: bottom, center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

main p {
    font-size: 1.3rem;
    line-height: 1.4rem;
    max-width: 450px;
    color: #283858;
    font-family: roboto, georgia;
    font-weight: 600;
    text-shadow: none;
}

main a {
    margin-top: 30px;
    font-size: 1.4rem;
    display: block;
    height: 36px;
    line-height: 36px;
    background-color: var(--site-color-01);
    padding: 0 20px;
    width: fit-content;
    text-shadow: 1px 1px 4px #000000;
}

.main-intro {
    position: relative;
    right: 24vh;
    transform: translateY(-60px);
}

.main-intro h1 {
    font-size: 4.5rem;
    line-height: 0,5;
    color: #283858;
    font-family: roboto, georgia;
    font-weight: 600;
}

#h1a {
    margin-left: 100px;
}

#h1b {
    margin-left: 240px;
}

.h2alcim {
    margin-top: 1.5rem;
}

.main-intro .h2alcim h2 {
    font-size: 2.6rem;
    line-height: 1.4;
    margin: 0 30px;
    color: #283858;
    font-family: roboto, georgia;
    transform: translateX(-30px);
}

.main-intro li {
    margin: 10px 30px;
    line-height: 1.5;
}

.main-quotes {
    position: relative;
    left: 30vh;
    transform: translateX(30px);
    margin-top: -185px;
}

.main-quotes h3 {
    font-size: 3rem;
    color: #ffd700;
    text-shadow: 1px 1px 4px #000000;
}

.main-quotes p {
    font-size: 2rem;
    /*border-left: 4px solid var(--site-color-01);*/
    padding-left: 20px;
    margin: 20px 0;
    line-height: 1.4;
}

.main-quotes a {
    position: relative;
    left: 5vh;
    border-radius: 6px;
    background: linear-gradient(#6699ff, #80aaff, #0044cc);
}

.main-quotes a:hover, 
.index-starter-video-text a:hover, 
.my-books-text a:hover, 
.my-articles-text a:hover, 
.my-consulting-text a:hover {
    background-color: var(--site-color-01-hover);
}

/* Felugró CAPTCHA ablak */
#captcha-popup {
    width: 300px; /* Állítsd be a felugró ablak szélességét az igényeidnek megfelelően */
    max-height: 245px; /* Állítsd be a felugró ablak magasságát az igényeidnek megfelelően */
    border: 2px solid #ccc;
    background-color: #fff;
    padding: 5px 20px 5px 20px;
    position: relative; /* Abszolút pozíció, a regisztrációs ablak relatív elhelyezkedéséhez képest */
    top: 100%; /* Felső él a regisztrációs ablak közepén */
    left: 50%; /* Bal él a regisztrációs ablak közepén */
    transform: translate(-50%, 0%); /* Középre igazítás */
}

#captcha-popup1 {
    width: 300px; /* Állítsd be a felugró ablak szélességét az igényeidnek megfelelően */
    max-height: 245px; /* Állítsd be a felugró ablak magasságát az igényeidnek megfelelően */
    border: 2px solid #ccc;
    background: linear-gradient(to bottom right, #e6f0ff, #ffffff, #e6f0ff);
    padding: 5px 20px 5px 20px;
    position: relative; /* Abszolút pozíció, a regisztrációs ablak relatív elhelyezkedéséhez képest */
    top: 100%; /* Felső él a regisztrációs ablak közepén */
    left: 50%; /* Bal él a regisztrációs ablak közepén */
    transform: translate(-50%, 0%); /* Középre igazítás */
}

/* Állítsd be a regisztrációs ablak magasságát az igényeidnek megfelelően */
.form-popup {
    height: auto; /* Automatikus magasság beállítása a tartalom alapján */
}

.egyeb {
    display: none;
}

.captcha-h4 {
    font-family: roboto, georgia;
    
}

#captcha-container {
    width: 250px;
    height: 125px;
}

#captcha-container1 {
    width: 250px;
    height: 190px;
    background: linear-gradient(to bottom right, #e6f0ff, #ffffff, #e6f0ff);
}

#captcha-puzzle img, #captcha-puzzle1 img {
    width: 58px;
    height: 58px;
}

#captcha-image, #captcha-image1 {
    width: 250px;
    height: 125px;
    position: relative;
}

#captcha-br, #captcha-br1 {
    height: 5px;
}

#droppable-area, #droppable-area1 {
    width: 58px;
    height: 58px;
    background-color: rgba(255, 0, 0, 0.0); /* Vörös átlátszó háttér, csak a szemléltetéshez */
    position: absolute; /* Abszolút pozíció a képen belül */
    z-index: 10; /* Biztosítja, hogy a téglalap a kép előtt legyen */
}


.contact {
    background: linear-gradient(to bottom right, #3385ff, #42aaf0, #3385ff);
    padding: 20px; /* Párna hozzáadása */
}

.contact h1, h3 {
    text-align: center;
    text-shadow: 1px 1px 4px #000000;
    padding: 10px 0 10px;
    
}

/* Középre helyezés és szélesség */
.contact_form {
    width: 60%; /* 60% szélesség */
    margin: 0 auto; /* Középre helyezés */
    background-color: #dce3ef;
    padding: 10px;
    border-radius: 10px;
}

.contact_form p {
    color: #001a4d;
    font-family: roboto-b, georgia;
    font-size: 1.6rem;
    text-align: center;
    text-shadow: none;
}

.contact-label {
    font-size: 1.6rem;
    color: #001a4d;
    font-family: roboto-b, georgia;
    margin-left: 5px;
}

/* Beviteli mezők alap stílusa */
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* 100% szélesség */
    background: #f1f1f1;
    font-size: 1.6rem;
    font-family: roboto, georgia;
    padding: 10px; /* Párna a mezőkben */
    border: 1px solid #ccc; /* Szürke szegély */
    border-radius: 5px; /* Lekerekített sarkok */
    box-sizing: border-box; /* A szélesség és magasság számításánál figyelembe veszi a paddingot */
}

/* Textarea külön stílusa */
textarea {
    height: 100px; /* Magasság 5 sorra */
    resize: vertical; /* Csak függőleges irányban lehessen bővíteni */
}

/* Gomb stílusa */
.message_btn {
    background: linear-gradient(#001a4d, #6699ff, #0044cc);
    color: #ffd700;
    text-shadow: 1px 1px 4px #000000;
    padding: 8px 8px;
    border: none;
    cursor: pointer;
    width: auto;
    padding: 0 20px;
    display: block;
    margin: 0 auto;
    min-height: 24px;
    height: auto;
    text-align: center;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: roboto-b, georgia;
    border-radius: 8px;
}

.message_btn:disabled {
    background-color: #cccccc; /* Halványabb szín */
    cursor: not-allowed; /* Kattintás letiltása */
    opacity: 0.6; /* Átlátszóbbá teszi */
}

.message_btn:hover {
    background: linear-gradient(#B8860B, #FFFF00, #ffd700);
    color: #1a253a;
    text-shadow:none;
    font-size: 1.8rem;
    transition-duration: 0.4s;
}

/*Videó rész*/
.index-video, 
.index-articles {
    width: 100%;
    background-color: #283858;
    padding: 40px 0 40px;
}

.index-video h1, h3 {
    text-align: center;
    text-shadow: 1px 1px 4px #000000;
    padding: 10px 0 10px;
}

.index-starter-video, 
.my-books, 
.my-articles, 
.my-consulting {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    width: 100%;
}

.my-video-text, .my-books-text, .my-articles-text, .my-consulting-text h3, p {
    padding: 5px 0 5px;
    text-shadow: 1px 1px 4px #000000;
}

.my-video {
    width: 48.5%;
    border: 2px solid #777;
}

.index-starter-video-text, .my-books-text, .my-articles-text, .my-consulting-text {
    width: 48.5%;
}

.index-starter-video-text a {
    margin: auto;
    top: 30px;
    font-size: 1.4rem;
    display: block;
    height: 36px;
    line-height: 36px;
    background-color: var(--site-color-01);
    padding: 0 20px;
    width: fit-content;
    text-shadow: 1px 1px 4px #000000;
    position: relative;
    border-radius: 6px;
}


/*Könyvek rész*/

.index-books, .index-consulting {
    width: 100%;
    background-color: #1a253a;
    padding: 40px 0 40px;
}

.index-books h1, h3 {
    text-align: center;
    text-shadow: 1px 1px 4px #000000;
    padding: 10px 0 10px;
}

.my-books-text a {
    margin: auto;
    top: 30px;
    font-size: 1.4rem;
    display: block;
    height: 36px;
    line-height: 36px;
    background-color: var(--site-color-01);
    padding: 0 20px;
    width: fit-content;
    text-shadow: 1px 1px 4px #000000;
    position: relative;
    border-radius: 6px;
}

.my-books-img {
    width: 48.5%;
    border: 2px solid #777;
}


/*Cikkek rész*/



.index-articles h1, h3 {
    text-align: center;
    text-shadow: 1px 1px 4px #000000;
    padding: 10px 0 10px;
}

.my-articles-text a {
    margin: auto;
    top: 30px;
    font-size: 1.4rem;
    display: block;
    height: 36px;
    line-height: 36px;
    background-color: var(--site-color-01);
    padding: 0 20px;
    width: fit-content;
    text-shadow: 1px 1px 4px #000000;
    position: relative;
    border-radius: 6px;
}

.my-articles-img {
    width: 48.5%;
    border: 2px solid #777;
}

/*Konzultáció rész*/

.index-consulting h1, h3 {
    text-align: center;
    text-shadow: 1px 1px 4px #000000;
    padding: 10px 0 10px;
}

.my-consulting-text a {
    margin: auto;
    top: 30px;
    font-size: 1.4rem;
    display: block;
    height: 36px;
    line-height: 36px;
    background-color: var(--site-color-01);
    padding: 0 20px;
    width: fit-content;
    text-shadow: 1px 1px 4px #000000;
    position: relative;
    border-radius: 6px;
}

.my-consulting-img {
    width: 48.5%;
    border: 2px solid #777;
}

/* Modal alap stílus */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}

.modal1 {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background: linear-gradient(to bottom right, #99c2ff, #a0d5f8, #99c2ff);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center;
}

.modal1-content {
    background: linear-gradient(to bottom right, #99c2ff, #a0d5f8, #99c2ff);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center;
}


.modal-content h2 {
    color: #001a4d;
    font-family: roboto-b, georgia;
    font-size: 2rem;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;}

.modal-content p {
    color: #001a4d;
    font-family: roboto-b, georgia;
    font-size: 1rem;
    text-align: center;
    text-shadow: none;
}

#captchaTimer {
    color: #0044cc;
    font-family: roboto-b, georgia;
    font-size: 1.3rem;
    text-align: center;
    text-shadow: none;
}

.close {
    color: #aaa;
    float: right;
    font-family: roboto-b, georgia;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.close1 {
    color: #ffd700;
    font-family: roboto-b, georgia;
    font-size: 1.6rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
    margin-top: 10px;
}

.close1:hover,
.close1:focus {
    color: #0044cc;
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
}

.errors-list li {
    color: red;
    font-size: 1.2rem;
    text-align: center;
}

.success-list li {
    color: green;
    font-size: 1.2rem;
    text-align: center;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0; /* Margó az elválasztó előtt és után */
}

.separator::before,
.separator::after {
    content: '';
    flex: 1; /* Egyenlő teret foglal el a két oldal */
    border-bottom: 3px solid #80aaff; /* Vonal stílusa */
    margin: 0 5px; /* Margó a vonal és a szöveg között */
}

.separator-text {
    font-weight: bold; /* Félkövér szöveg */
    color: #80aaff; /* Szöveg színe */
    padding: 0 10px; /* Padding a szöveg körül */
    letter-spacing: 2px; /* A betűk közötti távolság növelése */
}









/* Mobil verzio*/

@media only screen and (max-width: 600px) {
    
    main {
        background-position: top, center;
        width: 100%;
        height: 100%;
        align-items: flex-end;
        background-size: 71vh;
        flex-direction: column;
    }
    
    .main-intro {
        position: static;
        width: 100%;
        padding-top: 54vh;
    }
    
    .main-intro h1 {
        font-size: 4.5rem;
        color: #ffd700;
        line-height: 1.3;
        text-align: center;
    }
    
    .h2alcim {
        width: 90%;
        display: block;
        margin-left: 10%; 
        color: #ffd700;
        margin-top: 5rem;
    }
    
    .main-intro .h2alcim h2 {
        color: #ffd700;
        font-size: 2.5rem;
        background-color: rgba(0, 26, 77, 0.1);
    }
    
    .main-intro p {
        text-align: left;
        padding: none;
        font-size: 1.3rem;
        line-height: 1.5rem;
        font-family: roboto-b, georgia;
        border-left: none;
    }

    .main-quotes {
        position: static;
        left: 0;
        transform: translateX(0);
        width: 100%;
        margin-top: 3vh;
    }
    
    .main-quotes h3 {
        font-size: 2.8rem;
    }
    
    .main-quotes p {
        text-align: left;
        padding: none;
        font-size: 2rem;
        line-height: 2.5rem;
        font-family: roboto-b, georgia;
        border-left: none;
        margin: 15px 10px;
    }

    .main-quotes a {
        width: 50%;
        margin: auto;
        left: 0;
        top: 20px;
        font-family: roboto-b, georgia;
    }
    
    .main-quotes .open-button-r {
        transform: translateY(-80%);
    }
    
    .contact_form {
        width: 95%;
    }
    .index-starter-video {
        flex-wrap: wrap;
    }
    
    .my-video {
        width: 90%;
        border: 3px solid #777;
        margin: auto;
    }
    
    .index-starter-video-text {
        width: 100%;
        text-align: center;
    }
    
    .my-books {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 90%;
        margin: auto;
    }
    
    .my-books-text {
        width: 100%;
        text-align: center;
    }
    
    .my-books-img {
        width: 100%;
    }
    
    .my-articles {
        flex-wrap: wrap;
        width: 90%;
        margin: auto;
    }
    
    .my-articles-img {
        width: 100%;
    }
    
    .my-articles-text {
        width: 100%;
        text-align: center;
    }
    
    .my-consulting {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 90%;
        margin: auto;
    }
    
    .my-consulting-img {
        width: 100%;
    }
    
    .my-consulting-text {
        width: 100%;
        text-align: center;
    }
    
    .modal1-content {
        width: 90%;
    }
}