:root {
    --text: #000000;
    --bgc: #ffffff;
    --project1: #F2F2F2;
    --project2: #E6E6E6;
    --project3: #D9D9D9;
    --project4: #CCCCCC;
    --project5: #BFBFBF;

	/* Margins */
	--margin-outside: 1rem;
	--margin-bottom: 3rem;

	@media screen and (min-width: 850px) {
		--margin-outside: 4rem;
		--margin-bottom: 6rem;
	}

	/* Max width */
	--max-width: 60rem;

}

:root {
    --size-080: 0.563rem;
    --size-090: 0.75rem;
    --size-100: 1rem;
    --size-200: 1.333rem;
    --size-300: 1.777rem;
    --size-400: 2.369rem;
    --size-500: 3.157rem;
    --size-600: 4.209rem;
    --size-700: 5.61rem;

    @media screen and (min-width: 400px) {
		font-size: 1.05rem;
	}
	@media screen and (min-width: 600px) {
		font-size: 1.1rem;
	}
	@media screen and (min-width: 800px) {
		font-size: 1.2rem;
	}
	@media screen and (min-width: 1000px) {
		font-size: 1.25rem;
	}
	@media screen and (min-width: 1200px) {
		font-size: 1.3rem;
	}
	@media screen and (min-width: 1400px) {
		font-size: 1.4rem;
	} 
}

/* .wrapper {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-top: --var(--margin-outside);
    padding-bottom: var(--margin-bottom);
    padding-left: 1rem;
} */

h1 {
    padding-top: 2rem;
    padding-left: 2rem;
    font-family: "Trirong", serif;
    font-size: var(--size-400);

    @media screen and (min-width: 850px) {
        font-size: var(--size-500);
        padding-top: 4rem;
        padding-left: 4rem;
    }
}

h2 {
    font-family: "Inria Sans", serif;
    font-size: 0.7rem;
    font-weight: 100;
    padding-left: 2rem;
    padding-bottom: 2rem;

    @media screen and (min-width: 850px) {
        font-size: var(--size-100);
        font-weight: 200;
        padding-left: 4rem;
        padding-bottom: 4rem;
    }
}

.project {
    padding: 2rem;
    background-color: #825959;
    

    @media screen and (min-width: 850px) {
        padding: 4rem;
    }

    &:hover {
       border-top: 1px solid #000000; 
       border-bottom: 1px solid #000000; 
       margin-left: 4rem;
       transition: all 0.2s ease-in-out;

    }
}

.project-1 {
    background-color: var(--project1);
}
.project-2 {
    background-color: var(--project2);
}
.project-3 {
    background-color: var(--project3);
}
.project-4 {
    background-color: var(--project4);
}
.project-5 {
    background-color: var(--project5);
}

h3 {
    font-family: "Trirong",serif;
    font-size: var(--size-100);

    @media screen and (min-width: 850px) {
        font-size: var(--size-300);
        
    }

    a {
        text-decoration: none
    }
}

.project-description {
    font-family: "Inria Sans", Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: var(--size-080);

    @media screen and (min-width: 850px) {
        font-size: var(--size-100);
    }
}