@charset "UTF-8";

/*---------DEFAULTS--------- */

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(GFX/backgroundtexture.png);
    background-repeat: repeat;
}

html {
    font-size: 62.5%;
}


/*---------STRUCTURE--------- */

.wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: center;
}

.text {
    margin-top: -75px;
    margin-bottom: 85px;
}

.spacer {
    padding: 0 15px;
}

@media only screen and (max-width: 960px) {
    .wrapper {
        width: 95%;
    }
}

img {
    width: 100%;
    max-width: 600px;
}


/* FontAwesome Styling */

i {
    color: #333;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    /* Target the i HTML element directly! I recommend not using this on larger pages!  */
}

i:hover {
    color: #C59A67;
}

.fa {
    /* This is another fontawesome class to style all icons */
}

.fa.fa-instagram {
    /* You can style individual icons like this */
}

.text .fa.fa-facebook {
    /* Or get VERY specific as to which ones your styling! Yay! */
}


/* FontAwesome Styling Ends */

h1 {
    font: 2.8rem 'Nunito', sans-serif;
    font-weight: 200;
    letter-spacing: .2rem;
    margin-bottom: 30px;
    color: #333;
}

a {
    color: #4e4e4e;
    font-size: 3rem;
    margin: 0 15px;
}

a:visited {
    color: #333;
}

a:hover,
a:active {
    color: #C59A67;
}

@media only screen and (max-width: 650px) {
    a {
        font-size: 3.8rem;
    }
    .text {
        margin-top: -50px;
    }
    h1 {
        font-size: 4vw;
    }
}


/*---------ANIMATION--------- */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
}

.first {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.second {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*---------TYPOGRAPHY--------- */


/*---------LINKS--------- */


/*--------DESKTOP MEDIA QUERY--------*/


/*-------Browser is larger than 960px------*/


/*--------TABLET MEDIA QUERY--------*/


/*--------Browser is between 600px and 960px------*/


/*--------MOBILE MEDIA QUERY--------*/


/*--------Browser is between 0px and 600px.--------*/