@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');


/*STYLING THE HEAD*/
#head {
  height: 350px;
  width: 100%;
  background: url("../images/enterence.webp") no-repeat center 80%/cover;
  position: relative;
  text-align: center;
  color: white;
}
#cover-text {
 font-size: 300%;
 position: absolute;
 color: white;
 font-family: "Roboto", sans-serif;
 padding-top: 120px;
 text-align: center;
}
/*STYLING PARAGRAPH*/
p {
  font-size: 36px;
  font-family: 'Roboto', sans-serif;
}
ul {
  font-size: 36px;
  font-family: 'Roboto', sans-serif;
}
h1 {
  text-align: center;
}
h2 {
  font-size: 36px;
  font-family: 'Roboto', sans-serif;
}
/*NAVIGATION BAR*/
ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active {
  background-color: #4CAF50;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/*GALLERY STYLING*/
div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
    font-weight: bold;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  /*ADDED CLASS FOR TEXT IN NEW WINDOW*/
.bottom-left {
  position: absolute;
  bottom: -20px;
  left: 16px;
  color: black;
}

/*BUTTON STYLING*/
.image-btn{
  background: none;
  border: none;
  padding: 0;
}
.image-bth img{
  display: block;
}
/*STYLING THE FLAG*/
.flag {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:10%;
  height: auto;
}

  /*MEDIA QUERY FOR HEAD*/
  
@media (min-width: 540px) {
  #cover-text {
    padding-left: 70px;
  }
}

@media (min-width: 768px) {
  #cover-text {
    padding-left: 150px;
  }
}

  @media (min-width: 820px) {
    #cover-text {
      padding-left: 200px;
    }
  }
  @media (min-width: 912px) {
    #cover-text {
      padding-left: 200px;
      font-size: 380%;
    }
  }
  @media (min-width: 1024px) {
    #cover-text {
      padding-left: 180px;
      font-size: 420%;
    }
  }
  @media (min-width: 1280px) {
    #cover-text {
      padding-left: 320px;
    }
  }
  /*MEDIA FOR NAVIGATION*/
  
  @media screen and (max-width: 900px) {
    ul.sidenav {
      width: 100%;
      height: auto;
      position: relative;
    }
    
    ul.sidenav li a {
      float: left;
      padding: 15px;
    }
  }
  @media screen and (max-width: 400px) {
    ul.sidenav li a {
      text-align: center;
      float: none;
    }
  }
  
/* MEDIA FOR SCROLL TOP BUTTON if screen is >= 768px*/
@media screen and (min-width: 768px) {
  /*BUTTON STYLING*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
}
@media (min-width: 768px) {
  ul.sidenav{
    width: 100%;
    height: auto;
    position: relative;
  }
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
}