/*CSS Variables Awesome!*/
:root {
    --clr-primary-300: #f3eed9;
    --clr-primary-400: #824936;
    --clr-primary-100: #fff;
    --clr-neutral-900: #222c2a;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.6;
    background-color: var(--clr-neutral-900);
}

body,
h1,
h2,
h3,
p {
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
    border-radius: 5%;
}

h1,
h2,
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1;
    
}

h1,
h2,
h3,
p {
    text-shadow: 1px 1px 5px black;
}

h1,
p,
h2,
h3,
img {
    margin-top: 1em;
    margin-bottom: 1em;
    color: var(--clr-primary-300);
}

section
 {
    padding: 3rem 0;
}

.container {
    margin-inline: auto;
    width: min(90%, 70.5rem);
}



.split {
    display: flex;
    flex-direction: column;
}

@media (min-width: 40em) {
    .split {
        flex-direction: row;
    }
    .split > * {
    flex-basis: 100%;
}
    .split > * + * {
        margin-left: 2em;
    }
}



.text-center {
    text-align: center;
}

.bg-head {
    box-shadow: 1px 1px 1px grey,1px -1px 1px 1px grey;
    border-radius: 5%;
    background-color: darkslategray;
}

.bg-info {
    
    color:#222c2a;
}

.bg-sec1 {
    background-color: var(--clr-neutral-900);
   
    
}
.bg-sec2 {
    background-color: var(--clr-neutral-900);
    color: var(--clr-primary-100);
}
.bg-sec3 {
    background-color: var(--clr-neutral-900);
    color: var(--clr-primary-100);
}

.bg-sec4 {
    background-color: darkslategray;
    border-radius: 5%;
    box-shadow: 1px 1px 5px 1px silver;
}


h4 {
    padding: 0;
    margin: 0;
}

.header h1 {
    color: orange;
    font-size: 3rem;
}

.header {
    
    border-radius: 5%;
    background-color: darkslategray;
    box-shadow: 1px 1px 1px 1px silver;
    
}

a:hover {
    color: lime
}

.fa {
    padding: 15px;
    border-radius: 50%;
}
.fa-facebook {
    background: #3b5998;
    color: white;
}
.fa-facebook:hover  {
    color: blue;
}
.bg-sec4 a {
    display: inline-block;
    
}

a {
    color: yellow;
    font-size: 1.5rem;
}