*{box-sizing: border-box;}
header {color: #669B90; text-shadow: 2px 1px #280905; background-color: #FAD316;
  font-size: 1.6em; text-align: center; height: 130px;  border: 3px solid #3D251E;
background-image: url(daung.png); background-position: left; background-repeat: no-repeat;}
h1 {margin-top: 0; margin-bottom: 0; font-family: Georgia,Garamond, serif;
letter-spacing: 0.05em; padding-top: 0.5em; padding-bottom: 0.5em; }
h2, h3, h4 { color: #4c0b58; font-family: Georgia,Garamond, serif; }
body {color: #144248; font-family: Arial, Helvetica, sans-serif; }
li { list-style-type: none; }
#gold { background-color: #EDF3B2 }
#green { background-color: #EAFFB5}
#aqua { background-color: #C6FFFF; }

footer {font-style: italic; font-size: 0.8em; text-align: center;
  padding-top: 5px; padding-bottom: 5px;
font-family: Georgia, Garamond, serif; padding: 2em; }

.home section { padding-left: 2em; padding-right: 2em; margin-bottom: 2em;
  margin-left: 2em; margin-right: 2em; background-color: #E3EC86;
  border: 1px solid black; border-radius: 15px; }
.home img { padding-left: 2em; padding-right: 2em; padding-bottom: 2em; margin-left: auto; margin-right: auto; }
.home {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr;}
h3 {grid-row: 1 / 2; grid-column: 1 / 4; }
section { grid-row: 2 / 3; grid-column: auto; }
img {grid-row: 3 / 4; grid-column: auto; }

.pagoda section { padding-left: 2em; padding-right: 2em; margin-bottom: 2em;
  margin-left: 2em; margin-right: 3em; background-color: #E3EC86;
  border: 1px solid black; border-radius: 15px; }
.pagoda #shwe { height: 500px; color: #E3EC86; text-shadow: 2px 1px #FFF; padding-top: 3em; padding-left: 2em; font-size: 3em;
  background-image: url(shwedagonpagoda.jpg); background-repeat: no-repeat; background-size: 100% 100%; }
.pagoda #kyaik { height: 450px; color: #FFC; text-shadow: 2px 1px #E3EC86; padding-top: 3em; padding-left: 2em; font-size: 3.5em;
  background-image: url(kyaiktiyo.jpg); background-repeat: no-repeat; background-size: 100% 100%; }

.mount section { padding: 2em;  margin-bottom: 2em;
  margin-left: 2em; margin-right: 3em; background-color: #DCFF82;
  border: 1px solid black; border-radius: 15px; }
.mount #popa { height: 450px; color: #DCFF82; text-shadow: 2px 1px #9FFFFF; padding-top: 2em; padding-left: 2em; font-size: 3.5em;
  background-image: url(popa.avif); background-repeat: no-repeat; background-size: 100% 100%; }
.mount #hkaka { height: 450px; color: #DCFF82; text-shadow: 2px 1px #9FFFFF; padding-top: 6em; padding-left: 1.5em; font-size: 3.5em;
  background-image: url(hkaka.avif); background-repeat: no-repeat; background-size: 100% 100%; }
.mount div section { width: 30%; padding-top: 2em; padding-bottom: 2em; background-color: #EAFFB5; }
.mount div { display: flex; flex-flow: row nowrap; justify-content: space-around; }
.mount div li { list-style-image: url(mark.png); }

.beach section { padding: 2em;  margin-bottom: 2em;
  margin-left: 2em; margin-right: 3em; background-color: #9FFFFF;
  border: 1px solid black; border-radius: 15px; }
.beach #ngapali { height: 450px; color: #9FFFFF; text-shadow: 2px 1px #FFF; padding-top: 2em; padding-left: 2em; font-size: 3.5em;
  background-image: url(ngapali.jpg); background-repeat: no-repeat; background-size: 100% 100%; }
.beach #maungmagan { height: 450px; color: #9FFFFF; text-shadow: 2px 1px #FFF; padding-top: 2em; padding-left: 2em; font-size: 3.5em;
  background-image: url(maungma.avif); background-repeat: no-repeat; background-size: 100% 100%; }
.beach .enjoy section { width: 60%; padding-bottom: 2em; margin-bottom: 2em; background-color: #C6FFFF }
.beach .enjoy img, #beauty img { width: 30%; }
.beach .enjoy { display: flex; flex-flow: row wrap; justify-content: space-around; }
#beauty p { width: 60%; }
#beauty div { display: flex; flex-flow: row nowrap; justify-content: space-around; }
.beach .area li { list-style-image: url(bch.png); }

iframe { margin-left: 50px; margin-bottom: 2em; }

.gallery {display: flex; flex-flow: row nowrap; justify-content: space-around;
padding-top: 2em; padding-bottom: 2em; }

 #index { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 200px; }
 div .grid { grid-row: auto; grid-column: 1 / 2 ; }
 div .form { grid-row: auto; grid-column: 2 / 3 ; }
form { grid-row: auto; grid-column: 2 / 3 ; }
footer { grid-row: auto; grid-column: 1 / 3 ; }

nav { background-color: #3D251E; font-size: 1.2em;
font-weight: bold; text-align: right; padding-right: 2.5em; position: relative;}
nav ul { list-style-type: none; margin: 0; }
nav li { padding: 0.5em; display: inline-block;}
nav a { text-decoration: none; display: block;}
nav a:link { color: #669B90; }
nav a:visited { color: #C4FCF0; }
nav a:hover {  color: #886F8D; }
nav ul ul { position: absolute; font-size: 0.8em;
  padding: 0; text-align: left; display: none; }
nav ul ul li { border: 1px solid #996515; border-radius: 10px; background-color:#5B3E31;
display: block; width: 8em; text-align: center;
padding-left: 0.5em; margin-left: 0; }
nav li:hover ul { display: block; }

div .grid { padding: 1em; }
div .form {padding: 2em; background-color: #FFF; }

table caption { font-size: 1.5em; font-weight: bold; padding: 1em 2em 1em;
font-family: Garamond, Georgia, serif; color: #4c0b58; }
table { border: 2px solid #A7AA7D; border-collapse: collapse; }
th, td { padding: 0.5em; border: 2px solid #A7AA7D; }
td { text-align: center; }
.text { text-align: left; }
tr:first-of-type { background-color: #D1D108 ; color: #FFFFC2; font-weight: bold; font-size: 1.2em; }
tr:nth-of-type(even) { background-color: #FFFFC5; }

form { width: 500px; display: flex; flex-flow: column nowrap; }
input, textarea { width: 30%; padding: 8px; margin-bottom: 10px; }
button { background-color: #AAA37D; color: #4c0b58; font-weight: bold; width: 80px;
  padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; }
  button:hover { color: #584c0b; }
  button:active { margin-top: 3px; }

.float{ float: left;
margin-left: 20px; margin-right: 30px; margin-top: 20px;
border: 1.5px ridge #000000; }