/*
  A submission for Ana Fraley's CSS Grid Assignment
	My Design is titled: Carta Marina
	My Name is: Ana Fraley
	My solution is heavily referencing "Carta Marina" by Olaus Magnus, 1539
			- https://orkneymuseums.co.uk/the-carta-marina-of-olaus-magnus-1539/
		    - https://www.loc.gov/resource/gdcwdl.wdl_03037/?r=0.222,0.253,0.358,0.174,0
*/
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;700&display=swap');

body {
    margin: 0;
    font-family: 'Spectral', serif;
    background-color: #F8F1E7;
    color: #6B4A2F;
    max-width: 1366px;
    min-height: 768px;
}

header {
background-image: url("../images/Carta Marina.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 10px 10px;
    color: #fff;
      align-items: flex-start; /* or center, or flex-end depending on your goal */
}

header img {
  margin-top: auto; /* Pushes the image down within the flex container */
}

header h1 {
    font-size: 70px;
    text-align:center;
    padding:0px;
    margin:5px;
color: white;
    text-shadow: 2px 2px 4px #2F7F8C;
}

h1 {
    font-size: 36px;
    text-align: center;
    color:#0F5C6B;
    margin:auto;
    padding: auto;
}

header p {
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px 4px #2F7F8C;
}

.center {
    text-align: center;
    font-style: italic;
}

nav {
    background-color: #2F7F8C;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    position: relative;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #0F5C6B;
}

nav ul li ul {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: #2F7F8C;
    flex-direction: column;
    min-width: 160px;
    z-index: 1000;
}

nav ul li:hover ul {
    display: flex;
}

main {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    max-width: 1366px;
    margin: 0 auto;
    align-items: center; /* Optional: centers child elements horizontally */
    flex:1; /* Ensures main takes up available space */
}


h2 {
    color: #6B4A2F;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
}
.content-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  margin:10px;
  padding:10px;
  max-width: 1366px;
}

.column {
  flex: 1;
  font-size: 18px;
  line-height: 1.6;
  text-align: justify;
max-width: 1200px;
}


.gallery {   
  height: fit-content;
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto ;
align-content: center;
max-width: 1366px;
}

.gallery figure {
    margin: 0;
    overflow:hidden;
    transition: transform 0.3s ease;
    width: 100%;
}

.gallery text {
    font-size: 16px;
    line-height: 1.5;
    color: #6B4A2F;
    padding: 10px;
    text-align: center;
}

.gallery img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    
}

.gallery figure:hover img {
    transform: scale(1.05);
}

.gallery figcaption {
    padding: 10px;
    font-size: 14px;
    background-color: #F8F1E7;
    color: #6B4A2F;
    transition: background-color 0.3s ease;
    text-align: center;

}

.gallery figure:hover figcaption {
    background-color: #D8A8A8;
    transform: scale(1.05);

}
/* Span classes for grid control */
.span-1 {
    grid-column: span 1;
}
.span-2 {
    grid-column: span 2;
}
#span-2 {
    grid-column: span 2;
    max-height: 600px;
    max-width: 200px;
margin: 0 auto;    
}
.span-3 {
    grid-column: span 3;

}

.span-4 {
    grid-column: span 4;

}

.span-5 {
    grid-column: span 5;

}

.span-6 {
    grid-column: span 6;

}

/* Gallery Scroll */


.gallery-container {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  max-width: 1366px;
}

.gallery-container::-webkit-scrollbar {
  height: 8px;
    max-width: 1366px;
}

.gallery-container::-webkit-scrollbar-thumb {
  background-color: #6B4A2F;
  border-radius: 4px;
    max-width: 1366px;

}

.gallery-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 3px solid #6B4A2F;
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* end */
footer {
    background-color: #2F7F8C;
    background-size: cover; /* or remove if no background image */
    background-position: center;
    text-align: center;
    padding: 30px 10px;
    color: #fff;
    font-size: 14px;
    margin-top: 40px;
    width: 100%;
}



.download-button {
    display: inline-block;
    padding: 1em 2em;
    background-color: #2F7F8C;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid #0F5C6B;
    font-family: 'Georgia', serif;
    font-size: 1.25rem;
    position: relative;
    align-items: center;
}
.download-button:hover {
    background-color: #D8A8A8;
    transform: scale(1.05);
}

section {
    text-align: center;
    position: relative;
     /* Space for movement */
    
}

#dragon {
    width: 380px; /* Adjust size as needed */
    height: 300px;
    position: center; 
}


/* Grid Box */
.span1box{
    border: 2px solid #D8A8A8;
    background-color: rgba(255, 0, 0, 0.1); 
    
}
.span2box{
    border: 2px solid #0F5C6B;
    background-color: #2F7F8C;

    
}
.span3box{
    border: 2px solid #6B4A2F;
    background-color: #6B4A2F;
}
.span4box
{   border: 2px solid #D8A8A8;
    background-color: #2F7F8C;
}
.span5box{
    border: 2px solid #0F5C6B;
    background-color: rgba(255, 0, 0, 0.1); 
}
.span6box{
    border: 2px solid #6B4A2F;
    background-color: #2F7F8C;
}