/* PRESET  */
@font-face {
src: url(../fonts/Steamed\ DEMO.otf);
font-family: Steamed;
}
body::-webkit-scrollbar {
width: 5px;
height: 5px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: #F8A805;
border-radius: 2px;
}
.grow {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: #30475E;
margin: 0;
}
.bg-container-index {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
width: 100%;
height: 600px;
background-image: url('../images/Index.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-weather {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/Weather.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-news {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/News.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-gallery {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/Gallery.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-tourism {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/Tourism.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-transport {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/Transport.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.bg-container-about {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
height: 600px;
background-image: url('../images/About.webp');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
.gradient-overlay {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#30475E));
background-image: linear-gradient(180deg, transparent, #30475E);
}
#screen-warning {
display: none;
}
/* NAV */
#nav-list {
display: flex;
flex-direction: column;
position: fixed;
width: 100px;
height: 100vh;
padding: 0;
margin: 0;
align-items: center;
justify-content: center;
}
.nav-item {
display: flex;
margin-bottom: 20px;
}
.nav-item:first-child {
margin-top: 120px;
}
.nav-item:last-child {
margin-top: auto;
}
#mobile-nav .mainMenu{
padding: 0;
margin: 0;
display: flex;
}
#burger-menu, #burger-close {
display: none;
}
/* END NAV */
/* FOOTER */
footer {
position: relative;
height: 100px;
width: 100%;
}
footer a {
font-family: Steamed;
color: #F8A805;
}
#footer {
display: flex;
flex-direction: column;
row-gap: 15px;
text-align: center;
}
#footer div {
display: flex;
justify-content: center;
column-gap: 40px;
}
#footer div:nth-child(4) {
align-items: center;
border: 4px solid #F8A805; border-width: 1px 0px 1px 0px;
padding: 10px 0px 10px 0px;
}
#footer div:nth-child(5) img {
width: 20%;
}
#footer div:nth-child(5) {
align-items: center;
color: #F8A805;
}
/* END FOOTER */
body {
margin: 0;
max-width: 100%;
overflow-x: hidden;
overflow-wrap: break-word;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 120%;
}
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 100%;
color: #F8A805;
width: 10%;
border-radius: 5px;
border: none;
padding: 12px 30px;
cursor: pointer;
transition: transform .2s;
text-align: center;
display: flex;
justify-content: center;
box-shadow: 2px 2px #F8A805;
}
button:hover {
transform: scale(1.1);
box-shadow: 2px 2px 5px #F8A805;
}
i {
color: #F8A805;
font-size: 250%;
text-shadow: 0px 0px 10px black;
}
i:hover {
color: white;
}
header {
height: 100px;
padding: 10px;
justify-content: center;
}
header img {
width: 100%;
}
h1, h2, h3, h4, p, a, ul {
margin: 0;
}
/* COLOUR */
h2, h3, h4 {
text-align: center;
color: #f5b63a;
}
p, a, ul, li, label {
color: #e2cc9f;
}
li {
list-style: none
}
a:hover {
color: white;
}
/* SIZES */
h1 {
font-size: 300%;
font-family: Steamed;
color: #F8A805;
}
h2 {
font-size: 250%;
}
h3 {
font-size: 200%;
}
h4 {
font-size: 150%;
}
/* END PRESET */
/* --------------------------------------------------------------------------------------------------------------------------------------------*/
.yellow-outline-container {
border: #F8A805 solid 4px;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
border-radius: 12px;
text-transform: capitalize;
margin: 10px;
} /* USED IN: INDEX, WEATHER */
.section{
padding-top: 2rem;
padding-bottom: 2rem;
margin: 0px 100px 0px 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.section-header {
display: flex;
flex-direction: column;
padding-top: 2rem;
padding-bottom: 2rem;
margin: 0% 10% 5.5% 20%;
}
.centre-text {
margin: 10px;
text-align: center;
}
.left-text {
text-align: left;
padding: 10px 0px;
}
.flex-centre {
display: flex;
align-items: center;
}
.flex-centre i {
transition-duration: 0.8s;
transition-property: transform;
}
.flex-centre i:hover {
transform: rotate(360deg);
}
/* GRID */
.flex-container {
display: flex;
width: 100%;
flex-wrap: wrap;
background-color: #1975b74d;
padding: 10px;
}
.flex-container div {
width: 33%;
flex-grow: 1;
margin: 10px 2.5px;
}
.flex-container img {
margin-top: 10px;
width: 100%;
}
/* END GRID */
/* WEATHER CONTENT */
#weather-card {
display: inline-flex;
flex-direction: column;
padding: 10px;
background-color: #7646bc80; 
}
#weather-card i {
margin-right: 1%;
}
#weather-card div:nth-child(1) {
border-bottom: solid 4px #F8A805;
}
#weather-card div:nth-child(3) {
justify-content: center;
text-transform: capitalize;
}
#weather-card div:nth-child(3) p:first-of-type {
font-size: 50px;
padding-right: 2%;
border-right: solid 2px #F8A805;
}
#weather-card div:nth-child(4) {
display: flex;
}
#weather-card div:nth-child(4) p{
margin: 10px;
}
#weather-board table {
background-color: #7646bc80;
border-spacing: 1rem;
}
/* END WEATHER CONTENT */

/* --------------------------------------------------------------------------------------------------------------------------------------------*/
/* TOURISM CONTENT */
.tourism-image {
transition: transform .2s;
}
.tourism-image:hover {
transform: scale(1.1);
border: solid 4px #e2cc9f;
}
/* END TOURISM CONTENT */
/* --------------------------------------------------------------------------------------------------------------------------------------------*/
/* TRANSPORT CONTENT */
.submit {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
color: #F8A805;
width: 10%;
border-radius: 5px;
border: none;
padding: 12px 30px;
cursor: pointer;
transition: transform .2s;
text-align: center;
display: flex;
justify-content: center;
box-shadow: 2px 2px #F8A805;
margin-top: 1%;
} 
.submit:hover {
transform: scale(1.1);
box-shadow: 2px 2px 5px #F8A805;
}
/* code adapted from (W3Schools, 2022) */
.tab {
display: flex;
justify-content: space-between;
overflow: hidden;
background-color: #3169a1;
padding: 10px;
width: 100%;
}
.tab button {
padding: 14px 16px;
box-shadow: none;
}
.tab button:hover {
background-color: white;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.tab button.active {
background-color: white;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.tabcontent {
display: none;
padding: 12px 12px;
background-color: #1975b74d;
width: 100%;
}
.tabcontent table {
border-spacing: 1rem;
text-align: left;
}
.tablecontent table, select {
width: 100%;
}
/* end of adapted code */
/* END TRANSPORT CONTENT */
/* --------------------------------------------------------------------------------------------------------------------------------------------*/
/* GALLERY CONTENT */
.gallery-grid {
padding: 10px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
align-items: center;
}
.gallery-grid img {
border: 2px solid #f5b63a;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
max-width: 100%;
}
/* END GALLERY CONTENT */
/* ABOUT CONTENT */
#about-img {
width: 50%;
padding: 10px;
background-color: #3169a1;
}
#about-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* END ABOUT CONTENT */


/* MEDIA QUERIES */
@media screen and (max-width: 769px) {
header img {
width: 50%;
}
.section {
padding-top: 1rem;
padding-bottom: 2rem;
margin: 0px 25px 0px 25px;
}
.section-header {
padding-top: 1rem;
padding-bottom: 2rem;
margin: 0px 25px 0px 25px;
}

/* NAV */
#nav-list {
display: none;
}  
header {
padding: 20px;
height: 80px;
justify-content: space-between;
}
.mainMenu li a {
color:#F8A805;
}
.mainMenu li a:hover {
color: white;
}
#mobile-nav .mainMenu {
height: 100vh;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #30475E;
transition: top 1s ease;
display: none;
}
#burger-menu {
display: inline-block;
}
#mobile-nav .mainMenu #burger-close {
display: inline-block;
position: absolute;
top: 40px;
right: 20px;
}
/* END NAV */

/* FOOTER */
#footer {
border-top: 2px solid #F8A805;
display: flex;
flex-direction: column;
}
#footer div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#footer div:nth-child(3) {
display: flex;
flex-direction: row;
column-gap: 20px;
border: 4px solid #F8A805; border-width: 1px 0px 1px 0px;
padding: 10px 0px 10px 0px;
}
#footer div:nth-child(3) i {
font-size: 250%;
}
#footer div:nth-child(4) img {
width: 30%;
margin-bottom: 10px;
}
#footer div:nth-child(4) {
border: none;
}
/* END FOOTER */

/* WEATHER */
#weather-card div:nth-child(4) {
display: none;
}
#weather-board {
display: none;
}
/* END WEATHER */

/* NEWS */
.article {
display: flex;
flex-direction: column;
align-items: left;
font-size: 10px;
}
/*END NEWS */
/* GALLERY GRID */
.gallery-grid {
grid-template-columns: repeat(1, minmax(200px, 1fr));
}
/* END GALLERY GRID */
}
@media screen and (max-width: 319px) {
#screen-warning {
display: block;
color: white;
}
.grow {
display: none;
}
}
@media screen and (min-width: 770px) {
#mobile-nav, .mainMenu {
display: none;
}
}
/* MEDIA QUERIES */