/* Google fonts import */
@import url("https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:ital,wght@0,300;0,400;1,400&display=swap");

/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* General styles */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Generic project styles */
    color: #131212;
    font-family: 'Oswald', sans-serif;

}
h1,
h2,
h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000000;
    margin-bottom: 10px;
    
}

p {
    letter-spacing: 1px;
}


/* Header */
header {
    
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    background-color: #ffffff;
    padding: 0 1rem;
    position: fixed;
    z-index: 99;
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

header a {
    text-decoration: none;
    color: inherit;
}

#menu {
    padding-left: 10px;
    font-size: 100%;
    letter-spacing: normal;
    list-style-type: none;
}

#menu>li {
    margin-bottom: 1em;
}

.active {
    border-bottom: 1px solid #3a3a3a;
}

#logo {
    font-size: 280%;
    line-height: 75px;
    margin: 0 0.5rem;
}

    


/* Navbar styles with dropdown toggle */
nav {
    position: absolute;
    background-color: #ffffff;
    width: 20%;
    right:1rem;
    left: 0;
    padding: 0 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    display: none;
    top: 100%;
}

/* Nav toggle */
#nav-toggle:checked~nav {
    display: block;
}
nav a:hover{
    color: rgb(255, 255, 255);
    background-color: #000000;
    border-radius: 10px;
    padding-left: 5px;
    padding-right:5px;
    
}

#nav-toggle {
    display: none;
}

.nav-toggle-label {
 
    font-size: 2rem;
}

main {
    /* Enlarge main element to push footer down*/
    flex: 1 0 auto;
    /* Add margin at the top to prevent content from being covered by the header */
    margin-top: 0px;
    /* Enable flex properties for child elements */
    display: flex;
    flex-direction: column;
}

/* bratislava pic */
#bratislavapic {
    text-align: center;
    height: 600px;
    max-width: 100%;
    background: url("../images/mainpic.webp") no-repeat center center/cover;
    position: relative;
    margin-top: 70px;
}

/*text section*/
#container {
    display: flex;
    flex-direction: column; 
    justify-content: space-evenly;
    margin:auto;
    align-items: center;
    width: 800px;
    max-width: 100%;
   
}
a{
    text-decoration: none;
    color: black;
    font-weight:bold;
}

.item1{
padding:40px;
margin-bottom: 10px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
padding-left: 5%;
padding-right: 5%;
border-radius:15px;
}

.item2{
padding: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
padding-left: 5%;
padding-right: 5%;
border-radius:15px;
}

.item3{
margin-top: 10px;
padding: 40px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
padding-left: 5%;
padding-right: 5%;
border-radius:15px;
}
#price{
    margin-top: 20px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.fee{
    width: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    background-color: rgb(137, 31, 31);
    border-radius:15px;
    max-width: 100%;

}
.fee h3{
    color: #ffffff;
    text-align: center;
}
.fee p{
    color: #ffffff;
}
/* address and such css*/
#contact-infos {
    display:flex;
    justify-content: space-around;
}

.info-card1{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    padding: 10px;
    border-radius:15px;
    margin: 10px;
}


.strong{
    font-weight: bold;
}

.center-h{
    text-align: center;
    color: #ffffff;
    background-color: rgb(0, 0, 0);
    border-radius:15px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.br{
    display: none;
}
/*css for map*/
.map {
    text-align: center;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
 iframe{
 width: 100%;
height:450px;
   }

/* transparent  cover*/
#cover-text h2{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    border-radius: 15px;
    background-color: rgba(8, 8, 8, 0.7);
    color: #ffffff;
    font-size: 180%;
    position: absolute;
    bottom: 30px;
    min-width:20%;
    max-width: 60%;
    min-height: 100px;
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 20px;
}

/* Footer */
#socials {
    text-align: center;
    padding: 10px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}


#socials i{
    font-size: 120%;
    padding: 5%;
    color: #ffffff;
    text-decoration: none;
    
}
#socials a {
    color:white;
    text-decoration: none;
}
#socials a:hover{
color: red;
}

footer {
	background-color: rgb(0, 0, 0);
    color:white;
	padding: 1em;
	text-align: center;
    width: 100%;
    height: 200px;
    position: relative;
    bottom: 0;
    right: 0;
	z-index: 3;
    font-size: 120%;
    
}
footer h2 span {
    color:white;
    text-decoration: underline;
}




/*picture section*/
.gallery-link{
 
    width: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
    background-color: rgb(137, 31, 31);
    border-radius:15px;
    max-width: 100%;
}

.gallery-link h3{
    color: #ffffff;
    text-align: center;
    
}
.gallery-link:hover{
    background-color: rgb(182, 180, 66);
}

#pictures{
    margin: 20px;
    text-align: center;
   
}
#photos{
    column-count: 2;
    align-items: center;
}
#photos img {
    width: 100%;
    border: 2px solid black;
    padding: 1px;
    margin: 5px;
}

#photos {
    line-height: 0;
}
/* sign up css section*/
.signup {
    margin-top: 20px;
    margin-left: auto;
    margin-right:auto ;
    width: 600px;
    max-width: 100%;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.signup h2 {
    font-weight: 600;
    margin-bottom:30px ;
}

.box {
    padding: 50px;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    flex-basis: 50%;
    flex-grow:1;
    color: rgb(0, 0, 0);
    border-radius: 15px;
}

.input-box{
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius:15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    color: rgb(0, 0, 0);
    font-size: 16px  
}
.input-box:focus {
 border:3px solid red;
 background-color: rgba(91, 41, 41, 0.08);
}

input[type=checkbox]{
    margin: 10px;
}
.box label {
    font-size: 20px;
}
.box button{
    width: 100%;
    color:white;
    font-weight: 800;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    background: red;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    font-size: 16px;
    margin: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:15px;
}
.box button:hover{
    font-weight: 800;
    background:yellow;
    color: black;
}


@media screen and (max-width: 720px){
#contact-infos {
    display:flex;
    flex-direction:column;
    
}
#contact-infos>div {
    flex: 1;
    margin-bottom: 10px;
    text-align: center;
    
}
table{
    margin-left: auto;
    margin-right: auto;
}
#price{
    display: flex;
    flex-direction: column;

}
.fee{
    margin-top: 10px;
}
}

@media screen and (min-width: 768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        top:-10px;
        box-shadow: none;
        width: fit-content;
        padding-right: 1rem;
    }

    #menu {
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    .nav-toggle-label {
        display: none;
    }
    
}