/*
Author: Douglas Ha
Date: 05/16/2025
File Name: styles.css for project 2 start file
*/

/* CSS Reset */
body, header, nav, main, footer, img, h1, h3, ul, section, aside, figure, figcaption {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Style rules for body and images */
body {
}

img {
    max-width: 100%;
}
/* Style rule for box sizing applies to all elements */
* {
  box-sizing: border-box;
}

/**************** Style rules for mobile viewport*****************/

/* Style rule to hide tab-desk class */
.tab-desk {
}

/* Style rules for header content */
header {
}

header h1 {
}

header h3 {}
#logo {}

/* Style rules for navigation area */
nav {}

nav ul {}

nav li {}

nav li a {
}

/* Style rule for hero image */
#hero {
    clear: left;
}

/* Style rules for main content */
main {
}

main h2 {
}

main p {
}

main ul {
}

aside{
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	color:#234b95;
	text-shadow:5px 5px 10px #6D96A6;
}

figure{
	position:relative;
	max-width:850px;
	margin: 2% auto;
}

figcaption{
	position:relative;
	bottom:0;
	background-color:#6D96A6;
	color:#fff;
	width:100%;
	padding:5% 0;
	text-align:center;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:1.5em;
	font-weight:bold;
}

.round {}


#pamper, #full, #basic {}


/* Style rules for footer content */
footer {
    text-align: center;
    font-size: 0.85em;
    clear: left;
    color: #6D96A6;
    font-weight: bold;
}

footer a {
    color: #C1D4D9;
    text-decoration: none;
}

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

    .mobile {
        display: none;
    }
    
    /* Tablet Viewport: Style rules for nav area */
    nav li {
        border-top: none;
        display: inline-block;

    }
    
    nav li a {}
    
	.grid{}
	aside{}
}

/* Media Query for Desktop Viewport */
    @media screen and (min-width: 1024px), print{
    /* Desktop Viewport: Show tab-desk class, hide mobile class */
    .tablet-desktop {}

    .mobile {}
    
    /* Desktop Viewport:Style rules for header content */
    header {}
    
    header h1 {}

    header h3 {}

    /* Desktop Viewport: Style rules for nav area */
    nav {}
    
    nav ul {}

    nav li {
    }

    nav li a {}
    
    nav li a:link {}
	
	.grid{}
	aside{}
}
    /* Desktop Viewport: Style rules for main content */
    #pamper, #full, #basic {
        width: 25%;
        float: left;
        margin: 0 2%;
    }

/* Media Query for Large Desktop Viewports */
    @media screen and (min-width: 1920px), print{
    body {}
    main {}
    
    #container {}
        
    main {}
    
    footer, footer a {}
    }