:root {
    --font-size: 16px;
    --primary-color: #b34500;
    --background-color: rgba(223, 115, 0, 0.51);
    --font-color: black;
    --font-color-light: white;

    --header-padding: 1rem 2rem;

    --footer-color: rgba(150, 79, 3, 0.766);

    --default-padding: 2rem;
    --default-margin: 1rem;
    --default-border-radius: .5rem;

    --card-background: #f4f4f4;
    --card-border-color: #bcbcbc;
}

/*Defaults*/
body {
    background: linear-gradient(
        180deg,var(--background-color) 10%, 
      rgba(255, 255, 255, 1) 15%);


    font-size: var(--font-size);

    margin: 0;
    min-height: 100vh;

    display: grid;
    grid-template-rows:
        auto   /* header */
        1fr    /* main */
        auto;  /* footer */
}

img {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--font-color);

    font-size: 1.3rem;
}

a:hover {
    animation: hover .2s ease 0s 1 normal forwards;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;

    margin-bottom: var(--default-margin);
}

p {
    text-wrap:initial;
}

h3 {
    font-size: 1.5rem;
    margin: 0;
}

.hero {
    text-align: center;
    background-color: rgba(241, 90, 30, 0.265);
    border-radius: var(--default-border-radius);
    width: 80%;
    justify-self: center;
    padding: var(--default-margin);

    border-style: dotted;
    border-color: rgba(241, 90, 30, 0.265);
}

.card {
    background: var(--card-background);
    padding: var(--default-padding);
    border-radius: var(--default-border-radius);
    border-style: dotted;
    border-color: var(--card-border-color);

    box-shadow: 8px 8px 16px 1px #00000036;
}

/*Header*/

.header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    padding: var(--header-padding);
}

nav {
    display: grid;
    grid-auto-flow: column;
    gap: var(--default-padding);
}


.currentNav {
    font-weight: bold;
    text-decoration: underline;
}

.important {
    font-size: 1.5rem;
    padding: var(--default-padding);
}


/*Main*/

main {
    width: 75%;

    margin: auto;
    padding: var(--default-padding);

    display: grid;
    gap: var(--default-padding);
	
	justify-content: center;
}

#images {
    display: grid;
    gap: var(--default-margin);

    grid-template-columns:
        repeat(auto-fit, minmax(15rem, 1fr));

        justify-content: center;
}


/*Team*/

.team-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--default-padding);
    margin-bottom: var(--default-margin);
}


/*Services*/

.services-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--default-padding);
}


/*Footer*/

footer {
    background: var(--background-color);
    color: var(--font-color);

    padding: var(--header-padding);
}

.footer-grid{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(12rem, .5fr));
    gap: 1rem;
}

/*Customs*/
.currentNav {
    text-decoration: underline;
    color: var(--primary-color);
}

.padding-rem-1 {
    padding: 1rem;
}

.background-none {
    background: none;
}

.border-none {
    border-style: none;
}

.box-shadow-none {
    box-shadow: none;
}

/*Animations*/
@keyframes hover {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}