/*
    Natalie DeFrates
    Lab 2: Transitions and Animations - CSS Style Page
    Feb 12, 2026
 */
 @charset "UTF-8";

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

.tab-desk {
    display: none;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}

header{
    grid-area: header;
    position: sticky;
	text-align: center;
    margin:0 auto;
}

.info{
    background-color: #97BECF;
    margin-right: 65%;
    box-shadow: #606F8A 4px 4px;
}


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

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

}

.grid{
    display: grid;
    grid-template-columns:'section1' ;
    grid-template-rows: 'nav', 'section2', 'projects','header', 'info';
    gap: 30%;
    padding: 10px;
}

h1{
   text-align: right;
   font-family: 'Oswald','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2{
    display: flex;
    background-color: #97BECF;
    text-align: center; 
    font-family: 'Oswald', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.section1{
    background-image: url(images/pexels-dav-h-58867999-7952505.jpg);
    margin: 0 auto;
    box-shadow: #606F8A 4px 4px;
    animation: fadeInUp;
}
.section2{
    background-color: #97BECF;
    margin-right: 65%;
    box-shadow: #606F8A 4px 4px;
    
}

.info{
    background-color: #97BECF;
    margin-left: 75%; 
}

nav ul{
    position: sticky;
	margin:0 auto;
	list-style:none;
	text-align: center;
	background-color: #606F8A;
}
nav li{
	display:inline-block;
	margin:0 auto;
    grid-area: nav;
}

nav a:link, a:visited{
	display:block;
	width:100px;
	color:#E3E2DE;
	font-weight:bold;
	padding: 3px;
}

nav a:hover{
	background-color: #97BECF;
    color:#E9DDCE;
    animation-delay: 3ms;
}

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

a:link, a:visited{
	display:block;
	width:100px;
	color:#5F9C9C;
	font-weight:bold;
	padding: 3px;
}

.container div.projects{
    grid-area: projects;
}

.container div.projects:hover{
    animation: ease-in, 3s;
    transition: box-shadow 0.3s;
}

img{
    position: left;
    width: 35%;
    height: 35%;
    display: block;
}


/* 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 {
    text-align: center;
    background-color: #E9DDCE 0.35;
    font-family: 'Garamond', 'Times New Roman', serif;
    font-size: 2em;
}

.info{
    background-color: #97BECF;
    margin-right: 65%;
    box-shadow: #606F8A 4px 0 10px;
}

h1{
    font-family: 'Garamond', 'Times New Roman', serif;
    font-weight: bold;
    color:#E3E2DE;
    text-shadow: 2px 0 5px #606F8A;
    text-wrap: balance;
    text-align: auto;
    margin:0 auto;
}

h2{
    display: flex;
    background-image: url(images/pexels-dav-h-58867999-7952505.jpg);
    text-align: center; 
    font-family: 'Oswald', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*p {
    color: black;
    text-wrap: balance;
    font-size:medium;
    animation: 3s infinite alternate slide-in;
    font-family: Garamond, 'Times New Roman', serif;
    text-align: center;
    font-size: .75em;
}*/

img{
    position: left;
    width: 35%;
    height: 35%;
}
    
    /* Tablet Viewport: Style rules for nav area */
nav{
	width: 75%;
	padding:10px;
	background-color: #5F9C9C;
	margin:0 auto;
}

nav ul {
    list-style-type: none;
    margin:0 auto;
	list-style:none;
	text-align: center;
	background-color: #5F9C9C;
}

nav li {
    font-weight: bold;
    background-color: #5F9C9C;
    display:inline-block;
    margin:0 auto;
}

.section1{
    background-image: url(images/pexels-dav-h-58867999-7952505.jpg);
    margin: 0 auto;
    box-shadow: #606F8A 4px 4px;
    animation: fadeInUp;
}
.section2{
    background-color: #97BECF;
    margin-right: 65%;
    box-shadow: #606F8A 4px 4px;
    
}

.info{
    background-color: #97BECF;
    margin-left: 75%; 
}

body{
    background-size: cover;
    background-attachment: fixed;
    background-image:url(images/pexels-olenkabohovyk-3646172.jpg);
}

footer {
    text-align: center;
    font-size: 0.85em;
    font-weight: bold;
}
}