/* MAIN PAGE -----------------------------------------------------------------*/

* {
    box-sizing: border-box;
    margin-top: 5px;    /* Khoảng cách lề trên */
    margin-right: 5px;  /* Khoảng cách lề phải */
    margin-bottom: 5px; /* Khoảng cách lề dưới */
    margin-left: 5px;   /* Khoảng cách lề trái */
}

.main-container {
    width: 100%;
}

#header-logowrap {
    text-align: center;
    padding: 2em;
}

#header-mainpage-name {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #1C4E9D;
    position: relative;
    margin: 5px 10px;
    font-size: 2vw;
}
 

#header-navigation-subitems {
    display: flex;
    flex-direction: column; /* Xếp các hàng theo cột */
    justify-content: center; /* Căn giữa theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    width: 100%; /* Đảm bảo div chiếm toàn bộ chiều rộng */
    text-align: center;
}

.quote-container {
    font-family: 'Arial', sans-serif;
    color: #1C4E9D;
    font-size: 20px;
    text-align: center;
    position: relative;
    min-height: 60px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.blinking-cursor {
    display: inline-block;
    width: 10px;
    height: 30px;
    background-color: #E92047;
    animation: blink 0.8s step-start infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}


/* Thêm media query để điều chỉnh kích thước trên màn hình nhỏ hơn */
@media screen and (max-width: 768px) {
    #header-logo {
        width: 25px;
    }
}

/* Định dạng các thẻ <a> chứa hình ảnh */
#header-navigation-subitems img {
    width: 90%;
    max-width: 200px; /* Thêm giới hạn kích thước tối đa */
    height: auto;
    margin: 1px;
    transition: transform 0.2s; /* Làm mượt hiệu ứng hover :) */
}

.nav-subitem img:hover {
    transform: scale(1.05);
    box-shadow: 1px 1px 1px 1px #1c4e9d;
}

.nav-row {
    display: flex;
    justify-content: center; /* Căn giữa các button trong hàng */
    width: 50%; /* Đảm bảo hàng chiếm toàn bộ chiều rộng */
}

/* Media queries để điều chỉnh kích thước hình ảnh trên các thiết bị khác nhau */
@media screen and (max-width: 768px) {
    .nav-subitem img {
        width: 20vw; /* Tăng kích thước ảnh trên màn hình nhỏ hơn */
    }
}

@media screen and (max-width: 480px) {
    .nav-subitem img {
        width: 30vw; /* Kích thước lớn hơn trên thiết bị di động */
    }
}

/* Style for location display */
#location {
    font-family: 'Arial', sans-serif;
    color: #a4b5d8;
    font-size: 10px;
    text-align: center;
    padding: 0px;
    background-color: #ffffff;
    border-radius: 1px;
    width: 300px;
    margin: 0px auto; /* This centers the element horizontally */
    border: 2px solid #ffffff;
    position: relative;
    margin-bottom: 20%;
}

#coords {
    font-size: 0.1px;
    color:#ffffff
}

/* Loading message style */
#loading {
    color: #65728A;
    font-size: 16px;
}

/* ASTRONOMY PAGE -----------------------------------------------------------------*/

/* Horizontal Navigation Bar ------------------------------------*/

.horizontal-navigation-bar {
    display:flex;
    font-family: Arial, Helvetica, sans-serif;
    background-color:#D0E7F7 ;
    
}

.horizontal-navigation-bar ul {
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #D0E7F7; 
    overflow: hidden;
}

.horizontal-navigation-bar ul > li {
    width: 150px; 
    display: inline-block; 
    padding: 10px; 
    border: 0;
    border-color: rgb(173, 173, 58); 
    border-style: inset; 
    text-align: center;
}


.horizontal-navigation-bar ul li > a {
    color: rgb(255, 255, 255); 
    padding: 14px 16px; 
    text-decoration: none;
    color:#65728A;
}

.horizontal-navigation-bar ul li > a:hover {
    color:#1c4e9d;
    text-decoration-line: none;
}


/* Content Wrapper --------------------------------------------------*/

#wraper {
    display:flex;
}

#astro-header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: larger;
    color:rgb(86, 2, 43);
}

.astro-content-wraper {
    padding-top: 5px;
    flex-grow: 1;
}

.astro-content {
    padding-bottom: 40px;
}

.astro-content-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 200%;
    padding:0;
    color: rgb(42, 42, 42);
}

.astro-content-placeandtime {
    font-family: Arial, Helvetica, sans-serif;
    font-style:inherit;
}

.astro-content-descriptions {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: darkslategrey;
}

.astro-content-photo {
    max-width: 100%;
    height:auto;
}

/* Aside ---------------------------------------------------------------*/

.astro-aside {
    width: 18%;
    background-color: rgb(165, 186, 207);
    font-family:Arial, Helvetica, sans-serif;
    padding-top: 15px;
    text-align: center;
}

.astro-aside h3 {
    color: rgb(40, 40, 40);
    text-align: center;
}

.astro-aside h4 {
    color:rgb(0, 42, 104);
    text-align: center;
}

.astro-aside a {
    color: rgb(28, 74, 143);
    text-decoration: none;
    font-size: small;
}

/* DATA SCIENCE PAGE -----------------------------------------------------------------*/

.data-content-wraper {
    padding-top: 5px;
    flex-grow: 1;
}

.datascience-book-title {
    font-family: Arial, Helvetica, sans-serif;
    font-style:inherit;
    color:#65728A;
}

.data-content {
    padding-bottom: 40px;
}

/* USEFUL WEBSITES */

.web-title {
    font-family: Arial, Helvetica, sans-serif;
    font-style:inherit;
    color:rgb(50, 50, 55)
}

.web-link {
    font-family: Arial, Helvetica, sans-serif;
    color:#D0E7F7;
    text-decoration: none;
}

.web-descriptions {
    font-family: Arial, Helvetica, sans-serif;
    color: #657184;
    padding-bottom: 20px;
    line-height: 1.5;
}

.web-content {
    padding-bottom: 40px;
}

.web-content-wraper {
    padding-top: 5px;
    flex-grow: 1;
}

/* DESIGN SECTION */

.design-descriptions {
    font-family: Arial, Helvetica, sans-serif;
    color: #657184;
    padding-bottom: 10px;
    line-height: 1.2;
}