*{ margin: 0;
font-family: sans-serif;} 
html {scroll-behavior: smooth;}

nav {position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 20px; 
gap: 77px;
background-color: rgba(0, 0, 0, 0.4); z-index: 1000;}

.nav-link { color: white;
font-size: 20px;
font-family: sans-serif;
font-weight:100;}

header { display: flex; 
height: 225vh;
flex-direction: column; 
 justify-content: flex-start; 
align-items: center; 
background-image: url(../images/header.jpeg);
background-repeat: no-repeat;
 background-size: cover; gap: 7.5vh;}

#title { padding: 0;
margin: 0;
align-self: flex-end;    
color: white;         
font-size: 40px;
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 20px;
font-family: "Gorditas", serif;}


#logoheader { padding-top: 30vh; 
 max-width: 80%; }

#buttonheader {width: fit-content;
background-color: #D1AE1C;
color: white;
border: none;
border-radius: 25px;
padding: 10px 30px;
font-size: 3vh;
cursor: pointer;
transition: 0.3s;
text-decoration: none;
display: inline-block; 
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
font-family: "Gorditas", serif;
filter: drop-shadow( -4px 12px 3px rgb(0, 0, 0, 0.5));}


#buttonheader:hover {background-color: #AD911D; 
color: white;}


#expotext { align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
background-image: url(../images/heroexpo.jpeg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 1700px;
margin-top: 20vh;
    border: 20px solid #ffffff;}

#text { background-color: rgba(0, 0, 0, 0.6);
color: white;padding: 15vh 50px;display: flex;
 flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;}


#expotext h1 p { z-index: 1000;}
#text p { font-size: 20px;}
#text h1 { font-size: 50px;
font-family: "Gorditas", serif;}


#Story {display: flex;
flex-direction: row;
min-height: 100vh; 
width: 100%;
scroll-margin-top: -8vh;}

#textstory {flex: 1;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0vh;}

#portrait {flex: 1;
width: 50%;
height: auto;
object-fit: cover; }

#textstory h2 { color: #C7D431;
    padding-bottom: 7vh;
font-family: Gorditas;}
#textstory p { color: white;
font-size: 2.1vh;
font-weight:100;}

#button2 { width: fit-content;
background-color: #527598;
color: white;
border: none;
border-radius: 25px;
padding: 10px 30px;
font-size: 3vh;
cursor: pointer;
transition: 0.3s;
text-decoration: none;
display: inline-block; 
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
font-family: "Gorditas", serif;
filter: drop-shadow( -4px 12px 3px rgb(0, 0, 0, 0.5));}

#button2:hover {background-color: #2B3D4F; 
color: white;}

#footer { background-color: #D1AE1C;}
#footer p { font-size: 24px;}

#inforeserv { display: flex;
flex-direction: column;
align-items: center;padding-bottom: 8vh;
gap: 8vh;
padding-top: 5vh;}
#inforeserv h1 {font-size: 36px;}

#infoboutton { display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 4vh;
justify-content: center;
gap: 40vh;}

#stickers { height: 55vh;
z-index: 999;
position: absolute; 
top: -120px;
left: -90px;}