* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
body {
    background: linear-gradient(270deg, #F58484 0%, #840000 100%);
    color: #000;
    font-size: 18px;
    /* font-family: "PT Sans", sans-serif; */
    font-family: "JetBrains Mono", monospace;
    max-width: 3000px;
    margin: 0 auto;
    position: relative;
}

h1, h2, h3, nav a {
    color: #E04E4A;
    font-size: 26px;
    /* font-family: "Just Me Again Down Here", cursive; */
    font-family: "Bad Script", cursive;
}

#banner {
    background-image: url("../img/theme-photos-CGpifH3FjOA-unsplash 1 (3).jpg");
    width: 100%;
    height: 45vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

nav a {
    text-decoration: none;
    color: #840000;
    transition: all 0.5s ease-in;
}
nav a:hover {
    color: aqua;
}


nav ul li {
    display: inline;
    margin-right: 30px;
}
header {
    background: rgba(131, 199, 186, 0.75);
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 2;
}
#about, #interests, footer {
    text-align: center;
    padding: 20px;

}
#interests {
    background: rgba(131, 199, 186, 0.95);
}
h1 {
    font-size: 26px;
}

/* GRID */
.grid {
    display: grid;
    /* grid-template-columns: 1fr 2fr 1fr; */
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.grid img {
    width: 100%;
    border-radius: 0 0 39px 39px;
}

.grid figcaption {
    font-size: 0.75em;
    margin-top: -40px;
    font-family: "Just Me Again Down Here", cursive;
    color: #E04E4A;
    font-family: "Just Me Again Down Here";
    font-size: 26px;
}
.grid p{
    border-radius: 0 0 39px 39px;
}
.grid figcaption, .grid p {
     background: rgba(255, 255, 255, 0.82);
     position: relative;
}

#selfie {
    margin-top: -75px;
    position: relative;
    top: -5px;
    left:130px
}

@media screen and (max-width:500px) {
    #selfie {
        left: 0px;
    }
}