/* Colour Schemes

Actual Colours
#46344E - Header Background
#FAED26 - Yellow Link
#b9b4b9 - Header Links
#5A5560 - Main Background



End */


:root {
  --primary-background: #2a1b3d ;
  --secondary-background: #585163;
  --third-background: #2b5866;
  --header-background: #030303;
  --text-color: #f3f5f1;
  --header-text-color: #f3f5f1;
}


/* Removes Body Padding*/
.body{
  padding: 0px;
  background: var(--secondary-background);
  background: linear-gradient(135deg, var(--primary-background) 0%, var(--third-background) 50%,var(--secondary-background) 100%);
  margin: 0px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  justify-content: center;
  text-align: center;
}
/*
.header-background{
  padding: 10px;
  background: rgb(42,27,61);
  background: radial-gradient(circle, rgba(42,27,61,1) 65%, rgba(88,81,99,1) 91%); 
}
  */

.header-background{
  padding: 10px;
  background: rgb(42,27,61);
  background: linear-gradient(135deg, var(--primary-background) 0%,rgba(125,185,232,0.22) 78%,var(--secondary-background) 100%);
}

/*Container for Main Header*/
.header-text{
  width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  color: var(--header-text-color);
  font-size: 48px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  line-height: 30px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--header-text-color);
  text-shadow: 4px 6px 4px rgba(0, 0, 0, 10);
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 10);
}

/*Container for Header Links*/
.header-links{
  min-width: 900px;
  text-align: center;
  line-height: 40px;
}

/*Main Container for setting Grid*/
.Grid-Container{
  display: grid;
  grid-template-columns: minmax(400px , 600px) minmax(400px , 600px);
  justify-content: center;
  text-align: center;
  color: var(--text-color);
  font-weight: bold;
}

.loadinghidden{
  display: none;
}


/*Main Container for setting Grid*/
.Grid-Container-Pitt{
  min-width: 400px;
  max-width: 800px;
  justify-content: center;
  text-align: center;
  background-color: var(--secondary-background);
  color: var(--text-color);
  font-weight: bold;
}

/*Colour Changing for Camera Accuracy - Top Bar*/
.Topbar-colourchange{
  object-fit: fill;
  border-radius: 5px;
  max-width: 100%;
  max-height: 15px;
  width: auto;
  height: auto;
  margin-bottom: -10px;
}

/*Timeline Images*/
.Bottombar-Timeline{
  display: grid;
  grid-template-columns: repeat(10,10%);
  justify-content: center; 
  margin: 0px;
  padding: 0px;
  max-height: 30px;
  align-items: center;
  overflow: hidden;
  object-position: center;
  width: auto;
  object-fit: cover;
}

/*Timeline Images*/
.Bottombar-Timeline-Testing{
  display: grid;
  grid-template-columns: repeat(4,25%);
  justify-content: center; 
  margin: 0px;
  padding: 0px;
  max-height: 30px;
  align-items: center;
  overflow: hidden;
  object-position: center;
  width: auto;
  object-fit: cover;
}


/*Container For Vancouver*/
.Webcam-Vancouver{
  min-width: 400px;
  min-height: 300px;
  margin: 5px;
  border-width: 6px;
  border-style: solid;
  border-color: #4056A1;
  padding: 5px;
}

/*Container For Victoria*/
.Webcam-Victoria{
  min-width: 400px;
  min-height: 300px;
  margin: 5px;
  border-width: 6px;
  border-style: solid;
  border-color: #fff954;
  padding: 5px;
}

/*Container For Tofino*/
.Webcam-Tofino{
  min-width: 400px;
  min-height: 300px;
  margin: 5px;
  border-width: 6px;
  border-style: solid;
  border-color: #b6c0b7;
  padding: 5px;
}

/*Container For Mountains*/
.Webcam-Mountains{
  min-width: 400px;
  min-height: 300px;
  margin: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: #ff8266;
  padding: 10px;
}

/*Blank Container - (transparent)*/
.Webcam-transparent{
  min-width: 400px;
  min-height: 300px;
  margin: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent;
  padding: 10px;
}

/*Container For Islands (Orange)*/
.Webcam-Islands{
  min-width: 400px;
  min-height: 300px;
  margin: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: #f7a354;
  padding: 10px;
}

/*Container For Nanaimo (Red)*/
.Webcam-Nanaimo{
  min-width: 400px;
  min-height: 300px;
  margin: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: #C96567;
  padding: 10px;
}

/*Container For Nanaimo (Red)*/
.Metar{
  max-width: 800px;
  justify-content: center;
  text-align: center;
  height: auto;
  margin: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: #EFEFEF;
  padding: 10px;
  word-wrap: break-word;
  color: #EFEFEF;
}

/* Media Query for Mobile Displays */
@media (max-width: 600px) {
  .Grid-Container {
    display: block; /* Change to a block layout for mobile */
  }

  .Webcam-Vancouver, .Webcam-Victoria, .Webcam-Islands, .Webcam-Mountains, .Webcam-Nanaimo, .Webcam-Tofino, .Webcam-transparent {
    min-width: auto; /* Reset the minimum width */
  }

  /* Adjustments for Body Padding */
  .body {
    padding: 0;
  }

  /* Adjustments for Main Header */
  .header-text {
    width: auto;
    font-size: 36px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-width: 2px;
    margin: 0px;
    text-shadow: none; /* Remove text shadow */
    box-shadow: none;  /* Remove box shadow */
  }

  /* Additional Adjustments for Header Links */
  .header-links {
    min-width: auto;

  }
  .hide-on-mobile-image {
    display: none;
  }
  
  .hide-on-mobile-text {
    display: none;
  }

}


a.link:hover{
  color: #FAED26;
  font-size: 75%;
}

a.link:link,
a.link:active,
a.link:visited{
  color: var(--text-color);
  font-size: 75%;
}

a.current:link,
a.current:visited,
a.current:hover,
a.current:active{
  color: #FAED26;
}

a.top:link,
a.top:visited,
a.top:hover,
a.top:active{
  color: var(--text-color);
}

/* Modern button style */
.modern-btn {
  padding: 5px 30px;
  border: 1px solid grey;
  background-color: #f44336;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 20px;
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 10);
}

.modern-btn.active {
  background-color: #4CAF50;
}

.modern-btn:focus {
  outline: none;
}