/* Starter Stylesheet for our project.
-----------------------------------------------
Please read the comments to understand what
this code does. 

Refer to w3schools.com for help
-----------------------------------------------
*/

/*  This removes the default browser settings */
* {
    margin: 0; 
    padding: 0;
}

/*  
    This sets the outer container for your site.
    To use it, you will need to create division tag
    to hold the content. Give it an id="wrapper".
    I would look like this...
        <div id="wrapper">
    Put this division right after the body tag
    and close it right before the close of the body tag
*/

header {
    background-color: #1BA9B6;
    padding: 40px 20px;
}

/*Kira Dancik (my name in the header)*/
#header-text {
    color: #6BE1FF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FDFFD6;
    font-family: Inter;
    font-size: 75px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/*Welcome to my website*/
#subheader-text {
    color: #6BE1FF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FDFFD6;
    font-family: Inter;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 10px;
}

.page-title {
    color: #6BE1FF;
    background-color: white;
    padding-left: 600px;
}

.page-info {
    text-align: center;
    background-color: white;
    opacity: .8;
}

#links {
    background-color: #1BA9B6;
    opacity: .8;
    text-align: center;
}

.bio-text {
    background-color: #1BA9B6;
    opacity: .8;
    padding: 10px;
    text-align-last: center;
}

#resume-link {
    background-color: #6BE1FF;
    padding-left: 50px;
}

#wrapper {
    position: relative;
    margin: 0 auto;
    width: somepixels;
    background-color: bisque;
    color: black;
}

body {
    background-image: url(../_images/SiteBackground.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.wrapper {
    width: 950px;
    margin: 0 auto;
}

/*Nav bar*/
nav {
    position: absolute;
    left: 800px;
    top:60px;
}

nav a {
    text-decoration: none;
    color: black;
    background-color: #6BE1FF;
    display: inline-block;
    font-size: 30px;
}

nav a:hover {
    color: #E98FC1;
}

footer {
    position: relative;
    top: 700px;
    bottom: 0px;
    height: 70px;
    width: 100%;
    color: white;
    background-color: #1BA9B6;
}

#pro-photo {
    padding-left: 500px;
}

#video-header {
    padding-left: 520px;
}

#video {
    padding-left: 350px;
}

#bio-header {
    text-align: center;
}

.gallery-photos {
    padding: 10px;
}