* {
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
    color: black;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
}
/* p, ul, ol, div {
    margin: 0;
} */
div.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
    line-height : 1.5em;
    margin: 0;
}
h2 {
    font-size: 3.5em;
    margin-top: 0.4em;
    margin-bottom: -0.3em;
}
a.btn {
    display: inline-block;
    width: auto;
    background-color:#e93d68;
    color: white;
    font-size: 1.5em;
    font-weight:bold;
    text-decoration: none;
    padding: 0.75em 2em;
    transition:0.5s;
}
a.btn:hover {
    background-color:#C6CBC5;
    color:#101010;
    transition:0.6s;
}

main {
    contain:paint;
}



/* HEADER STYLES */
header {
    background-color:#e93d68;
    color: #ffffff;
    position:relative;

}
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;
    justify-content: right;
    list-style: none;
    gap: 40px;
    font-weight: 400;
    font-size:24px;
}
nav a:link, header nav a:visited {
    color: white;
    text-decoration: none;
    transition:0.5s;
}
nav a:hover {
    color: #ffffff;
    transition:0.5s;
}
img.blackstar1 {
    position:absolute;
    width:20%;
    top:-4vw;
    left:-4vw;
    z-index:5;
}




/* hero styles */
#hero {
    min-height: 500px;
    background-image: url(assets/02background.jpg);
    background-size:cover;
    /*background-size: cover; or 480px --which tiles it, you get the size by looking at the size of the img in figma
    background-repeat: y*/
    background-attachment: fixed;
    position:relative;

    
    /*background-color:rgba(104, 192, 255, 1);*/
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
#hero h1 {
    font-size: 90px;
    color: rgb(0, 0, 0);
}
#hero p {
    font-size: 15px;
    font-weight: 600;
    max-width: 800px;
    margin: 0 auto 2.0em;
    color: rgb(0, 0, 0);
}
img.blackstar2{
    position:absolute;
    width:20%;
    bottom:-10vw;
    right:0vw;
    z-index:5;
}




/* about styles */

#about {
    /*background-image: url(assets/about-background.jpg);*/
    background-color:#e93d68;
    background-size:auto;
    color: rgb(255, 255, 255);
    position:relative;
}
#about div.wrapper {
    display:flex;
    flex-direction: row;
    gap: 60px;
    padding: 60px 130px;
}

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: 90%;
}
div.about-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.about-right p {
    margin-top: 30px;
    font-size: 13px;
    font-weight: bold;
}
div.about-right p.p1 {
    color: rgb(255, 255, 255);
    margin-bottom:-1.0em;
}
img.blackstar3 {
    position:absolute;
    width:20%;
    z-index:5;
    bottom:-9.1vw;
}


/* inspo style */


#inspo {
    background-color: rgb(255, 255, 255);
    /*background-image: url(assets/about-background.jpg);*/
    padding: 60px 0 20px;
    color: rgb(0, 0, 0);
    text-align: center;
    position:relative;
}
#inspo div.wrapper {
    /*background-image: url();*/
    /*background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;*/
    /*padding: 60px 130px;*/
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
}

img.saulbass {
    position: absolute;
    width: 20%;
    bottom: -1.9vw;
    right:15vw;
}

p.quote {
    font-size: 48px;
    font-weight: 700;
    margin-bottom:100px;
    margin-top:60px;
}
p.credit {
text-align:left;
display: inline-block;
}




/* project styles */

#projects {
    padding: 96px 20px;
    background-color: #e6e6e6;
    /* background-image: url(assets/Project-background.png); */
    background-size:auto;
    position:relative;
}

#projects h2 {
    color:#e93d68;
    margin-left: 20px;
}

div.cards {
    display: flex;
    flex-direction: column;
    
}
.card {
    display: flex;
    flex-direction: row;
    margin: 20px;
}
.card img {
    width: 50%;
    object-fit: cover;
}
.card-text {
    background-color: #e93d68;
    color: white;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}
.card-text h4 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}
a.card {
    scale: 1;
    Transition: 0.25s;
    color: black;
    text-decoration: none;
}
a.card:hover {
    scale: 1.05;
    transition: 0.25s
}
img.blackstar4 {
    position:absolute;
    width:20%;
    top:20vw;
    left:-9vw;
}
img.blackstar5 {
    position:absolute;
    width:20%;
    bottom:-10vw;
    right:-2.5vw;

}

/* gallery styles */

#gallery {
    min-height: 200px;
    background-color:#e93d68;
    /* background-image: url(assets/gallery-background.png); */
    color:white;
    height: 110%;
}
#gallery h2 {
    margin-bottom: 20px;
}
#gallery div.wrapper {
    padding: 60px 20px;
}
div.gallery {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
div.gallery a {
    width: 33%;
    width: calc(33% - 26.6px);
}
div.gallery img {
    width: 100%;
    /* height: 400px; */
    bottom: -130px;
    z-index: 12;
}


/* footer styles */

footer {
    background-color:#101010;
    color: white;
    padding: 10px 0 30px;
}
footer div.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}
div.social {
    display: flex;
    flex-direction: row;
    gap: 46px;
}
.social a img {
    width: 46px;
}
footer div.footer.bottom {
    align-items: flex-end;
    margin-top: 20px;
}
.social a:hover {
    opacity: 0.6;
}
div p.name {
    font-weight: 500;
    font-size: 36px;
}
nav a:link, footer nav a:visited {
    color: white;
    text-decoration: none;
    transition:0.5s;
}
nav a:hover {
    color: #000000;
    transition:0.5s;
}

/* @media only screen and (max-width:pixels) { 

}*/

@media only screen and (max-width:1458px) {
    img.blackstar1 {
    position:absolute;
    width:15%;
    top:-1vw;
    left:-4vw;
    z-index:5;
}
img.blackstar2{
    position:absolute;
    width:15%;
    bottom:-7vw;
    right:0vw;
    z-index:5;
}
img.blackstar3 {
    position:absolute;
    width:15%;
    z-index:5;
    bottom:-7.1vw;
}
    img.blackstar4 {
    position:absolute;
    width:15%;
    top:20vw;
    left:-7vw;
}
img.blackstar5 {
    position:absolute;
    width:15%;
    bottom:-7vw;
    right:-2.5vw;

}
div.gallery {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
}
@media only screen and (max-width:1245px) {
   img.blackstar1 {
    position:absolute;
    width:15%;
    top:8vw;
    left:-4vw;
    z-index:5;
}
}
@media only screen and (max-width:1211px) {
    div.gallery {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
}
@media only screen and (max-width:1192px) {
    div.about-right h2 {
        font-size:3em;
    }
}
@media only screen and (max-width:1064px) {
    div.about-right h2 {
        font-size:2em;
    }
}
@media only screen and (max-width:889px) {
    #hero h1 {
        font-size: 65px;
    }
}
@media only screen and (max-width:831px) {
    #about div.wrapper {
        flex-direction:column;
    }
    div.about-right {
        width:100%;
    }
    div.about-left {
        align-items:flex-start;
    }
}
@media only screen and (max-width:824px) {
    div.about-left img {
        width:100%;
    }
}
@media only screen and (max-width:796px) {
    p.quote {
    font-size: 47px;
}
}
@media only screen and (max-width:781px) {
    p.quote {
    font-size: 40px;
}
    #about h2 {
        margin-top: 0em;
    }
}
@media only screen and (max-width:706px) {
    div p.name {
        font-size: 30px;
    }
}
@media only screen and (max-width:677px) {
    p.quote {
    font-size: 35px;
}
    div.about-left img {
        width:120%;
}
}
@media only screen and (max-width:670px) {
    div p.name {
        font-size: 20px;
    }
}
@media only screen and (max-width:657px) {
    a.card {
        flex-direction:column;
        align-items: center;
    }
    .card img {
        width:100%;
    }
    .card-text {
        width:100%;
    }
}
@media only screen and (max-width:602px) {
    p.quote {
    font-size: 27px;
}
}
@media only screen and (max-width:577px) {
    div.about-left img {
        width:170%;
    }
}
@media only screen and (max-width:564px) {
    #hero h1 {
        Font-size:97px;

    }
}
@media only screen and (max-width:518px) {
    div.about-left img {
        width:220%;
    }
}
@media only screen and (max-width:515px) {
    #about h2 {
        font-size:1.8em;
    }
}
@media only screen and (max-width:492px) {
    #about h2 {
        font-size:1.7em;
    }
    div.about-left img {
        width:260%;
    }
}
@media only screen and (max-width:480px) {
    #hero h1 {
        font-size:83px;
    }
}