.container{
    height:100%;
    font-family: 'Times New Roman', Times, serif;
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 3rem auto 3rem;
    grid-template-areas: 
    "h h h h h h h h h h h h"
    "z z z z z z z z z z z z"
    "t t t t t t t t t t t t"
    "l l l l l l l l l l l l"
    "a a a a a a a a a a a a"
    "i i i i i i i i i i i i"
    "b b b b b b b b b b b b"
    "m m m m m m m m m m m m"
    "c c c c c c c c c c c c"
    "n n n n n n n n n n n n"
    "d d d d d d d d d d d d"
    "j j j j j j j j j j j j"
    "e e e e e e e e e e e e"
    "k k k k k k k k k k k k"
    "f f f f f f f f f f f f"
    "g g g g g g g g g g g g"
    "q q q q q q q q q q q q"
}
/* Start of overall CSS*/
.container > div {
  align-items: center;
  font-size: 2em;
  color: white;
}
html, body {
  box-sizing: border-box;
  background:linear-gradient( rgb(216, 237, 255), lightblue, rgb(189, 204, 253) ,lightpink, rgb(216, 237, 255));
  height: 100%;
  padding: .35rem;
  margin: 0rem;
}
/* End of overall CSS*/
/* Start of body CSS*/
.header{
    grid-area: h;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: white;
    font-weight:bold;
      background-color: #dd8e75;	
}
#summary
{
  grid-area: z;
  align-items: center;
  display: grid;
}

.header2{
    grid-area: t;
    display:flex;
    justify-content: center;
    text-align: center;
    background-color: #e2a499;
}
#contents{
    grid-area: z;
    align-items: center;
    display: grid;
}
.list{
    grid-area: l;
    padding-bottom: 2rem;
    padding-top: 2rem;
    max-width: 100%;
    height: auto;
    display:flex;
    justify-content: center;
    background-color: #Eddbd2;
    border: dotted;
}
/* Start of nav CSS*/
#nav{
  text-align: center;
  align-self: center;

}
a{
color: White;
text-decoration: none;
}
a:link{
  color: white;
}
/* End of nav CSS*/

.content {
  background-color: #e7c2ba;
}
.image{
  background-color: grey;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

#i1{
  background-image: url("../images/Italy.jpg");
  background-color: #ce8054;
    background-position: center;
    background-size: cover;
    position: relative;
    height: auto;
    grid-area: a;
    text-align: center;
    text-shadow: 0.25rem 0.25rem black;
    
}
#i2{
    background-image:url('../images/Spain.jpg') ;
    background-color: #ce8054;
    background-position: center;
    background-size: cover;
    position: relative;
    grid-area: b;
    text-align: center;
    text-shadow: 0.25rem 0.25rem black;
    
}
#i3{
    background-image:url('../images/France.jpg') ;
    background-color: #ce8054;
    background-position: center;
    background-size: cover;
    position: relative;
    grid-area: c;
    text-align: center;
    text-shadow: 0.25rem 0.25rem black;
}
#i4{
    background-image:url('../images/Japan.jpg') ;
    background-color: #ce8054;
    background-position: center;
    background-size: cover;
    position: relative;
    grid-area: d;
    text-align: center;
    text-shadow: 0.25rem 0.25rem black;
}
#i5{
    background-image:url('../images/Mexico.png') ;
    background-color: #ce8054;
    background-position: center;
    background-size: cover;
    position: relative;
    grid-area: e;
    text-align: center;
    text-shadow: 0.25rem 0.25rem black;
}

#ca{
    grid-area: i;
    text-align: center;
}
    
#cb{
    grid-area: m;
    text-align: center;
    
}
#cc{
    grid-area: n;
    text-align: center;
    
}
#cd{
    grid-area: j;
    text-align: center;
    
}
#ce{
    grid-area: k;
    text-align: center;
    
}
/* Start of body CSS*/
/* Start of table CSS*/
caption{
  background-color:#e2a499;
}
.imagesa
{
  justify-content: center;
  width: min-content;
}

.imagesa > img
{
  padding-top: 1.5rem ;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem ;
  margin-bottom: 1.5rem;
}
.imagesb > img
{
  padding-top: 1.5rem ;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem ;
  margin-bottom: 1.5rem;
}

table, th, td{
  border: dotted;
  text-align: center;
  justify-content: center;
  width: 75%;
}
.tableContaner
{
  grid-area: f;
  align-items: center;
  width: 100%;
}
.table{
  display:flex;
justify-content: center;
  background-color: #dd8e75;
  border-collapse: collapse;
  width: 80%;
  align-items: center;
  margin-left: 10%;
}
.imagesb{
  justify-content: center;
  width: min-content;
}

/* End of table CSS*/
/* Start of video CSS*/
.plane{
  grid-area: g;
  display: flex;
	justify-content: space-around;
	align-items: center;
  border: dotted;
}
.planew{
  grid-area: g;
}
.planea{
  grid-area: g;
  margin-left: auto;
}
/* End of video CSS*/
/* Start of footer CSS*/
.footer{
  grid-area: q;  
  text-align:center;
	display: flex;
	justify-content: space-around;
	align-items: center;
    background-color: #e7c2ba;
  padding-top: 4rem;
  padding-bottom: 5rem;
    font-size: 1rem;
    color: white;
    font-family:Garamond, Georgia, 'Times New Roman';
}

.social ul {
    padding-left:.3rem;
}
    .fa {
  padding: .3rem;
  text-align:center;
  text-decoration:none;
  margin: .04rem .04rem;
    }
    .fa:hover {
  opacity:07;
    }
    .fa-facebook {
  background: #3B5998;
  color:white;
    }
    .fa-twitter {
  background:#55acee;
  color: white;
    }
    .fa-instagram {
  background:#125688;
  color: white;
    }
    .fa-snapchat-ghost {
  background:#fffc00;
  color: white;
  text-shadow: -3px 0 black,  3px 0 black, 3px 0 black, -3px 0 black;
    }

form{
  border:.04rem solid purple;
}

    .news{
  padding:.04rem;
  background-color: #c8a2c8;
    }

    imput [type=text], imput[type=submit] {
  width: 100%;
  padding:.02rem;
  margin: .02rem ;
  display: inline-block;
  border: .04rem solid #ccc;
  box-sizing: border-box;
    }
    imput [type=submit] {
    background-color:pink;
    color: white;
    border: .04rem solid purple;
    }
    imput [type=sumit]:hover {
  opacity: 0.8;
    }

    .black{
  color: black;
    }

    .shift {
  color: black;
  font-weight: 900;
    }   

.lista{
list-style-type: none; 
text-decoration: none;
text-align: center;
font-size: 1rem;

}
.copy{
  font-size:medium;
 
}
.dropdown .dropbtn{
font-size: inherit;
font-family: inherit;
width: auto;
background-color: #Eddbd2;
color: white;
border: white;
}

a:hover .dropdown:hover .dropbtn{
    background-color: #e7c2ba;
}

.dropdown-content{
    display: none;
    position: absolute;
    width:auto;
    background-color: rgb(222, 162, 172);
    font-size:.5rem;
}
.dropdown-content a{
 text-align: center;
text-decoration: none;
display: block;
color: white;
}

.dropdown-content a:hover{
    background-color: #e7c2ba;
}
.dropdown:hover .dropdown-content{
    display:block;

}

/* End of footer CSS*/



/* Start of Italy CSS */ 
.note{
  grid-area: h;
  padding-bottom: .5rem;
  padding-top: .5rem;
  max-width: 100%;
  height: auto;
  background-color: #Eddbd2;
  display:flex;
  justify-content: center;
  border: dotted;
  
}
.extraItaly{
  grid-area: k;
  background-color: #dd8e75;
  text-align: center;
}
a:link, a:visited .extraItaly {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active .extraItaly{
  background-color: #e2a499;
}
.italy{
  background-image:url('../images/italy3.jpg') ;
  background-color: #ce8054;
  background-position: center;
  background-size: cover;
  position: relative;
  grid-area: z;
  padding-bottom: 12rem;
  padding-top: 12rem;
  max-width: 100%;
  text-shadow: .25rem .25rem black;
  display:flex;
  justify-content: center;

}
.header3{
    grid-area: t;
    background-color: #dd8e75;
    padding-bottom: 3rem;
    padding-top: 3rem;
    text-align: center;
    display:flex;
    justify-content: center;
    
}
.Rome{
 grid-area: l;
 margin-top: 3rem;
    background-color: #e7c2ba;
    background-position: center;
    background-size: cover;
    position: relative;
  
    display:flex;
    justify-content: center;

}
.Florence{
  grid-area:i;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Venice{
  grid-area: m;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Amalfi{
  grid-area: n;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Capri{
  grid-area: j;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
#rome {
grid-area: a;
text-align: center;
}
    
#florence{
    grid-area: b;
    text-align: center;
}
#venice{
    grid-area: c;
    text-align: center;
}
#amalfi{
    grid-area: d;
    text-align: center;
}
#capri{
    grid-area: e;
    text-align: center;
}
/* End of Italy CSS */ 
/* Start of Spain CSS */
.spain{
  background-image:url('../images/Spain2.webp') ;
  background-color: #ce8054;
  background-position: center;
  background-size: cover;
  position: relative;
  grid-area: z;
  padding-bottom: 12rem;
  padding-top: 12rem;
  max-width: 100%;
  text-shadow: .25rem .25rem black;
  display:flex;
  justify-content: center;
 

}

.Sevilla{
  grid-area: l;
  margin-top: 3rem;
     background-color: #e7c2ba;
     background-position: center;
     background-size: cover;
     position: relative;
     display:flex;
     justify-content: center;
}
.Barcelona{
  grid-area:i;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Cordoba{
  grid-area: m;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Toledo{
  grid-area: n;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.San{
  grid-area: j;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
#sevilla{
grid-area: a;
text-align: center;
}
    
#barcelona{
    grid-area: b;
    text-align: center;
}
#cordoba{
    grid-area: c;
    text-align: center;
}
#toledo{
    grid-area: d;
    text-align: center;
}
#san{
    grid-area: e;
    text-align: center;
}
/* End of Spain CSS */
/* Start of French CSS */
.france{
  background-image:url('../images/France1.jpg') ;
  background-color: #ce8054;
  background-position: center;
  background-size: cover;
  position: relative;
  grid-area: z;
  padding-bottom: 12rem;
  padding-top: 12rem;
  max-width: 100%;
  text-shadow: .25rem .25rem black;
  display:flex;
  justify-content: center;
}

.Paris{
  grid-area: l;
  margin-top: 3rem;
     background-color: #e7c2ba;
     background-position: center;
     background-size: cover;
     position: relative;
     display:flex;
     justify-content: center;
}
.Loire{
  grid-area:i;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Marseille{
  grid-area: m;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Nice{
  grid-area: n;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Normandy{
  grid-area: j;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
#paris{
grid-area: a;
text-align: center;
}
    
#loire{
    grid-area: b;
    text-align: center;
}
#marseille{
    grid-area: c;
    text-align: center;
}
#nice{
    grid-area: d;
    text-align: center;
}
#normandy{
    grid-area: e;
    text-align: center;
}
/*  End of French CSS */
/* Start of Japan CSS */
.japan{
  background-image:url('../images/Japan1.jpg') ;
  background-color: #ce8054;
  background-position: center;
  background-size: cover;
  position: relative;
  grid-area: z;
  padding-bottom: 12rem;
  padding-top: 12rem;
  max-width: 100%;
  text-shadow: .25rem .25rem black;
  display:flex;
  justify-content: center;
}
.Tokyo{
  grid-area: l;
 margin-top: 3rem;
    background-color: #e7c2ba;
    background-position: center;
    background-size: cover;
    position: relative;
    display:flex;
    justify-content: center;
}
.Osaka{
  grid-area:i;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Kyoto{
  grid-area: m;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Hiroshima{
  grid-area: n;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Honshu{
  grid-area: j;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
#tokyo{
grid-area: a;
text-align: center;
}
    
#osaka{
    grid-area: b;
    text-align: center;
}
#kyoto{
    grid-area: c;
    text-align: center;
}
#hiroshima{
    grid-area: d;
    text-align: center;
}
#honshu{
    grid-area: e;
    text-align: center;
}
/* End of Japan CSS */
/* Start of Mexico CSS */
.Mexico{
  background-image:url('../images/Mexico2.jpg') ;
  background-color: #ce8054;
  background-position: center;
  background-size: cover;
  position: relative;
  grid-area: z;
  padding-bottom: 12rem;
  padding-top: 12rem;
  max-width: 100%;
  text-shadow: .25rem .25rem black;
  display:flex;
  justify-content: center;
}

.Cancun{
  grid-area: l;
  margin-top: 3rem;
     background-color: #e7c2ba;
     background-position: center;
     background-size: cover;
     position: relative;
     display:flex;
     justify-content: center;
}
.City{
  grid-area:i;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Tulum{
  grid-area: m;
  margin-top: 1rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Cozumel{
  grid-area: n;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
.Guanajuato{
  grid-area: j;
  margin-top: 2rem;
  background-color: #e7c2ba;
  background-position: center;
    background-size: cover;
    position: relative;
  display:flex;
  justify-content: center;
}
#cancun{
grid-area: a;
text-align: center;
}
    
#city{
    grid-area: b;
    text-align: center;
}
#tulum{
    grid-area: c;
    text-align: center;
}
#cozumel{
    grid-area: d;
    text-align: center;
}
#guanajuato{
    grid-area: e;
    text-align: center;
}
/* End of Mexico CSS */