*{
    margin: 0;
}

a{
    color:#313638;
}

a:visited{
    color: rgb(35, 41, 43);
}

body{background-color: #313638;}

html{
    min-height: 150%;
    }

nav{
    font-family: "Inria Sans", sans-serif;
    font-size: 32px;
    padding: 30px;
}

nav a:hover{
    color: #F4D66B;
    transition: .4s;
}

p{
    font-family: "Inria Sans", sans-serif;
    color: #313638;
}

header{
    color: #313638;
}

#notablework{
    font-family: "Pathway Gothic One", sans-serif;
    font-size:64px ;
    letter-spacing: .14em;
}

footer a{
    font-family: "Inria Sans", sans-serif;
}

.button{
    background-color:#F4D66B ;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 50px;
    padding-right: 50px;
}

#name{
    font-family: "Pathway Gothic One", sans-serif;
    font-size:96px ;
    letter-spacing: .14em;
}

#webpage{
    padding-left: 75px;
    padding-right: 100px;
}

.thewholepage{
    
    border: solid rgba(241,143,173,1);
    width: 1800px;
    height: 4144px;
    margin: auto;
    display: flex;

    justify-content: flex-start;
    align-items: stretch;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;

    background: rgb(233,243,245);
    background: linear-gradient(180deg, rgba(233,243,245,1) 0%, rgba(241,143,173,1) 11%, rgba(244,214,107,1) 22%, rgba(241,143,173,1) 46%, rgba(244,214,107,1) 68%, rgba(241,143,173,1) 87%, rgba(233,243,245,1) 99%);

}

nav{
    display: flex;

    justify-content: space-evenly;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
}

#name{
    display: flex;

    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
}



#about1{
padding: 50px;
    display: flex;
    
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap:100px;
    

}

#about1 div{
font-size:32px ;

    width: 545px;
    height: 340px;
}

#about1 img{
    width: 340px;
    height: 340px;
}

#about2{
padding: 50px;
    display: flex;
    
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap:100px;
}

#about2 div{
font-size: 32px;

    width: 545px;
    height: 340px;

}

#about3{
padding: 50px;
    display: flex;
    
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap:100px;
}

#about3 div{
font-size: 32px;

    width: 650px;
    height: 560px;
}

#notablework{
    display: flex;
    justify-content: center;
}

#work{
padding: 50px;
    display: flex;
    
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap:10px;
}

#hannah{
    display: flex;

    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

#hannah p{
width: 260px;
height: 116px;
}

#selftitled{
    display: flex;

    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 40px;

}

#selftitled p{
    width: 124px;
    height:116px;
}

#tomorrow{
    display: flex;

    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

#tomorrow p{
    width: 360px;
    height: 116px;
}

#romantics{
    display: flex;

    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

#romantics p{
    width: 208px;
    height: 116px;
}

#wholegallery{
    padding-left: 30px;
}

#gallery1{
    display: flex;
    justify-content: flex-start;
    gap: 200px;
}

#gallery2{
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 100px;
    display: flex;
    justify-content: flex-end;
}

#gallery4 section{
    width: 310px;
    height: 220px;
}

#gallery4{
    display: flex;
    justify-content: flex-start;
    gap: 300px;
    margin-top: 25px;
}

footer .linkz{
    margin-bottom: 10px;
}

footer{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 950px;
    padding-bottom: 50px;
}

footer a img:hover{
    height: 50px;
    transition: .5s;
    
}
footer a:hover{
color:#F4D66B;
transition: .2s;
}

#columnimage img{
    height: 4144px;
}

#wholegallery a img:hover{
    -webkit-filter: blur(7px);
    filter: blur(7px);
    transition: .5s;
}