/*-- 
    Natalie DeFrates
    Lab 0: CSS stylesheet
    Jan 27, 2026
 --*/

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

/* Style rule to hide tab-desk class */
.tab-desk {
    display: none;
}
/* Style rules for header content */
header {
    background-image: url(comp2page/images/grass.jpg);
    opacity: 0.5;
    width: 100%;
    height: 65%;
    text-align: center;
    font-display: block;
}

img{
    margin: 0 auto;
    position: center;
    border: bisque 5px solid;
    border-radius: 50%;
}

.social-media-icons {
    text-align: center;
    margin-top: 10px;
}

h1{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color:whitesmoke;
    text-wrap: balance;
    text-align: center;
    margin:0 auto;
}
h2{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:black;
    margin:0 auto;
}
h3{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}

h4{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}

/* Style rules for navigation area */
nav{
	width: 75%;
	padding:10px;
	background-color: transparent;
	margin:0 auto;/*centers the layout in browser*/
}

ul {
    list-style-type: none;
    max-width: fit-content;
    position: center;
    margin:0 auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 2px 2px 5px ;
	list-style:none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: auto;
	background-color: #D4E3D9;
}


/* Style rules for main content */
body{
    background-image: url(comp2page/images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

p {
    color: #40634C;
    text-wrap: balance;
    font-size:medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-size: 1em;
}

footer {
    text-align: center;
    background-color: #19380F;
    margin-top: 20%;
    width: 100%;
}



/* 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 {
        display: none;
    }

header {
    background-image: url(comp2page/images/grass.jpg);
    opacity: 0.5;
    width: 100%;
    height: 200px;
    text-align: center;
    font-display: block;
    margin: 0 auto;
}

img {
    position: center;
    display: block;
    margin: 0 auto;
    border: bisque 5px solid;
    border-radius: 50%;
}

.social-media-icons {
    text-align: center;
    margin-top: 10px;
}


h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: xx-large;
    color:whitesmoke;
    text-wrap: balance;
    text-align: center;
    margin:0 auto;
}
h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:black;
    margin:0 auto;
}
h3{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}

h4{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}
    
    /* Tablet Viewport: Style rules for nav area */
nav{
	width: 75%;
	padding:10px;
	background-color: transparent;
	margin:0 auto;/*centers the layout in browser*/
}

ul {
    list-style-type: none;
    max-width: fit-content;
    position: center;
    margin:0 auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 2px 2px 5px ;
	list-style:none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: auto;
	background-color: #D4E3D9;
}

body{
    background-image: url(comp2page/images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

p {
    color: #40634C;
    text-wrap: balance;
    font-size:medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-size: 1em;
}

footer {
    text-align: center;
    background-color: #19380F;
    margin-top: 20%;
    width: 100%;
}
}

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

    .mobile {
        display: none;
    }
    
    /* Desktop Viewport:Style rules for header content */
header {
    background-image: url(comp2page/images/grass.jpg);
    opacity: 0.5;
    width: 100%;
    height: 200px;
}

img{
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    border: solid bisque 5px;
}


h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color:whitesmoke;
    text-wrap: balance;
    text-align: center;
    margin:0 auto;
}
h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:black;
    margin:0 auto;
}
h3{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}

h4{
    font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-wrap: balance;
    text-align: center;
    color:bisque;
    margin:0 auto;
}

body{
    background-image: url(comp2page/images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

p {
    color: #40634C;
    text-wrap: balance;
    font-size:medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-size: 1em;
}
    /* Desktop Viewport: Style rules for nav area */
nav{
	width: 75%;
	padding:10px;
	background-color: transparent;
	margin:0 auto;/*centers the layout in browser*/
}

ul {
    list-style-type: none;
    max-width: fit-content;
    position: center;
    margin:0 auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 2px 2px 5px ;
	list-style:none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: auto;
	background-color: #D4E3D9;
}

footer {
    text-align: center;
    background-color: #19380F;
    margin-top: 20%;
    width: 100%;
}
}

/*-- End of styles.css --*/