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

html {
    scroll-snap-type: y mandatory
}

section {
    scroll-snap-align: start;
}

:root {
    --primary-color: #FFBA49;
    --secondary-color: #20A39E;
    --tertiary-color: #EF5B5B;
    --fourth-color: #23001E;
    --fifth-color: #A4A9AD;
}

.header {
    text-align: center;
}

section h2 {
    box-shadow: 0 1px 3px black;
    display: inline;
}

.extra-padding {
    padding-top: 12vh;
}

.hero{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
}

.hero h2 {
    box-shadow: 0 1px 3px black;
}

/* projects */
.projects {
    height: 100vh;
    background-color: var(--secondary-color);
}

.project {
    overflow: hidden;
}

.projects .card { 
    border-radius: 15px;
}

.project img {
    filter: none;
    transition: 0.5s;
    border-radius: 15px;
    height: 25vh;
    border: 1px solid black;
}

.project:hover img{
    filter: blur(6px);
    transition: 0.5s;
    opacity: 0.9;
}

.project h3, .project p {
    position: relative;
    top: 500px;
    transition: 1s;
    z-index: 1;
}

.project:hover h3{
    top: 0;
    transition: 0.75s;
}

.project:hover p {
    top: 0;
    transition: 0.75s;
    transition-delay: 0.1s;
}

.card-img-overlay {
    top: 35%;
    text-align: center;
    padding-bottom: 0;
}

.card-group {
    border-radius: 15px;
    align-items: center;
}

/* about me */
#about {
    height: 100vh;
    background-color: var(--tertiary-color);
}

.about-me img {
    max-height: auto;
    size: cover;
    position: center;
    max-width: 30vh;
}

.round {
    border-radius: 50%;
}

.card {
    padding: 0;
}

.center {
    justify-content: center;
    margin-top: 4vh;
}

svg {
    color: white;
    fill: white;
}

a {
    color: white;
}

a:hover {
    color: var(--fifth-color);
    text-decoration: none;
}

/* contact me */
#contact {
    background-color: var(--fourth-color);
    color: white;
    /* height: 20vh; */
    text-align: center;
    padding-bottom: 10px;
}


/* media queries */
@media screen and (max-width: 800px){
    .projects {
        height: 200vh;
    }
    .project {
        margin-top: 1vh;
    }
    .center-align {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .project img {
        filter: blur(2px);
    }
    .project h3, .project p {
        position: relative;
        top: -10%;
    }
}