/* colors
background: 162c3a (dark blue)
ephasised headings: d97c50 (dark orange)
headers and text: dba988 (soft orange)*/
/* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); */


/* color redesign
DARK GREEN: TEXT rgba(10, 51, 35, 1)
ROSE: HEADERS background-color: rgba(211, 150, 140, 0.6) 
MIDNIGHT BLUE: rgb(131, 153, 88)*/

html{
    scroll-behavior:smooth;
  }

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
  }

.experience{
    background-color:rgba(10, 51, 35, 1);
}

h1, h2, label{
font-family: "Yeseva One", serif;
font-weight: 400;
font-style: normal;
letter-spacing:-1.4px;
font-size:36px;
}

h1 {
    font-size:150px
}

    
p {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;

    color: rgba(10, 51, 35, 1); 
    font-size: 24px; 
    line-height: 1.5em;
    letter-spacing: -1.2;
  }


.navbar{
    position:relative;
    top:0;
    width:100%;
    background-color: white ;
    z-index: 1000;
}

.navbar li{
    display:inline-block;
    padding: 3%;
}

.navbar ul {
    margin:0;
}

.navbar a, .menu-toggle  {
    text-decoration:none;
    color: rgba(10, 51, 35, 1);
    padding:14px 16px;
    font-size: 20px;

    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


.navbar a:hover{
        color: rgba(211, 150, 140, 0.6);
    }

.menu-toggle:hover{
    color:rgba(211, 150, 140, 0.6);
}

    
/* Button to toggle the menu */
.menu-toggle {
    display: none; 
    background-color: white;
    color:#D97C50;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    text-align:center;
}

/* Media query for navigation bar */
@media (max-width: 600px) {
    .navbar {
        /* Stacks elements vertically */
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
    }

    .menu-toggle {
        display: block; 
        margin: 14px 10px; 
    }

    .navbar ul {
        display: none;
        flex-direction: column; 
        width: 100%;
    }

    .navbar li {
        width: 100%; 
        text-align: left; 
        display: block; 
    }

    /* When the 'show' class is added to the navbar, show menu */
    .navbar.show ul {
        display: flex; 
    }
}
    

/* whole fkn banner */
.banner{ 
    display: flex;
    justify-content:space-between;
    align-items:center;
    background-color:white;
    color: rgb(131, 153, 88);
    padding:0 5%;
}

.title{
    flex-direction:column;
    text-align:center;
}

.title, .img-container  {
    width: 48%; /* let each banner take up half of container width */
}
 
.title p {
    font-size:24px;
    /* width:45%; */
    color:rgb(131, 153, 88);
    text-align:center;
}

.title h1{
    /* width:600px; */
    text-align:center;
    flex-wrap:wrap;
}

@media (max-width: 600px) {
    .title h1 {
        font-size: 2em;  
        width: 100%;    
        text-align: center;
        padding: 0 10px; 
    }

    .hometext {
        width: 80% !important;
        padding: 0 10px;
    }

    .hometext p {
        font-size: 18px;
    }
}

/* Media query for content */
@media (max-width: 600px) {
    .banner {
        flex-direction: column; /* stack items vertically */
        align-items: center;    
    }

    .img-container,
    .title {
        width: 100%;           
        margin-bottom: 20px;   
    }
}

.img-container {
    /* max-width:100%; */
    /* width:600px; */
    height:auto;
    margin: auto; 
    padding: 0 0 10px 0; 
    text-align: center;
  }

.img-container img {
    max-width: 100%;
    height:auto;
    display:block;
    border-radius:5px;
}

.title button{
    background-color:white;
    color:rgb(131, 153, 88);
    border-radius: 12px;
    border: solid 1px rgb(131, 153, 88);
    cursor: pointer;
    padding: 10px 15px;
    text-align:center;
}

.title button:hover{
    background-color: rgba(211, 150, 140, 0.6);
    color: white;
    border-radius: 12px;
    border: solid 1px white;
}


/* tekst onder banner */
.parent-container{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items: center;
    margin: 10% 0 10% 0;
}

.hometext{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:49%;
    padding:auto;
    margin:auto;
}


.footer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    background-color:rgba(211, 150, 140, 0.6);
    /* padding:1%; */
    width:100%;
    margin-top: auto;
}

.footer p{
    font-size: 14px;
    margin: 0;
    padding: 10px 5px;
}

.footer img{
    height: 20px;
    width: 20px;
    margin: 0 10px;
}

.fcolor{
    color:rgb(16, 86, 102);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}