*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#loader{
    background-color: #000 url("/static/logo/beepboop.gif") no-repeat center center;
    background-size: 30%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
}


nav{
    box-shadow:  3px 3px 5px rgba(0, 0, 0, 0.122);
    
}
nav ul{
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;  
    text-decoration: none;
}

nav li{
    height: 60px;
}

nav a{
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: black;
    font-size: large;
}

nav a:hover{
    color:#2697a6;
 
}
nav li:first-child{
    margin-right: auto;
}

nav li a button{
    background-color: #2697a6;
    padding: 7px 16px;
    border: none;
    color: white;
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer;
}
nav li a button:hover{
    background-color:#2cc8c0;
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: transparent;
    backdrop-filter: blur(5px);
    box-shadow: -10px 0 10px #00000033;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.sidebar li{
    width: 100%;
}

.sidebar a{
    width: 100px;
    color: #099faa;
    font-weight: bold;

}

.sidebar li a button{
    background-color: #2697a6;
    padding: 7px 16px;
    border: none;
    color: white;
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer;
}
.sidebar li a button:hover{
    background-color:#2cc8c0;
}

.sidebar a:hover{
    color: #1ff4ea;
}
nav .hideondesktop{
    display: none;
}
@media(max-width:768px){
   nav .hideonmobile{
        display: none;
    }

    nav .hideondesktop{
        display: inline;
    }
    .sidebar li a button{
        font-size: 13px;
        border-radius: 25px;
        padding: 10px 10px;
    }
}

#buy-btn{
    padding: 15px 30px;
     border-radius: 5px;
      background-color: #2697a6;
      color: white; 
      /* border: 3px solid  #2697a6;  */
      border: none;
      /* margin: 3%; */
      margin-top: 2%;
      cursor: pointer;
      font-weight: bolder;
      font-size: larger;
}

#join-btn{
    display: none;
}
#buy-btn:hover{
    background-color:#2ecbd6;
    transform: translateZ(4px);

}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	margin-top:22px;
}


a{
    list-style: none;
    text-decoration: none;
    color: white;
}
.share{
    height: 30px;
    width: 200px;
    margin: 5px;
    padding: 3px 8px;
    background-image: linear-gradient(to bottom rgb(198, 198, 198) ,to top white);
    border-radius: 5px;
    justify-content: space-between;
    border: 2px solid #2697a6;
   
}
.share span{
    margin:5px;
    color: gray;
    font-size: larger;
}

.share button{
    margin: 5px;
    background-color: transparent;
    border: none;
    
}

.share button a{
    color:#2697a6;
    font-size: x-large;
}


#navbar button {
    background-color: white; /* Change to desired button color */
    border: none; /* Remove default border */
    padding: 10px 40px; /* Adjust padding as needed */
    cursor: pointer; /* Change cursor on hover */
    background-color: #099faa;
    border-radius: 5px;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.menu-bar{
    display: none;
  }

.checked{
    color: orange;
  }

.container{
    margin-top: 0;
    padding: 10px;
    display: flex;
    /* border: 2px solid black; */
}

.container .image{
    /* border: 2px solid black; */
    margin: 2%;
    display: flex;
    flex-direction: column; /* Stack main image on top of the grid */
    align-items: center; /* Center align the images horizontally */

}

.container .image .grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Responsive grid */
    gap: 10px; /* Space between sub-images */
    margin-top: 10px; /* Space between main image and grid */

}

.main-image {
    /* width: 100%; /* Adjust width as needed */
    /* max-height: 400px;  */
    width: 250px;
    height: auto;
    /* Set a max height for the main image */ 
    object-fit: cover;
     /* Maintain aspect ratio */
}
.container .image .grid img {
    width: 100%; /* Make sub-images responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Maintain aspect ratio */
}
.container .info{
    float:  right;
    display: inline;
    width: 50%;
}

/* .container .image img{
    width: 500px;
    height: 380px;
} */

.price{
    /* font-family: monospace; */
    font-size: large;
}


.chart{
    width: 900px;
    height: 500px;
    display: flex;
    flex-direction: column;
    border: 2px solid #2697a6;
    border-radius: 10px;
    justify-content: center;
}

.chart .charthead{
    display: flex;
    justify-content: space-between;
    margin: 2%;
    text-align: center;
}
#myChart{
    width: 800px;
    height: 500px;
    color: #55ebf6;
    /* border: 2px solid rgb(200, 199, 199); */
    margin: 0;
  
}

.pricehistory{
    width: 50%; /* Optional: Set a maximum width */
    margin: auto;     
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
}

.decision {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: transparent;
    border-radius: 10px;
    /* box-shadow: 0 2px 5px rgb(24, 64, 86); */
    margin: 20px;
}

.d {
    text-align: center;
}

.question {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.chart-placeholder {
    width: 100%;
    max-width: 400px; /* Limit maximum width for larger screens */
    height: 200px; /* Fixed height for the chart */
    background-color: transparent; /* Placeholder background */
    /* border: 2px solid #067a75; */
    margin: 0 auto 15px; /* Centering and spacing */
}

.recommendation {
    font-size: 2rem;
    font-weight: bolder;
    color: #099faa;
}

.footer{
    margin-top: 5%;
    font-size: medium;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;

}

.buy-button {
    margin: 1%;
    background-color: #2697a6;
    color: white;
}

.buy-button:hover {
    background-color:#3dc5d7;; /* Darker green on hover */
}

.telegram-button {
    margin: 1%;
    background-color:#1ff4ea;
    color: white;
}

.telegram-button:hover {
    background-color:#71fff8; /* Darker blue on hover */
}
@media screen and (max-width:768px){
    #navbar{
        padding: 1px;
    }
    #navbar button{
        display: none;
    }
    #navbar img{
        float: right;
        height: 80px;
        
    }

    .menu-bar {
        display: flex;
        flex-direction: column;
        padding: 15px 10px 15px 10px;
    }
     #bar{
        
        float: left;
        width: 30px;
        height: 5px;
        background-color: rgb(249, 248, 248);
        margin: 3px 0;
    }
    .container{
        padding: 10px;
        display: block;
    }
    .container .image{
        width: 100%;
    }

    .container .info{
        width: 100%;
    }

    .pricehistory{
        width: 100%; /* Optional: Set a maximum width */
    margin: auto;     
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    }
    #myChart{
        width: 400px;
        height: 350px;
    }
    .chart{
        width: 400px;
        height: 350px;
        display: flex;
        flex-direction: column;
        border: 2px solid #2697a6;;
    }

    #join-btn{
      background-color: #099faa;

    }

}


@media screen and (max-width:468px){
    #myChart{
        width: 400px;
        height: 350px;
    }
}

.copyright{
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #10535c;
    color: white;
    padding: 10px;
    width: 100%;
}