* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html{
    font-family: "DM Sans", serif;
    scroll-behavior: smooth;
}

body{
    background-color: #fffcec ;  
}

header{
    margin-bottom: 100px;
}

header img{
    display: block;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}


h1{
    font-size: 90px;
    text-decoration: bold;
    text-align: center;
    color: #2E8197;
    margin-top: 30px;
}

nav{
    text-align: center;
    margin-top: 20px;
    
}

nav a {
    padding: 0 1em;
    color: #EE3A25;
    font-size: 20px;
}

h2{
    font-size: 40px;
    text-align: center;
    color: #991B1E;
    background-color: #ee392538;

}

h3{
    font-size: 27px;
    margin-bottom: 5px;
    margin-bottom: 20px;
}

h4{
    font-size: 20px;
}

p{
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 25px;
}

h3, h4, p{
    margin-left: 20px;
}


#overall{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
    margin: 70px;
}

#contr{
    margin: 70px;
    display: grid;
    grid-template-rows: 0fr 0fr 0fr;

    row-gap: 80px;
    column-gap: 80px;
}
#contr a{
    margin: 70px;
}
#contr img{
    border-radius: 10px;
    margin-left: 15px;
    justify-items: center;
}


#contributions .notionimg{
    margin-left: 15px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0fr 0fr 0fr;
    row-gap: 20px;
    
}

.notion{
    width: 80%;
    border-radius: 10px;
}

#contr .figma{
    margin-top: 70px;
}

#contributions .inspo{
    justify-content: center;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 20px;
}

.inspo img{
    width: 60%;

}

#contributions .model{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

.model img{
    width: 60%;
}

.one, .two, .three{
    margin-top: 50px;
}

.one h4, .two h4, .three h4{
    margin-bottom: 30px;
}
#contributions .final{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 20px;
}

.final img{
    width: 80%;
}


#capyskill .capi{
    margin: 70px;
    display: grid;
    grid-template-rows: 0fr 1fr 0fr 0fr;
}

footer{
    align-content: center;
    height: 30px;
    align-items: center;
    margin-bottom: 70px;
}

footer a{
    color: white;
    font-size: medium;
}

button{
    background-color: #2E8197;
    padding: 25px 30px;
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
    header img {
        width: 30%;
    }
    #overall{
        grid-template-columns: 1fr 1fr;
    }

    #contributions .notionimg {      
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    #contributions .inspo {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
        
    #contributions .model {
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: 1fr 1fr;
        column-gap: -20px;
    }
        
    #contributions .final {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    
        #capyskill .capi {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
        .inspo img {
            width: 60%;
    
        }
        
         .model img {
             width: 60%;
         }

        .final img {
            width: 80%;
        }
}

@media screen and (min-width: 1140px) {
    header img {
        width: 20%;
    }

    #overall{
        grid-template-columns: 1fr 1fr 1fr;
    }

    #contr{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0fr;
        column-gap: 80px;
    }
    #contributions .notionimg {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 0fr;
        column-gap: 10px;
    }
    #contributions .inspo {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 0fr;
        column-gap: 30px;
    }
    
    #contributions .model {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 0fr;
        column-gap: 30px;
    }
    
    #contributions .final {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 0fr;
        column-gap: 30px;
    }
       
    #capyskill .capi {
        display: grid;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

        .inspo img {
            width: 100%;
    
        }
    
        .model img {
            width: 100%;
        }
    
        .final img {
            width: 100%;
        }
}