* {
   box-sizing: border-box; 
  }

/* FONTS START */
  @font-face {
    font-family: 'SeaweedScript';
    src: url(SeaweedScript-Regular.ttf);
  }
  
  
  @font-face {
    font-family: 'Nautica';
    src: url(Nautica.ttff);
  }
/* FONTS END */
  
  
/* FONT STYLES */
  h1 {
    font-family: 'SeaweedScript';
    letter-spacing: 2px;
    text-shadow:
    3px 3px 2px #000,
    -3px 3px 2px #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
  }
  
  h2,h3,h4,h5{
    font-family: 'SeaweedScript';
  }
  
  body p {
   font-size:20px;
  }
  
  a {
    color:#4db4ea;
  }
  
  a:hover {
    color:white;
  }
  /* DARK MODE STYLE */
  .dark-mode {
    color: white;
    background-color:#7281c3;
    background-blend-mode:multiply;
  }
  .dark-mode #navbar {
    background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/darklighthouse.png);
  }
  
  .dark-mode #main {
    background-color:#7281c3;
    background-blend-mode:multiply;
    color: white;
  }
  
  .dark-mode .box2 {
    background-color:#7281c3;
    background-blend-mode:multiply;
    color: white;
  }
  .darkmode .popovers figure:popover-open {
  display: block;
  height:500px;
  background: #347381;
background: -moz-linear-gradient(top, #347381 0%, #1F293E 79%, #121825 100%);
background: -webkit-linear-gradient(top, #347381 0%, #1F293E 79%, #121825 100%);
background: linear-gradient(to bottom, #347381 0%, #1F293E 79%, #121825 100%);
}
 .darkmode .popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 20px;
  color: white;
   overflow: auto;
}
/* DARK MODE STYLE END */
/* FONT STYLES END */
  
  body {
    background-image:url(https://assets.atlasobscura.com/article_images/lg/27474/image.jpg);
    background-size:2900px;
    color:black;
  }
  
  #container {
  max-width: 1300px;
  margin: auto ;
  }
  
  #flexbox {
  display:flex;
  }
  
/* NAVBAR */
  #navbar {
  height:1000px;
  width: 150px;
  background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/darklighthouseon.png);
  background-size:1000px;
  background-position:center top;
  padding:15px;
  margin:5px;
  
  position: sticky;
  top: 30px;
  left: 30px;
  }
  

  #navbar ul {
    
    background-image:url(https://img.freepik.com/premium-photo/concrete-wall-texture-background_483511-2509.jpg?semt=ais_country_boost&w=740);
    background-size:100px;
    
    border-style:solid;
    border-radius:10px;
    border-width:2px;
    border-color:white;
    
    padding: 5px;
    
    margin-top:450px;
    list-style-type: none;
    justify-content: space-evenly;
  }
  
  #navbar li {
    padding: 10px;
    margin:4px;
    height:50px;
    font-size:18px;
    background-color:#0c0f3c;
    border-style:solid;
    border-width:2px;
    border-radius:5px;
    border-color:#fff;
    text-align:center;
    display:block;
  }
  
  #navbar li a {
    color: white;
    font-family:'SeaweedScript';
    text-decoration: none;
  }
  
  #navbar li a:hover {
    color: #13b8ff;
    text-decoration: underline;
  }
/* NAVBAR END */
  #main {
    width:1300px;
    padding:30px;
    
    background-image:url(https://as2.ftcdn.net/v2/jpg/01/07/91/67/1000_F_107916793_8MPR8uxzajyoGTdGh7S2ciOgZCT5L62J.jpg);
    background-position:right;
    background-size:1000px;
    
    border-style:double;
    border-width:5px;
    border-radius:10px;
    border-color:white;
    position:relative;
  }
/* EXTRA STYLES */
  .box1 {
    padding:30px;
    
    background-color:#171e40;
    border-style:solid;
    border-color:white;
    border-width:2px;
    border-radius:2px;
  }
  
  .box2 {
    background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/note.png);
    background-size:1090px;
    padding:30px;
    position:relative;
    
    background-color:#171e40;
    border-style:solid;
    border-color:white;
    border-width:2px;
    border-radius:2px;
  
  }
/* EXTRA STYLES */

/* IMAGE STYLES */
  .img1{
    border-style:solid;
    border-color:white;
    border-width:2px;
    border-radius:10px;
  }
  
  .headerimg {
    background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/cropped-Duria_Antiquior-1.jpg);
    height:auto;
    padding:5px;
    width:100%;
  }
  .mainpics{
    display: inline-block;height:250px;
  }
/* IMAGE STYLES */



/* below is for mobile view */

   @media only screen and (max-width: 1200px) {
               :popover-open {
        border: none;
        box-shadow: 0 0 0.4rem rgb(0,0,0,0.75);
        position: fixed;
        top:500px;
        left:500px;
        transform: translate(-50%,-50%);
        width:80%;
        height:auto;
        margin:auto;
        }
        .popovers figure:popover-open {
        display: block;
        height:800px;
        background: #FFF6D0;
        background: -moz-linear-gradient(top, #FFF6D0 0%, #FADC97 79%, #FAC388 100%);
        background: -webkit-linear-gradient(top, #FFF6D0 0%, #FADC97 79%, #FAC388 100%);
        background: linear-gradient(to bottom, #FFF6D0 0%, #FADC97 79%, #FAC388 100%);
        }
  #flexbox {
    flex-wrap: wrap;
  }
  #navbar {
  height:400px;
  width: 100%;
  background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/darklighthouseon.png);
  background-size:1000px;
  background-position:center top;
  
  position: static;
  bottom:0;
  }
  

  #navbar ul {
    height:60px;
  display: flex;
  padding: 0;
  margin-top: 300px;
  list-style-type: none;
  justify-content: space-evenly;
  }
  
  #navbar li{
     padding-top: 5px;
        height:40px;
    display:inline-block;
    
  }
  
  body {
   width:100%;
   height:500px;
   
  }
  #main {
    width:100%;
    height:1000px;
  }
  
  #container {
    max-width:100%;
    margin:auto;
  }
  .tunes iframe{
    height:170px;
    width:700px;
    position:fixed;
    bottom:0;
    left:0;
  }
  .box3 {
    width:100%;
  }
  
  .dark-mode #navbar {
    background-image:url(https://file.garden/Z4huZRRHOVO_4XUw/For%20Lara/Image%20hoard/darklighthouse.png);
  }
  .dragon {
  height:0px;
}

 .mainpics{
    height:150px;
  }

}