/*
style.css
Anton Kasabutski
3 August, 2019
This file contains information about website styles
*/

body {
    margin:0;
    background:#262e3c;
}

header {
    background-image:linear-gradient(315deg,#f9bf3e,#ffffff);
    box-shadow:0 0 4px 0 rgba(0,0,0,.08),0 2px 4px 0 rgba(0,0,0,.12);
}

nav li a {
    text-decoration:none;
    color:#0087e0;
    cursor:pointer;
    display:inline-block;
    padding:20px 0;
    line-height:1.5;
}

/* This allows links to change a color while hovered */
nav:hover li:hover a:hover {
    color:#29b2fe;
}

img {
    vertical-align:middle;
    width:200px;
}

ul {
    display:inline-block;
    margin:0;
}

li {
    display:inline-block;
    padding:0 16px;
    font-family: 'Pacifico', cursive;
}

main {
    color:#1f2836;
    background-image:linear-gradient(315deg,#29b2fe,#0069C7);
    height:55%;
}

h1 {
    font-size:30px;
    text-align:center;
    font-family: 'Open Sans Condensed', sans-serif;
    margin: 0;
}

h3 {
    text-align:center;
    font-family: 'Open Sans Condensed', sans-serif;
}

section p {
    max-width:30%;
    padding:0px 12px;
    font-family: 'Roboto', sans-serif;
    margin:0;
}

footer {
    background:#262e3c;
    height:80px;
}

footer table {
    height:100%;
    margin-left:20px;
    margin-top:0;
    margin-bottom:0;
    margin-right:0;
}

footer table tr td {
    color:#F7F7F7;
    margin:0;
}

/* Tag that has class=Content will use parameter specified below */
.Content {
    height:400px;
    width:100%;
}

.Content main {
    height:100%;
    width:100%;
}

.Content main section {
    height:20%;
    width:100%;
}

.Content .TableContact section {
    height:100%;
    width:100%;
}

.TableContact {
    height:80%;
    width:100%;
}

.TableContact section table {
    margin:0;
    height:100%;
    width:100%;
}

.TableContact section table tr {
    height:25%;
    width:100%;
}

.TableContact section table tr td {
    text-align:center;
}

.TableServices section table {
    margin:0;
    height:100%;
    width:100%;
}

.TableServices section table tr td {
    text-align:center;
    width:33%;
}

.TableHome section table {
    margin:0;
    height:100%;
    width:100%;
}

.TableHome section table tr th {
    text-align:center;
    width:50%;
}

.TableAbout section table {
    margin: auto;
    height:100%;
    width:80%;
}

.TableAbout section table tr {
    text-align:center;
    width:50%;
}

.LayoutGallery {
    height:100%;
    width:45%;
    max-width:45%;
    float: left;
    margin-left:40px;
}

.LayoutGallery table {
    width:100%;
    height:100%;
}

.LayoutGallery table tr {
    width:100%;
}

.LayoutGallery table tr td {
    width:50%;
}

.LayoutGallery audio {
    width:100%;
}

.Content video {
    height:100%;
    max-width:45%;
    float:right;
    margin:0 0;
    margin-right:20px;
}

/* This part descirbes animation style */
.LayoutGallery img {
    transition:transform 0.25s ease;
    width:100%;
}

.LayoutGallery img:hover {
    transform:scale(1.35);
}