/* ------------------------- GRID BLOCKS ------------------------- */

.website-container {    /* contains header, sidebar, content, and footer */
    max-width: 1100px;
    margin: 100px auto;
    display: grid;  /* sets container structure to grid formatting */
    grid-gap: 5px;
    grid-template-columns: 1fr 5fr ;    /* assigns column spacings - adjust to fit more */
}

header {    /* assigns header to grid */
    grid-row: 1 / 2;    
    grid-column: 1 / 3;
}   

nav{
    grid-row: 2 /3;
    grid-column: 1 / 2;
    height: max-content; /*constrains container height to contents*/
}

main {  /* this container holds website content */
    grid-row: 2 /3;
    grid-column: 2 /3;
    height: max-content; /*constrains container height to contents*/
    width: max-content;
    padding: 5px;

    display: flex;
    flex-direction: column; /* Organizes content in column format */
}

footer {    /* sets general footer parameters */
    grid-row: 3 / 4;
    grid-column: 1 /3;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ------------------------- IMAGES ------------------------- */

.image-container {   /* using this container to control images in main */
    border: 2px solid ;
    width: 500px;
    height: 400px;

    justify-content: center;    /* keep images at center page */
    align-items: center;
    position: relative;
}

img {    /* generic image properties - should apply well to all image styles */
    object-fit: cover;
    width: 100%;    /* crop images to same size, fitting container */
    height: 100%;  
}

.fade-effect{   
    position: absolute;
    opacity: 0;
    animation: fade 16s infinite;
}

@keyframes fade {   /* sets animation tempo */  
5%, 100% { opacity: 0; }
55%, 75% { opacity: 1; } 
}

.fade-effect:nth-child(1) {animation-delay: 0s;}
.fade-effect:nth-child(2) {animation-delay: 8s;}

.gif-container{
    position: relative;
    width: 100px;
    height: 100px;
    margin-left: 30px;
}

/* ------------------------- DIVS ------------------------- */

.trademark-container{
    position: relative;
    font-size: 10px;
    color: #444;
}

.links-container{
    position: relative;
    font-size: 10px;
}

/* ------------------------- ELEMENTS ------------------------- */

ul {
    list-style-type: none;  /* removes bullet points from unordered list */
}

a {
    text-decoration: none;  /* sets link color and removes underline */
    color: #444;
}

li a {  
    text-decoration: none;  /* sets font size for sidebar */
    font-size: 12px;
    font-weight: 500;
    color: #444;
}

p {
    font-weight: 300;   /* sets font parameters for text blocks */
    font-size: 16px;
}

.website-container {
    border: 2px solid black;
}

header {
    border: 2px solid orange;
}

nav {
    border: 2px solid red;
}

main {
    border: 2px solid blue;
}

footer {
    border: 2px solid green;
}