/*WRITEN BY MICHAL BUCHTA*/



/*For all Web*/



/* open-sans-regular - latin - modern browsers  */

@import url('https://fonts.googleapis.com/css2?family=Cardo&display=swap');



* {

    margin: 0px;

    padding: 0px;

    font-family: 'Cardo', serif;

    scroll-behavior: smooth;

}



html {

    scroll-behavior: smooth;

}



body {

    background-color: black;

    margin: 0;

    padding: 0;

}



.menu {

    position: relative;

    top: 2%;

    height: 80px;

    background-color: transparent;

}



.menu_items {

    position: relative;

    top: 35%;

    display: flex;

    align-content: center;

    justify-content: center;

    gap: 60px;

    list-style-type: none;

}



.menu li a {

    text-decoration: none;

    color: black;

}



.menu li a:hover {

    text-decoration: none;

    color: gray;

}



.center_sight {

    position: relative;

    top: 72%;

    left: 50%;

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

    color: rgb(255, 255, 255);

}



.center {

    position: relative;

    top: 50%;

    left: 50%;

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

}



.left {

    position: relative;

    margin-left: 200px;

    float: left;

}







/*Single parts of Website*/



.main {

    height: 100vh;

    background-image: url("../img/main.jpg");

    background-size: cover; 

    background-position: center;

    margin: 0;

    padding: 0;

}



.about {

    background-color: white;

    height: 830px;

    width: auto;

    margin: 0;

    padding-top: 7vh;

}



.wedding {

    background-color: white;

    height: 830px;

    margin: 0;

    padding: 0;

}



.contact {

    background-color: white;

    height: 830px;

    margin: 0;

    padding: 0;

}



.blog {

    background-color: whitesmoke;

    height: 830px;

    width: 100%;

    margin: 0;

    padding: 0;

}



.footer {

    background-color: black;

    max-height: 40px;

    color: whitesmoke;

    width: 100%;

}



/*ELEMENTS*/



.about_section {

    background-color: whitesmoke;

    display: flex;

    justify-content: space-between;

    text-align: justify;

    margin: 0 auto 0 auto;

    padding: 40px;

    width: 80%;

}



.about_section img{

    max-width: 400px;

    height: 100%;

}



.about_text {

    margin: auto;

}



.about_text h1{

    display: inline-block;

    padding: 40px;

    width: auto;

}



.about_text p{

    padding-left: 40px;

}



.citat {

    padding-top: 80px;

    padding-left: 100px;

}



.portfoliomenu {

    position: relative;

    top: 15%;

    width: 80%;

    max-height: 100%;

    left: 10%;

    display: flex;

    justify-content: space-between;

   /* background-color: brown;*/

}



.container {

    position: relative;

    margin: 10px;

}



.portfoliopic {

    max-width: 400px;

    min-width: 200px;

    width: 100%;

    height: auto;

    opacity: 1;

    transition: .5s ease;

    backface-visibility: hidden;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}



.container:hover .portfoliopic {

    opacity: 0.5;

}



.midle {

    transition: .5s ease;

    opacity: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -ms-transform: (-50%, -50%);

    color: white;

}



.container:hover .midle {

    opacity: 1;

}



.title {

    position: relative;

    text-align: center; 

    top: 10%;

}



/*BLOG*/



.card {

    background-color: white;

    position: relative;

    max-width: 600px;

    min-width: 400px;

    width: 100%;

    height: auto;

    padding: 20px;

    top: 40%;

    left: 50%;

    transform: translate(-50%, -50%);

    -ms-transform: (-50%, -50%);

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}



.card a{

    list-style-type: none;

}



.bolg_preview_img {

    background-color: #aaa;

    width: 100%;

    padding: 20px;

}



/*CONTACT*/



.mail_form {

    position: relative;

    width: 300px;

    height: auto;

    left: 50%;

    transform: translate(-50%,-50%);

    -ms-transform: (-50%, -50%);

    top: 35%;

    padding: 40px;

    

}



.box {

    position: relative;

}



.box input[type=email] {

    border: 2px;

    background: none;

    display: block;

    margin: 20px;

}



.box input[type=text] {

    border: 0;

    border-bottom: 1px solid lightgray;

    background: none;

    display: block;

    margin: 20px;

}



.box textarea {

    border: 1px solid lightgrey;

    background: none;

    display: block;

    margin: 20px; 

    resize: none;

}



.box input[type=submit] {

    color: black;

    text-shadow: none;

}

  

/*___GALLERY___*/



.menu_gallery {

    position: fixed; /* Menu je fixní, pohybuje se při scrollování */

    top: 0%;

    height: 80px;

    width: 100%;

    background-color: whitesmoke;

    z-index: 1000; /* Zajistí, že menu bude nad obsahem stránky */

}



.menu_gallery li a {

    text-decoration: none;

    color: black;

}



.menu_gallery li a:hover {

    text-decoration: none;

    color: gray;

}



.gallery_container {

    background-color: whitesmoke;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}





.gallery_container .gallery_pictures {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}



.gallery_container .gallery_pictures .gallery_colum {

    display: flex;

    flex-direction: column;

    width: 50%;

    left: 50%;

    align-items: center;

}



.gallery_header {

    background-color: whitesmoke;

    height: 430px;

    width: 100%;

    margin: 0;

    padding: 0;

}

  

.landscape {

    padding-bottom: 100px;

    position: relative;

    left: 50%;

    width: 100%;

    height: auto;

} 



.portrait {

    padding-bottom: 100px;

    position: relative;

    left: 50%;

    width: 50%;

}



.message {

    width: 100%;

    height: 85vh;

    background-color: whitesmoke;



}