:root {
    --main: #89c2d9;
    /* #38a3a5; */
    --lightred: #9b1d6bce;
    --coldred: #a01a58;
    /* BE4D25; */
    --offwhite: #fbfbfb;
    --lightblue: #ecf0f6;
    --flatgreen: #3C6E71;
    --slate: #353535;
    --lightgreen: #57cc99;
}

@media screen and (max-width: 600px) {
    .gold {
        grid-column: span 2;
    }
    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    footer ul {
        flex-wrap: wrap;
    }
    footer ul li {
        margin: 10px;
    }
}
@media screen and (max-width: 400px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 600px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* @media screen and (max-width: 400px) {
    .newsletter form {
        flex-direction: column;
    }
   */

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Enriqueta', sans-serif;
}

/* Utility Classes */

.flex {
    display: flex;
    flex-wrap: wrap;
}

.reverse {
    flex-direction: row-reverse;
}

.gap {
    gap: 24px 8px;
}

.col {
    flex-direction: column;
}

.center {
    align-items: center;
}

.justified {
    justify-content: center;
}
.spacebetween {
    justify-content: space-between;
}
.button {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    max-width: 250px;
    text-align: center;
    white-space: nowrap;
    border: none;
}

.small {
    font-size: 12px;
}
.black-text {
    color: black;
    font-weight: 300;
}

/* end */



/* Nav styles */

header {
    margin-right: auto;
}
header h1 {
    margin: 0 1rem;
}

main {
    background: var(--slate);
    color: var(--lightblue);
}
nav {
    background: var(--coldred);
    color: var(--lightblue);
    /* padding: .2rem; */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}
ul {
    list-style: none;
    padding: 0;
    
}

ul li a {
    color: white;
    text-decoration: none;
    padding: .5rem;
}

/* Hero Styles */
.hero {
    padding: 1rem 1rem;
    background-color: var(--slate);
    /* linear-gradient(var(--main), #028090); */
}
.card {
    display: flex;
    margin: 0 2rem 4rem;
    justify-content: space-around;
    align-items: center;
    font-size: 1.2rem;
}
.card img {
    /* border: 1px solid var(--lightred); */
    border-radius: 1rem;
    max-width: 30%;
    object-fit: cover;
}
.card h1, .card h5 {
    flex-shrink: 2;
}

.hero .button {
    color: var(--offwhite);
    background-color: var(--coldred);
}

#birds-img {
    filter: hue-rotate(70deg);

}
.top-button {
    display: flex;
    justify-content: center;
}

.tippytop {
    padding: 3rem 1rem;
    display: flex;
}

/* About Grid media object */

.about-grid {
    max-width: 350px;
    background-color: var(--coldred);
    color: var(--offwhite);
    border-radius: 8px;
    overflow: auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 50% 50%;
    margin-bottom: 1.5rem;
    margin-left: 4rem;
    margin-top: 1.5rem;
}
.about-grid > img {
    width: 100%;
    height: 100%;
    grid-row: span 2;
    object-fit: cover;
}

.about-grid > h2 {
    grid-column: 2 / span 3;
    margin-top: 5%;
    /* padding: 2.3rem; */

}
.about-grid > p {
    grid-column: 2 / -1;
    grid-row: 2;
    padding: 0.5rem;
}
.contacts {
    grid-column: 2 / span 3;
    padding: 5px;
    margin-bottom: 1rem;
}
.contacts > p {
    margin: auto;
}

a#profile-link {
    color: white;
    text-decoration: none;
}


/* Project Styles */

section.projects {
    background-color: var(--offwhite);
    color: var(--lightred);
    padding: 3rem 1rem;
}

section.projects a.button {
    color: var(--offwhite);
    background-color: var(--coldred);
    transition: all 1s;
}

section.projects a:hover {
    color: var(--offwhite);
    background-color: var(--slate);
    transition: all 1s;
}

.projects .card {
    border: 2px solid var(--main);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* .project-imgs {
} */

/* Products Section Styles */

.experience {
    background-color: white;
}
.experience h2 {
    margin: 0;
    text-align: center;
    color: var(--coldred);
}
.experience svg {
    fill: var(--lightblue);
}

.joblink {
  margin: auto;
}

#fixbutton2 {
    margin-top: 37px;
}
#fixbutton1 {
    margin-top: 50px;
}

.experience .product-card {
    color: var(--coldred);
    border: 2px solid var(--coldred);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.product-card#jobcard1 > img {
    margin-top: 1rem;
}
.product-card ul li {
    padding: 4px 0;
    border: 1px solid transparent;
    margin: 1px;
}
.product-card ul li:hover {
    border: 1px solid bisque;
    border-radius: 4px;
}
.experience .price {
    margin-bottom: -25px;
}

.experience .button {
    display: block;
    color: white;
    background-color: var(--main);
    transform: translateY(40px);
}

.experience li::before {
    content: '✓';
    margin-right: 4px;
    color: #ffdd00;
}


 .skills-btn {
    padding:0.3em 1.2em;
    margin:0 0.3em 0.3em 0;
    border-radius:2em;
    background-color: var(--coldred);
    /* #4eb5f1; */
    box-shadow: 3px 4px 0px 0px black;
    color: var(--offwhite);
    font-family: 'Enriqueta', sans-serif;
}

.skills-btn:hover {
    background:linear-gradient(to bottom, var(--lightred) 30%, #b7094c 100%);
	background-color: var(--slate);
} 

.grid {
    margin: 1rem 0;
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}



 /* Newsletter Form Styles */


 #contact.newsletter {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 3rem;
    background: linear-gradient(to bottom, var(--coldred), #f46c6c, var(--lightred)); 
 }
.newsletter h2 {
    text-align: center;
    color: var(--offwhite);
}

 .email-tag {
    display: flex;
    justify-content: center;
    flex-grow: 2;
    background-color: var(--offwhite);
    padding: .3rem;
    border-radius: 1rem;
    color: var(--slate);
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Enriqueta', sans-serif;
    border: none;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.5);
    align-self: center;
    max-width: 40%;
 }
 .email-tag a {
    color: var(--slate);
    font-size: 1rem;
 }
 .email-tag a:hover {
    color: var(--coldred);
 }


 /* Footer Styles */

 footer {
    font-family: 'Enriqueta', sans-serif;
    background-color: var(--slate);
    padding: 1rem;
    color: var(--lightblue);
    display: flex;
    justify-content: space-around;
 }

 footer ul{
    display: flex;
    justify-content: center;
 }
 
 footer ul li {
    font-size: 11px;
    margin: 40px;
 }
 .sc-btns {
    background-color: var(--coldred);
    padding: 8px;
    box-shadow: inset 0 0 0 6px var(--slate);
    border-radius: 40%;
 }