@charset "UTF-8";
/* CSS Document */

/*~~~~~ Notes ~~~~~
- Colors used:
    Black = rgb(12, 12, 12)
    White = rgb(256, 256, 256) or #FFFFFF
    Off-white = #f1f1f1
    Grey = #757575
    Teal = #c34a18
    Burgundy = #c34a18


/**********************
Smartphone size
**********************/

html {
    height: 100%;
    background-color: black;
}

body {
    display: block;
    box-sizing: border-box;
    align-items: center;
    background-color: white;
    height: 100%;
    margin: 0;
    border: 20px solid black;
}

#homeIcon {
    position: absolute;
    z-index: 0;
    filter: invert(.08);
    transform: translate(-50%, -8%);
    left: 50%;
}

.bodyContent {
    z-index: 1;
}

header {
    margin: 50px;
    text-align: center;
    z-index: 1;
}

h1 {
    color: rgb(12, 12, 12);
    font-family: europa,sans-serif;
   font-weight: 300;
   font-style: normal;
    font-size: 3em;
}

h1 em {
   color: #5A7037;
   font-style: normal;
}

#parent {
    margin: auto;
}

.nav {
    margin: 50px auto;
    text-align: center;
    font-family: iAWriterDuospace-Regular, "Courier New", monospace;
    font-size: 1.5em;
    position: relative;
}

.nav ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
}

.nav li {
    margin-bottom: 30px;
}

.social {
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 10%;
    text-align: center;
}

.icon {
    margin: auto 20px;
    height: 29px;
    width: auto;
    border: 0;
}

footer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: .6em;
    color: #757575;
}

/**********************
Tablet size (on desktop)
**********************/
@media only screen and (min-width: 768px) {

    header {
        margin: 88px auto 0;
    }
    
    h1 {
        font-size: 3.5em;
    }

    .nav a:hover {
        color: rgb(12, 12, 12);
        text-decoration: underline;
        text-decoration-color: #c34a18;
        -moz-text-decoration-color: #c34a18;
        -webkit-text-decoration-color: #c34a18;
        transition: none;
    }
    
    .social {
        width: 500px;
    }

    .icon {
        margin: auto 40px;
    }
    
}

/**********************
Tablet size (mobile)
**********************/
@media only screen and (min-width: 768px) and (min-height: 1024px) {

    header {
        margin: 150px auto 0;
    }

    .nav {
        margin: 125px auto;
    }

}

/**********************
Desktop size
**********************/
@media only screen and (min-width: 1024px) {
    
    .nav {
        margin: 85px auto;
    }
    
}

/**********************
Anchor link styles
**********************/

a:link {
	color: rgb(12, 12, 12);
	background-color: transparent;
	text-decoration: none;
}

a:visited {
	color: rgb(12, 12, 12);
	background-color: transparent;
	text-decoration: none;
}

a:hover {
	color: #c34a18;
	background-color: transparent;
	text-decoration: underline solid #c34a18;
}


/**********************
Imported fonts
**********************/

@font-face {
	font-family: iAWriterDuospace-Bold;
	src: url(../fonts/iAWriterDuospace-Bold.otf);
}

@font-face {
	font-family: iAWriterDuospace-BoldItalic;
	src: url(../fonts/iAWriterDuospace-BoldItalic.otf);
}

@font-face {
	font-family: iAWriterDuospace-Regular;
	src: url(../fonts/iAWriterDuospace-Regular.otf)
}

@font-face {
	font-family: iAWriterDuospace-RegularItalic;
	src: url(../fonts/iAWriterDuospace-RegularItalic.otf);
}

@font-face {
    font-family: HelveticaNeue;
    src: url(../fonts/HelveticaNeue.ttf);
}

@font-face {
    font-family: HelveticaNeueBd;
    src: url(../fonts/HelveticaNeueBd.ttf);
}

@font-face {
    font-family: HelveticaNeueLt;
    src: url(../fonts/HelveticaNeueLt.ttf);
}

@font-face {
    font-family: HelveticaNeueMd;
    src: url(../fonts/HelveticaNeueMed.ttf);
}