


#fejlec {
    position: fixed;
    width: 1080px;
    height: 80px;
    font-size: 34px;
    background-color: rgb(163, 176, 246); 
    color: rgb(255, 255, 255);
    font-weight: 800;
    border: 3px solid black;
    opacity: 1.7;
}

#toBe {
margin: 0;
padding-top: 20px;
padding-left: 30px;
}



section {
    display: flex;
    flex-direction: row;
    width: 1050px;
    padding-left: 30px;
    padding-top: 80px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border: 3px solid black;
    background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEA8PDw8NDQ8PDw0NDQ0NDQ8NDQ0NFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zRDMtQygtLisBCgoKDg0OGhAQGi0dHx8tLSstLSstLS0tLSstLS0tLS0tKy0tLSstLS0tLS0tLS0tLS0tLS0tLS0rNy0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAADAQEBAQEAAAAAAAAAAAACAwQAAQUGB//EAC8QAAMAAgEDAwMCBgIDAAAAAAABAgMRIQQSMRNBUQVhcSKBMkKRwdHwBvEUM2L/xAAaAQACAwEBAAAAAAAAAAAAAAACAwABBAUG/8QAIREAAwEAAgICAwEAAAAAAAAAAAECEQMhEjEEQSIyURP/2gAMAwEAAhEDEQA/APvlJxS0Gg0jpacoiy49k14D1+xA1hQSvBdceni1iB7D1MnTCH04xWIrhIlJ3sKnh+xx4wvID/LCdSEoGzI/0CnRc8ekfphRwO7QphE0tRno7jY1yJ9Mbjr2Fs0TW9MbhvRdD34IkinBenyKodCw9Ppp+/8A2VrZHhtPWmWQzLRtgy4OZb0a8iXknz5E1/vAKWhU8RTNbWx+Ojy8Gb+Vl2GyVOFRWlRjiOixpjGMQgq5OxIbRki9IbRjpiiHx0jJYmaGJnSaOSmOQSQtDIBYaM5HY+nVHJKsFIXTY2JWk+fpJa0vPySv6e+f92etcnG9exSthVxyzwP/ABGnpodlw8HsXgVewOTploL/AF/oH+Gej55zoKSzL0L3wKz9O5/yO80zO+OkJ1oDQ6q4S/qxXaEhNag54GTlAlhKQWMmmV9Ll7X9j0I6pP8AsePPA3G/Aq4TNEcrXRf1D92/sBIGbJvS+OQYoFLob/otHa1yU9Pk5Ey9hQtMB9h+u0epFDCPFZXLEUsHy9OmMYEIxjGIQxjGIQ+CnINnIQzQ2bOw5PPzyF05B8ZCCaGTYtyOmz1MWUqjMjyMeQcsgmoNM8p6lZPg4svyRRkHTYHiMXJpbioaybBRUmKr2Pl6gHiXwKz9KqWipHdFa0FiZ87m6Zy2hXpHu9Tg20/6kuTpkk2aJ5TLXCjzOwJQP7A5xhuha419Cox+G/HyZxp8FdrhIXOP5B8gnxipQaQzsO+mTyK8TY2VQ9kynQ/GLoZDaG6KcGT2YvGg+wVQ+d9lJgY8BChxjGMQhjGMQh+ZzQxWApCUndZ5ZaNmxs5CdSHMgNIYmymbGzkJJGSA0OVMtjIOnMQJjJYDkarZ6WLqC3HmPEmijHlFVxmiOVo9qMo6WePOZlWHqBFcZpjlTLm0BcJrQHemcd/sAkM0kyYl7HMcjq+wEMbvQjOxmWNLgQn8lc5Uybqmt++yp94FfS0OUMmCOMhVjyl0mippMYsR2cQyKTHShboYpTFyh0Hew6pFtjEsNoIxgQzGMYhDGMYhD83SGShXcFNHcaPNJofMhqBc0NVi2NWHVIaQvvOd5C/JFEoJInmw1kBaYapFKQcoRNhqwWhstFCHQSTkGTkFtDZaL8WxxBGYauoFOGOVrBuWH5E3T9hy6jgn7yJMlZ9MPE2h+edpaExQ+KI/6WkswSsLDjEx80hsNAumRcaFY5aKYbOoYhTY6ZwKWEcR0WMRjGMQsxjGIQxjGIQ/LlkDmydBo9C0eOVspnIMWUkTDlguUMXIyv1DdwlBoDBusamEmKTCTKwJMfNBKhKGIFobNMbNjZonQcsBoZNMqhjLpf5JVQSYDkYrHdx2WLkNIpoJMfLGzQiRsoW0NVFEMoxsmhD4YukPllMsbJLND4YmkOmg3QaYKQYDGIxjGKLMYxiEMYxiEPy20l4B2ej1H0rKnP6eLek/On9/gTn6DJDfdFaX8yTc6+dnfnkl/Z5G+G0/1JUw5N2hpBNgJBwwwEGgGPkKUGjiClAsZISGI5KDSAbGzJ1IJSaQ0C2MUmSGTJxIbKAbGTB2ZHTItNHfUAY1JL2USkHtEqyDJAaC8l9D1Y2NiscFMICmNlMPHJRLEKjnqimtHppFXedVkvqDcbBclq9KEdBkIWNMYxxshDpge44XhWnzz63hp/sMwdVvS/qeZVNoLpb1Sfts3vjWHOXI9B/5B0SXbklJJ8Vrxv5PHSPs8+CckOX/AA14/wDl/J8n1GBxTlppp+/uvkd8fk1eL9oxfM4PG/NemLSDlABKjQzKmkMQSYruCTBwNUPlhoSmHNANDpY9ILYnuO9wODFSQ7uO94hMKSsKfIx3cHAuEPiQX0HGsPGinHIGOB6ehNM1ROBydrIIrKAuQPEZ5fSHeo2MVaFytCqvZM0J/guyia2yzEyLCilUBSJDKlQ0imyuKE0sHRWhAZfAZxoFBsl9Qwz0F/qMM1C8Z8YqKcOtEKoZGQ6TWnLV4e90eb+Xyb6h0E5fL1STUv7/AHPKxZ2i/H1pncVL1GlXNz40eBkwOW1S002n+RLR9N9Sw+rj7pnutNa1517ngOfY18XL5I5nPweFYvQhBo1SCN0QlgxMJMXI2UCxkpsOQ0cR1AMakdQ2EBElWLEBTGxx6bHJVjkFJI5WUS+zVMqUPd6FXlJ6yHJeyKSne+h88j54Ew9A5MpTWjk1C0ZlyhYkT4+WUS9FNYK8nT1lEMPuJ1QU0Bg1MominHZDFclUPkCkMhlk0dTFALIJ8RvlhQYR6pieJPJHwfcFLFINM7BxCjHRRBHBbiW9C6Gwen9Pyvx7HkfUv/dk9v1ex7vQyu3jXcvk8P6h09Rb73t1+ra8PYrha82M+Sn/AJokOdpmhkLZrOcloCQaDrG0cUA6NSaOpjYjZzHjHzwLb/g+I+2HjjQzv0IrKKrIB46NfIp6RReUU8gh2FCC8cFebpjZ5KIWhM8HayAsbP49jLyC09sU62UYZI+kV5OmPxrSOqhdUdlgB6N2GnoTL5CugWhi9aOxXyXYeTzcTLMGQXaGcbLW+CW75HXXBFdgShnIx3eYR3GDwX5HyCYyBSDTOgzmFOMrw2QTQ+KApDJeHq9Jke0c/wCQQ/0V7aa/cX0Vco9P6hi78NL4W1+UZm/G0zV4+fE0fL6G4Xo5WNrh8BTBrb6OdMvR/kPHg2cxodvXsKb/AIa5le2JfAm8gWe+Se2HKFXf8O1kB7gGFKDwRrbGQh08AScdAsfP4jHYDoW6CxrZWYU6beD8E7KW9ICFpC7sW+2O/SQ1QfcJTOuiNAzRRjZroXNcAugUux1PFhViopw0RY2U4WLpBwyu74Iroot8EVsqEFysZ3mE9xg8FafNphoXIxI2GMZjKIEwPhAMNFvS1yj3sVJzo+cxHpdNm8GXlnTZw1nRR13RpraXzs8Tt15Ppoe0eB1uNxXJOGn6ZXyYS/JGwVprR6Pb3Tyv390eXhzMvxdR7bC5EweKlh5fVYmm/wAsQ4ej1OrhVyvPJFEbXI2L6M3Jx5ROpGTOh3p/ADD8tBUYBTFVRrYtsJIXdBpleGdE+GR7rQFP6G8Sz8mMuxexewkysJVeTGbNLF7ChlMKB2zmwHRxMHA6esqmh+GiNMpwsCkNh9lWR8EWSuSmnwR5QYC5Td5hezDME6eLCGzJ2IGpDmxSk5KHyhcjNgtjEh0Mpw0RSyjFQFLoZLPc6SuCb6pi7k/lJv8AIzoTvXzxv7GVdWan3HZ8w7H4sn30wepxaf58fkCJN/TRykqllcXv8na+RKHY/wBXADWDl30dmhWV8/k5W1tCboiQNV1gGQGYGaHTIe4KUawZ4F1QWVi0Uv6FVfQcnXQOwGywW8Gqg0xEsamU0HDDNLBbMmDhe9jlRRioi2UY2BSHQ+ym6JroZTJ8hUoLkYejC/UMF2K1EaNsGaOsMJhbO7FhIsEbLKMNEksZNgtFpntdJn5PT/iR4HR1yevGbwkZOSe+jbxPV2QdV0va+efg83Jrb0e59Uv9M/ufPZr5H8LbQj5CUhzZ31PgkqwPUNHgYHzYX3exXUPehCy/uEk/DKU4R8nkNxIfIiBsg0NnpC8sCkX1O0SZ40Sa3oG5zsVVC3RyqFtjUjNVj5obDJpY6SqQ2GNphJidhpgBp9hj8bJkx+MBodD7GVQm2HkYlsiRdsxgO46FgolkMxixhjqMYhAkFJjEZEX9Kejh8mMZeQ28fo59Y/hn9z53P5MYb8f9TL8z2IoExjWjl0UYPK/H9ivqfYxhVezXxfoxYyPY6YF+g17HY/JJ1pjAz+wXJ+hCCzGNMnNYcj5MYGjRx+jgwxgGMgKB+MxgGOkGxNHTERLFmMYIUf/Z");
    background-size: cover;
    /*    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Sky.jpg/800px-Sky.jpg"); */
    /*background-image: linear-gradient(to bottom left, rgb(211, 227, 241), rgb(253, 63, 20) ); */
}

#flexOszlop {
    width: 500px;
}

#kep {
    width: 500px;
}

#szovegOszlop {
    width: 500px;
    margin-left: 50px;
    background-color: rgb(red, green, blue) 73, 99, 245;
}





/* Kezd. Méretek */
body {
    margin: 0;
    box-sizing: border-box;
}

main {
    width: 100%;
    height: 100vh;
}

#ablak {
/*    width: 1200px; */
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 70px;
}

#kep {
/*   width: 1200px; */
    height: 650px;
    opacity: 0.6;
    }


/* Nem kezeli a session-t A session-ben a nagy szöveges rész van.
.container {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Josefin Sans', sans-serif;
    background-color: red;
}
*/

/*Bef. Méretek */



/* Kezd. Kép és felirat, pozícionálás */
#ablak {
    position: relative;
}

#feliratok {
    position: absolute;
    bottom: 50px;
    left: 15px;
    /*    width: 1100px; */
    height: 200px;
}
    
#photon {
    line-height: 1.5;
    color: rgb(255, 255, 255);
}

#sky {
    line-height: 1.5;
    color: rgb(255, 255, 255);
}

#sky {
    font-size: 90px;
}

#Himynameis {
    position: absolute;
    top: 5px;
    left:15px;
    font-family: 'Abril Fatface', cursive;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
}

h1 {
    font-family: 'Abril Fatface', cursive;
    font-size: 60px;
    font-weight: 100;
    margin: 0;
    line-height: 0.3;
}

#idezet1 {
    height: 280px;
}

#togetherAlatti {
    height: 350px;
}

#idezet2 {
    height: 275px;
}

#iFindAlatti {
    height: 160px;
}

#ablakMellett {
    font-size: 30px;
}














/* Bef. Kép és felirat, pozícionálás */



/*
Kezd. MINTA AZ IDÉZETRE!!!   Ez az egész kommentben van.
Kezd. Első idézet
blockquote {
    position: relative;
    width: 950px;
    padding: 70px;
    font-family: 'Abril Fatface', cursive;
    font-size: 65px;
    font-weight: 500;
    color: white;
    background-color: #222;
}

#idezojel {
position: absolute;
width: 72px;
left: 0;
top: 0;
}


// Kezd. ha ikon lenne az idézőjel
Ha ikon lenne az idézőjel, akkor így írnám meg a css-ben.
Kérdés: Idézőjel content-be mi kerülne pontosan?
blockquote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: 0;
    top: -55px; .....
    transforM rotate(100deg);
    color: lime;
    font-size: 80px;
    font-weight: 500px;
}
// Bef. ha ikon lenne az idézőjel

Bef. Első idézet
Bef. MINTA AZ IDÉZETRE!!!  Ez az egész kommentben van.
*/








.meret2 {
/*    width: 800px; */
    margin-left: auto;
    margin-right: auto;
}

p, ul, .nagybetus, h3, h4, blockquote {
    text-align: left;
/*    width: 800px; */
    margin-left: auto;
    margin-right: auto;
    font-family: 'Josefin Sans', sans-serif;
}

.nagybetus {
    text-transform: uppercase;
    margin-bottom: 60px;
    font-family: 'Italianno', cursive;
    font-size: 50px;
    color: rgb(255, 255, 255);
}

#vonal {
    border-top: 4px solid black;
    padding-top: 60px;
    }

.meret2 {
    line-height: 1.4;
}

h3.fent {
    line-height: 1.4;
}

h3 {
    margin-bottom: 0;
    margin-top: 33px;
}

h4 {
    margin-top: 0;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 15px;

}

.pici {
    font-size: 15px;
    line-height: 1.7;
}

#vonalFelett {
    margin-bottom: 45px;
}


blockquote {
    position: relative;
/*    width: 850px; */
    padding: 40px;
    font-family: 'Abril Fatface', cursive;
    font-size: 55px;
    font-weight: 500;
    color:black;
    background-color: rgb(163, 176, 246);
    opacity: 0.7;
}

#idezojel {
position: absolute;
width: 55px;
left: 0;
top: 0;
}
