/* 
Author: SzyNat13
File Name: style.css
Final Project: Fall, 2024
*/

/* Upgrades */
/* Used to flex box for the navigation, set up navigation inside of the header for the tablet and desktop viewport */
/* work on creating the section elements within the article element to make it more correctly */

/* Mobile First Strategy */
/* CSS Reset rules */
body, header, nav, main, footer, img, #myVideo, h2, h3, h4, p, ul, section, article, .container, .grid {
	margin: 0;
	padding: 0;
	border: 0;
}

* {
    box-sizing: border-box;
}

/* Hide tab-desk class */
.tab-desk, #menu-links {
	display: none;
}

/* Style rules for mobile viewport */
/* Style rules for header */
header {
    /*rules for the first type nav*/
    /* background-color: #000;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 90px; */
    background-color: #000;
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .logo {
    margin-right: 20px;
    margin-bottom: 5px;
}
header .logo img {
    height: 75px;
    width: 90px;
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    cursor: pointer;
}

/* Styles rules for mobile navigation */
nav {
	background-color: #000;
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    width: 100%;
}
.mobile-nav a {
	color: #dfdede;
	text-align: center;
	font-size: 2em;
	text-decoration: none;
	padding: 3%;
	display: block;
}
.mobile-nav a.menu-icon {
	display: block;
	position: absolute;
    padding-top: 17px;
	right: 0;
	top: 0;
}
.menu-icon div {
	height: 50px;
	width: 50px;
	background-color: #000;
}

/* Style rules for body */
body {
    background-color: #dfdede;
    font-family: "Cardo", serif;
}

/* Style rules for Fonts */
h2, h3, h4, p {
    color: #2B2B2B;
}

/* Style rules for the main */
#infoVideo {
    text-align: center;
    padding: 25px 25px 15px 25px;
}

#info {
    text-align: center;
    padding-bottom: 15px;
}
#info h3 {
    font-size: 1.5em;
}
#info p {
    font-size: 1.25em;
}

/* Style rules for images, videos */
img, iframe {
	max-width: 100%;
	display: block;
    border-radius: 5px;
}
#myVideo {
	max-width: 100%;
	display: block;
    cursor: pointer;
}

/* Style rules: container content in index.html, and about.html*/
.container {
    /* align-items: center; */
    justify-content: center;
}
.grid {
    position: relative;
    max-width: 450px;
    margin: 20px auto; 
    padding: 10px;
}
.grid .box {
    position: relative;
    background: #000;
    color: #dfdede;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto; 
    padding: 15px; 
    border-radius: 5px;
    text-align: center; 
    box-shadow: 0 4px 6px #e70d0d; 
}
.grid .box .icon img {
    width: 100%; 
    height: auto; 
    padding-bottom: 15px;
}
.grid .box .content {
    padding: 15px;
}
.grid .box .content h3 {
    font-size: 2em;
    color: #dfdede; 
}
.adventure-link {
    text-decoration: none; 
    color: inherit; 
    font-weight: bold; 
}

.grid .box .icon iframe {
    width: 100%; 
    height: auto;
    border: #000;
}

/* Style rules: for section content.html*/
section {
    /* align-items: center; Centers items vertically */
    /* justify-items: center; Centers items horizontally */
    place-items: center; /* both vertically and horizontally */
    display: grid;
    padding: 25px;
}
section .item1, section .item3, section .item5 { 
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 4px 6px #000;
}
section .item2 h3, section .item4 h3, section .item6 h3 {
    padding: 15px 5px 5px 5px;
    text-align: center;
    font-size: 1.5em;
}
section .item2 p, section .item4 p, section .item6 p {
    padding: 10px 5px 5px 5px;
    text-align: justify;
    font-size: 1em;
}
section .item2 p:last-child, section .item4 p:last-child, section .item6 p:last-child {
    padding: 10px 5px 25px 5px;
}

/* Style rules for footer */
footer {   
    position: relative;
    bottom: 0;
    font-size: 0.5em;
    background-color: #000; 
    padding: 2em;
    width: 100%;
    text-align: center;
}

/* Media Query for Tablet Viewport */
@media screen  and (min-width: 600px), print {
    /* Tablet Viewport: Show tab-desk class, hide mobile class */
	.tab-desk {
		display: block;
	}
	.mobile, .mobile-nav {
		display: none;
	}

    /* Header style rules */
    header {
        display: flex;
        background-color: #000;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    header .logo img {
        justify-content: left;
        height: 75px;
        width: 90px;
        padding-top: 10px;
        padding-left: 10px;
        cursor: pointer;
    }
    
    /* Styles rules for nav area*/
    nav {
        display: flex;
    }
	nav ul {
		list-style-type: none;
		text-align: right;
        height: 80px;
        line-height: 80px;
        padding-left: 10px;
        padding-right: 10px; 
        
	}
	nav li {
		border-top: none;
		display: inline-block;
		font-size: 1.5em;
	}
	nav li a {
		padding-left: 20px;
		padding-right: 20px;
		display: block;
		color: #dfdede;
		text-align: center;
		text-decoration: none;
	}

    /* Style rules for main index.html*/
    .container {
        display: flex;
        justify-content: space-around;
    }

    /* Style rules for main content.html*/
    section {
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(3, auto);
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-areas: 
        "  item1     item2      item2 "
        "  item3     item4      item4 "
        "  item5     item6      item6 ";
    }
    
    .item1 {
        grid-area: item1;
    }
    .item2 {
        grid-area: item2;
    }
    .item3 {
        grid-area: item3;
    }
    .item4 {
        grid-area: item4;
    }
    .item5 {
        grid-area: item5;
    }
    .item6 {
        grid-area: item6;
    }

}

/*Media Query for Desktop Viewport*/
@media screen and (min-width: 900px), print {
    /* Desktop Viewport: Styles rules for navigation */
    nav.tab-desk {
        flex-grow: 1;
    }
    nav.tab-desk ul {
        display: flex;
        justify-content: right;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    nav.tab-desk li {
        margin: 0 15px;
    }
	nav li a:hover {
		color: #e70d0d;
        transition: all 0.4s ease 0s;
	}

    /* index.html */
    .grid .box .content h3:hover{
        color: #e70d0d;
        transition: all 0.4s ease 0s;
    }
    
    /* content page desktop viewport */
    section {
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(3, auto);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        grid-template-areas: 
        "  item1     item2      item2 "
        "  item3     item4      item4 "
        "  item5     item6      item6 ";
    }
    
    .item1 {
        grid-area: item1;
    }
    .item2 {
        grid-area: item2;
    }
    .item3 {
        grid-area: item3;
    }
    .item4 {
        grid-area: item4;
    }
    .item5 {
        grid-area: item5;
    }
    .item6 {
        grid-area: item6;
    }
}

/* Query for Print */
@media print {
	body {
	background-color: #fff;
	color: #000;
	}
}