* {
    box-sizing: border-box;
}
body {
    font-family: Bebas Neue;
    color: #e8d9d9;
    font-size: 25px;
    line-height: 1.5em;
    font-weight: 400;
    text-decoration: none;
}
div.wrapper {
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
}

h1,h2,h3,h4,h5,h6{
    line-height: 1.25em;
}
h2 {
    font-size: 2.25rem;
    color: #ffffff;
    font-family:League Gothic;
}
a.btn{
    display:inline-block;
    width: auto;
    background-color: #005888;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
    padding: 1em 2em;
}
a.btn:hover {
background-color:#59B7D7;
transition: 0.5s;
}

/*HEADER STYLES*/

header {
    background-image:url(pictures/sky.jpg);
    background-size:cover;
    color: #F6F6F1;
}

header div.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
nav ul {
 display: flex;
flex-direction: row;
list-style: none;
gap: 40px;
}
nav a:link, nav a:visited {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.25em;
    transition: 0.5s;
}
 nav a:hover {
    color: #2087be;
}
/*HERO STYLES*/
#hero {
    min-height: 600px;
    background-image: url(pictures/sky.jpg);
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    text-align: center;
}
#hero h1 {
    font-size: 3em;
    color: #DCF1F6;
    margin-bottom: 0.5em;
}
#hero p {
    font-size: 1.5em;
    margin-bottom: 1em;
    color:#ffffff;
    width: 100%;
   
}

/* ABOUT Section */
#about {
    background-image: url(pictures/sky.jpg);
    background-size:cover;
    background-attachment: fixed;
}
#about div.wrapper {
    display:flex;
    flex-direction: row;
    gap: 40px;
    padding: 60px 0;
}
div.about-left {
 width: 50%;
 width: calc(50% - 20px);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-end;
}
div.about-left img {
    width:75%;
}
div.about-right {
 width: 50%;
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 20px;
}
#about p {
    color: #e5ecee;
}
/* GALLERY Section */
#gallery {
    min-height: 200px;
    font-family:Arial, Helvetica, sans-serif;
    color: #DCF1F6;
    background-color: #2087be;
    background-size: cover;
    background-attachment: fixed;
}
#gallery div.wrapper {
    padding: 60px 20px;
}
div.gallery {
    display: flex;
    flex-direction: row;
    gap: 50px;
}
div.gallery a{
    width: 25%;
}

div.gallery img{
    width:100%;
    height: 320px;
    object-fit: cover;
}
div.gallery video{
    width:100%;
    height: 320px;
    object-fit: cover;
} 
div.gallery a:hover {
    scale: 1.05;
    transition: 0.25s;
}


/* PHOTOGRAPHY Section*/
#photography {
    min-height: 200px;
    font-family:Arial, Helvetica, sans-serif;
    color: #DCF1F6;
    background-color: #005888;
    background-size: cover;
    background-attachment: fixed;
}
#photography div.wrapper {
    padding: 60px 20px;
}
div.photgraphy {
    display: flex;
    flex-direction: row;
    gap: 50px;
}
div.photography a{
    width: 25%;
}
div.photography img{
    width:100%;
    height: 320px;
    object-fit: cover;
}
div.photography a:hover {
    scale: 1.05;
    transition: 0.25s;
}

/* INSPO Section */
#inspo {
    background-image: url(pictures/walle.jpg);
    background-size:cover;
    background-attachment: fixed;
    padding: 150px 0;
    text-align:center;
    font-family: Gothic A1;
}
blockquote p {
    color: #f9fcfd;
}

/* PROJECT Styles*/
#projects h2 {
    text-align: center;
}
#projects {
    padding: 96px 20px;
    background-color: #005888;
    background-size: cover;
    background-attachment: fixed;
}

div.cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.card {
    display: flex;
    flex-direction: row;
}
.card img {
    width: 50%;
    object-fit: cover;
}
div.card-text {
    background-color: #6f8fcb;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}
div.card-text h4 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    color:#e4e4e4;
    text-decoration: none;
}
a.card {
    text-decoration: none;
}
a.card:hover {
    scale: 1.05;
    transition: 0.25s;
}
p {
 color: #F6F6F1;
}

/*FOOTER STYLES*/
footer {
    background-color: #186581;
    background-size: cover;
    background-attachment: fixed;
    
    color: #ffffff;
    padding: 10px 0 30px;
}
footer div.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 20px;
}
div.social {
    display: flex;
    flex-direction: row;
    gap: 48px;
}
.social a img {
    width: 48px;
}

footer div.footer-bottom {
    align-items: flex-end;
    margin-top: 20px;
}
.social a:hover {
    opacity: 0.8;
    background-color: #e4e4e4;
}
 nav a:link, nav a:visited {
    color:#F6F6F1;
    text-decoration: none;
    font-weight:700;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.25rem;
}
nav a:hover {
    color: #6ebaf5;
    transition: 0.1s;
}

/* media-queries */


@media only screen and (max-width: 480px) {
    #hero h1 {
        font-size:2rem;
        transition: 0.5s;
    }
    
    nav a:link, nav a:visited {
        color: #ffffff;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.8rem;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.25em;
        transition: 0.5s;
    }
    a.btn{
        display:inline-block;
        width: auto;
        background-color: #005888;
        color: #ffffff;
        font-size: 1em;
        font-weight: 400;
        text-decoration: none;
        padding: 0.5em 1em;
        transition: 0.5s;
    }
    div.about-right {
        width: 70%;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 15px;
        transition: 0.3s;
       }
       div.gallery {
        display: flex;
        flex-direction:column;
        gap: 50px;
    }
    div.gallery a{
        width: 25%;
    }
    
    div.gallery img{
        width:300px;
        height: 300px;
        object-fit: cover;
    }
    div.gallery video{
        width:300px;
        height: 300px;
        object-fit: cover;
    } 
    div.gallery a:hover {
        scale: 1.05;
        transition: 0.25s;
    }
    #inspo {
    background-image: url(pictures/walle.jpg);
    background-size:cover;
    background-attachment: fixed;
    padding: 150px 0;
    text-align:center;
    font-family: Gothic A1;
}
}