@charset "UTF-8";
/* CSS Document */


/* Mobile Viewport: Show mobile class, hide tab-desk class */
@media screen and (max-width:630px){
    .mobile {
        display: block;
    }

    .tablet-desktop {
        display: none;
    }

body{
	background-image:url(images1/background_image.png);
    background-size: cover;
    margin:0 auto;
}

#container{
	width:80%;
    flex-direction: grid;
    display: flex;
	padding: 5px;
	
}

div {
  column-count: 1;
  column-width: 75%;

}

section{
    max-width: 95%;
    margin: 0 auto;
    background-image: url(images1/istockphoto-1007056308-612x612.jpg);
}
.grid{
        display: grid;
        grid-template-columns: 'header', 'section';
        grid-template-rows: 'footer' 'nav';
        gap: 30%;
        padding: 10px;
    }
/* Clear floats after the columns */

header{
    grid-area: header;
	max-width: 40%;
    position: sticky;
    top: 0;
    border: 5px solid lightgray;
    margin: 10px;
	padding:10px;
    background-color: #ADB2D4;
	text-align: center;
    margin:0 auto;

}

h1{
    font-family: 'Homemade Apple', 'serif';
    font-weight: bold;
    position: sticky center;
    color:darkslategray;
    text-shadow: 2% 2% 5% lightgray;
    background-color: #ADB2D4;
    margin:0 auto;
}

h2{
    font-family: 'Alumni Sans Pinstripe', 'serif';
    font-weight: bolder;
    color:darkslategray;
    text-shadow: 2% 2% 5% lightgray;
    position: sticky center;
    background-color: #ADB2D4;
    margin:0 auto;
}

h3{
    font-family: 'Homemade Apple', 'serif';
    position: sticky center;
    color:slategray;
    text-shadow: 2% 2% 5% lightgray;
}

h4{
    font-family: 'Homemade Apple', 'serif';
    position: sticky center;
    color:slategray;
    text-shadow: 2% 2% 5% lightgray;
}

p{
    font-family: 'Alumni Sans Pinstripe', 'serif';
    font-size: larger;
    font-weight: bolder;
    color:darkslategray;
    margin: auto;
    padding: 5px;
    display: flex;
    text-wrap: wrap;
}

/******************nav starts********************/
nav ul{
    position: sticky;
	margin:0 auto;
	list-style:none;
	text-align: center;
	background-color: #EEF1DA;
}
nav li{
	display:inline-block;
	margin:0 auto;
    grid-area: nav;
}
nav a:link, a:visited{
	display:block;
	width:100px;
	color:darkslategray;
	font-weight:bold;
	padding: 3px;
	text-decoration: none;
	text-transform: uppercase;
	font-family:'Alumni Sans Pinstripe', 'serif';
}
nav a:hover{
	background-color: #ADB2D4;
    color:aliceblue;
}
/***************************nav ends**************************************/
section{
	width:85%;
	padding:10%;
	background-image: url(images1/aged-paper-texture-background-design_60389-81.avif);
    background-size: cover;
    margin:0 auto;
}

a:link, a:visited {
    display:block;
	width:100px;
	color:darkslategray;
	font-weight:bold;
	padding: 3px;
	text-decoration: none;
	font-family:'Homemade Apple','Alumni Sans Pinstripe', 'serif';
}
}

a:link, a:visited:hover {
    color:slategray;
    text-decoration: none;
}

hr{
    border: 0;
    height: 30px;
    min-width: 45%;
    width: 95%;
    background: url(images1/divider.png) no-repeat center;
}

figure{
    display: flex;
    float: auto;
    clear: both;
}

.grid{
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 10%;
        padding: 10px;
    }

img{
    max-width:50%;
    height:auto;
    opacity: 95%;
    margin-left: 2rem;
    margin-top: 1rem;
    /*border: #ADB2D4 5px solid;*/
    /*background-color: #EEF1DA;*/
    position: sticky center;
}
 
footer{
	padding:10px;
	color:darkslategray;
	text-align: center;
    background-color: #ADB2D4;
}


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

.mobile {
    display: none;
}

body{
	background-image:url(images1/background_image.png);
    background-size: cover;
    margin:0 auto;
}

#container{
	width:80%;
    flex-direction: grid;
    display: flex;
	padding: 5px;
	
}

/*div {
  column-count: 2;
  column-width: 50%;
  column-gap: 40px;
  column-rule: 1px solid #EEF1DA;
}

.grid{
        display: grid;
        grid-template-columns: 'header', 'section';
        grid-template-rows: 'footer' 'nav';
        gap: 10%;
        padding: 10px;
    }
*/
header{
	width: 40%;
    position: sticky;
    top: 0;
    border: 10px solid lightgray;
    margin: 10px;
	padding:10px;
    background-color: #ADB2D4;
	text-align: center;
    margin:0 auto;

}

h1{
    font-family: 'Homemade Apple', 'serif';
    font-weight: bold;
    position: sticky center;
    color:darkslategray;
    text-shadow: 2px 2px 5px lightgray;
    background-color: #ADB2D4;
    margin:0 auto;
}

h2{
    font-family: 'Alumni Sans Pinstripe', 'serif';
    font-weight: bolder;
    position: sticky center;
    color:darkslategray;
    text-shadow: 1px 1px 3px lightgray;
    background-color: #ADB2D4;
    margin:0 auto;
}

h3{
    font-family: 'Homemade Apple', 'serif';
    color:slategray;
    position: sticky center;
    text-shadow: 1px 1px 2px lightgray;
}

h4{
    font-family: 'Homemade Apple', 'serif';
    color:slategray;
    position: sticky center;
    text-shadow: 2px 2px 4px lightgray;
}

p{
    font-family: 'Alumni Sans Pinstripe', 'serif';
    font-size: larger;
    font-weight: bolder;
    color:darkslategray;
    margin: auto;
    padding: 5px;
    display: flex;
    text-wrap: wrap;
}

/******************nav starts********************/
nav ul{
	margin:0 auto;
	list-style:none;
	text-align: center;
	background-color: #EEF1DA;
}
nav li{
	display:inline-block;
	margin:0 auto;
}
nav a:link, a:visited{
	display:block;
	width:100px;
	color:darkslategray;
	font-weight:bold;
	padding: 3px;
	text-decoration: none;
	text-transform: uppercase;
	font-family:'Alumni Sans Pinstripe', 'serif';
}
nav a:hover{
	background-color: #ADB2D4;
    color:aliceblue;
}
/***************************nav ends**************************************/
section{
	width:85%;
    display: block;
	padding:10px;
	background-image: url(images1/aged-paper-texture-background-design_60389-81.avif);
    background-size: cover;
    /*margin:0 auto;*/
}

a:visited {
    color:darkslategray;
}

a:hover {
    color:slategray;
    text-decoration: none;
}

a:active {
    color:darkslategray;
    text-decoration: none;
}

hr{
    border: 0;
    height: 30px;
    min-width: 45%;
    width: 95%;
    background: url(images1/divider.png) no-repeat center;
}

/*.grid{
        display: grid;
        grid-template-columns: auto auto;
        gap: 30%;
        padding: 10px;
    }*/

img{
    max-width:65%;
    height:auto;
    opacity: 95%;
    margin: 0% auto;
    position: sticky;
    /*border: #ADB2D4 5px solid;*/
    /*background-color: #EEF1DA;*/
}
 
footer{
	padding:10px;
	color:darkslategray;
	text-align: center;
    background-color: #ADB2D4;
}
}