/*Colors*/

:root {
    --light-green: #c4eb96;
    --dark-green: #2b4219;
    --grey-green: #b3c2a7;
    --light-blue: #87ceeb;
    --white-white: #ffffff;
}

/*Fonts*/
@font-face {
    font-family: 'Andale Mono';
    src: url('fonts/andalemono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ciara Handwriting';
    src: url('fonts/Ciara_handwriting-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}
/*How to handle social icons*/
.social-icons {
    text-align: center;
}

.social-icons a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
}

.social-icon {
    display: block;
    width: 40px;
    height: 40px;

    background-color: var(--light-green);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.github-icon {
    -webkit-mask-image: url("images/Ciara_Github.svg");
    mask-image: url("images/Ciara_Github.svg");
}

.instagram-icon {
    -webkit-mask-image: url("images/Ciara_Instagram.svg");
    mask-image: url("images/Ciara_Instagram.svg");
}

.linkedin-icon {
    -webkit-mask-image: url("images/Ciara_LinkedIn.svg");
    mask-image: url("images/Ciara_LinkedIn.svg");
}

.social-icon:hover {
    background-color: var(--grey-green);
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;

}

nav {
    padding: 1em;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

.content {
    padding: 20px;
}