/* style scrollbar */

html::-webkit-scrollbar {
    background-color: black;
    width: 1vw;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(transparent, yellow);
    border-radius: 100em;
    transition: background 0.5s ease-in-out;
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(transparent, rgb(141, 141, 50));
    border-radius: 100em;
}

/* reset default margins and paddings */

html{
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    animation: textappear 0.3s;
}


@keyframes textappear {
    0% {
        transform: scale(0);
        opacity: 0%;
    }

    30% {
        opacity: 10%;
    }

    100% {
        transform: scale(1);
        opacity: 100%;
    }
}


/* fix search bar positions using relative container and absolute position for search bar */
.right_align_search {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4.5vh;
    margin-left: 47vw;
}

.search_bar {
    background-color: white;
    position: absolute;
    width: fit-content;
    height: auto;
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.hide_bar_bg {
    background-color: transparent;
}

.navbar_icon {
    width: 2vw;
    transition: width 0.5s ease-in-out;
    cursor: pointer;
}

/* make search extension appear by changing width of search container when clicked, as width is 0 before clicking
javascript is used to add and remove classlist for hiding search bar */

#cancel_icon {
    min-width: 2vw;
    width: 2vw;
}

.search_container {
    width: 15vw;
    display: flex;
    align-items: center;
    gap: 1em;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

#search_input {
    width: 12vw;
    border: none;
    outline: none;
    color: black;
    font-family: "Average Sans", serif;
}

#search_input::placeholder {
    color: rgb(47, 201, 17);
}

.hide_container {
    width: 0;
    overflow: hidden;
    pointer-events: none;
    color: black;
}


/* navigation bar and nat geo logo styling, z index changed to be higher than eagle image */
nav {
    position: relative;
    width: 100vw;
    height: 10vh;
    background-color: black;
    display: flex;
    align-items: flex-end;
    z-index: 1;
}

#natgeologo {
    margin: 0 0 1vh 3vw;
    width: 10vw;
}

.navbar_right {
    width: 30vw;
    height: 12vh;
    display: flex;
    align-items: flex-end;
    position: absolute;
    right: 5vw;
    top: 0;
    justify-content: space-between;
}

.navbuttons {
    margin-bottom: 1vh;
    position: relative;
    font-family: georegular;
    font-size: 1.2em;
    list-style-type: none;
    display: flex;
    width: 15vw;
    justify-content: space-between;
}

.navbuttons a,
#subscribe_pagelink {
    text-decoration: none;
    color: white;
    cursor: pointer;
}

/* create a hover effect for the nav buttons by adding a background color when hovering
effect will start from the left to the right over 0.5s */
.yellow_overlay {
    background: linear-gradient(to right, white 50%, yellow 50%);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.yellow_overlay:hover {
    background-position: -100%;
}

/* remove unnessacery overflow elements if any */
#subscribe_page {
    overflow: hidden;
}

/* style the navbar to change html pages, which is a select forms list */
.select_container {
    display: flex;
    justify-content: center;
    position: relative;
    height: auto;
    text-align: center;
}

#select_box {
    padding: 0 2rem 0 0;
    margin-right: 2vw;
    height: 5vh;
    border-radius: 0.5rem;
    border: none;
    width: 8vw;
    color: black;
    background-color: rgb(204, 255, 0);
    appearance: none;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: georegular;
}

.select_icon_container {
    width: 50px;
    height: 100%;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-items: center;
    margin-right: 0.6vw;
}

.select_icon_container {
    font-size: 15px;
}

/*turn dropdown menu icon when menu is opened, javascript used to add/remove classlist for rotation */
#menu_carot {
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

#menu_carot.rotate {
    transform: rotate(-180deg);
}

.shows_header {
    height: 90vh;
    width: 100vw;
    background-color: black;
    overflow: hidden;
}

/* style elements for eagle and show_details,
then style the time on the first page */
#eagle1 {
    position: relative;
    height: 90vh;
    z-index: 0;
}

.show_details {
    position: absolute;
    width: 40vw;
    height: 50vh;
    right: 8vw;
    top: 30vh;
    display: flex;
    flex-direction: column;
}

.show_details h1 {
    text-align: center;
    position: relative;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    color: white;
    letter-spacing: calc(1px + 0.1vw);
    font-size: 4rem;
    margin: 0;
}

.show_details h5 {
    text-align: center;
    position: relative;
    font-family: "Space Mono", serif;
    font-weight: 400;
    letter-spacing: 0.5vw;
    font-size: 1.7rem;
    color: white;
}

.show_details h3 {
    text-align: center;
    font-size: 2.1rem;
    font-family: "Irish Grover", serif;
    margin-top: 7vh;
    color: #CFBE43;
}

.time_container {
    position: relative;
    margin-top: 3vh;
    width: 90%;
    left: 5%;
    height: 15vh;
    display: flex;
    justify-content: space-between;
}

.time_block {
    display: flex;
    flex-direction: column;
}

.time_block p {
    margin-left: 1.55vw;
    width: 10vw;
    position: absolute;
    line-height: 12vh;
    text-align: center;
    font-size: 3rem;
    color: white;
    font-family: "Space Mono", serif;
    letter-spacing: 3.3vw;
}

.time_number_group {
    display: flex;
    gap: 5px;
}

.time_number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1vw;
    height: 4vh;
    padding: 30px;
    background-color: #513434;
    border-radius: 15px;
}

.time_label {
    font-family: "Space Mono", serif;
    text-align: center;
    font-size: 1.5rem;
    color: white;
}

/*style cloud size to ensure they barely touch each other and can move away
javascript is used to move clouds away from each other */
.cloud {
    width: 100vw;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 70vh;
}

.cloud_item {
    width: 50vw;
}


/* style trending shows page, including netflix and disney areas */
.trending_shows {
    height: auto;
    width: 100vw;
    background: url(resources/Home_Page/Figma\ mesh.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.netflix_shows {
    padding-top: 5vh;
    width: 100vw;
    display: flex;
    flex-direction: column;

}

.trending_shows_title {
    display: flex;
    padding: 15vh 0 0 10vw;
    width: 100vw;
    align-items: center;
}

.trending_shows_title h2 {
    letter-spacing: 2px;
    font-size: 2rem;
    color: white;
    font-family: "Julius Sans One", serif;
}

.trending_shows_title img {
    margin-left: 1vw;
    width: 12vw;
    height: 8vh;
}

.animals_trailer {
    margin-top: 5vh;
    position: relative;
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.netflix_video {
    position: relative;
    width: 80vw;
    display: flex;
    justify-content: center;
}

/* change display of mute button when clicked, javscript also used for this part */
#toggle_mute {
    display: none;
}

#audio_button {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1rem;
    padding: 1rem;
    background-color: rgba(81, 52, 52, 0.6);
    border-radius: 50%;
}

#audio_button img {
    width: 2vw;
    cursor: pointer;
}

.animals_trailer video {
    border-radius: 1em;
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* style overlay for netflix, so that people can read text on the right */
.netflix_overlay {
    border-radius: 1em;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.5) 40%,
            rgba(0, 0, 0, 0.8) 60%,
            rgba(0, 0, 0, 1) 100%);

    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.netflix_desc {
    margin-right: 2vw;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5vh;
}

.netflix_desc h1 {
    margin-top: 5vh;
    color: white;
    font-family: "Inria Serif", serif;
    font-weight: 1000;
    font-size: 2rem;

}

.netflix_desc p {
    margin-top: 5vh;
    text-align: center;
    font-family: "Average Sans", serif;
    color: white;
}

/* align stars together beside each other using flexbox */
.stars_review {
    width: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stars_review h5 {
    margin-top: 0.7vh;
    margin-right: 0.5vw;
    color: white;
    font-family: "Julius Sans One", serif;
    font-size: 1.2rem;
    font-weight: 400;
}

.star {
    width: 1.5rem;
}

/* disney movie styling part, added box shadow for film container 
divs and css styled in a way to make it scrollable in mobile view*/
.disney_movies {
    position: relative;
    height: auto;
    width: 100vw;
    padding-bottom: 13vh;
}

.disney_movies img {
    height: 14vh;
}

.disney_title {
    margin-top: 0;
    padding: 10vh 0 0 10vw;
}

.disney_shows {
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
}

.disney_wrapper {
    padding: 5vh 3vw;
    margin-top: 2vh;
    width: 80vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    border-radius: 1.5rem;
    box-shadow: rgba(130, 130, 174, 0.25) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
}

.film_item {
    position: relative;
    width: 12vw;
    height: 28vh;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.film_item:nth-child(1) {
    background-image: url('resources/Home_Page/Disney_films/film1.jpg');
    background-size: cover;
}

.film_item:nth-child(2) {
    background-image: url('resources/Home_Page/Disney_films/film2.jpg');
    background-size: cover;
}

.film_item:nth-child(3) {
    background-image: url('resources/Home_Page/Disney_films/film3.jpg');
    background-size: cover;
}

.film_item:nth-child(4) {
    background-image: url('resources/Home_Page/Disney_films/film4.jpg');
    background-size: cover;
}

.film_item:nth-child(5) {
    background-image: url('resources/Home_Page/Disney_films/film5.jpg');
    background-size: cover;
}

.film_item:nth-child(6) {
    background-image: url('resources/Home_Page/Disney_films/film6.jpg');
    background-size: cover;
}

.film_item:nth-child(7) {
    background-image: url('resources/Home_Page/Disney_films/film7.jpg');
    background-size: cover;
}

.film_item:hover {
    transform: scale(1.1);
}

/* Latest stories and corner of the world part */
.latest_interesting_news {
    background: linear-gradient(to bottom, #000000 0%, #212636 70%, #292E43 100%);
    padding-bottom: 10vh;
    overflow: hidden;
}

.horizontal_wrapper {
    position: relative;
    height: auto;
    width: 100vw;
}

.scroll_title {
    width: 80vw;
    display: flex;
    padding: 10vh 0 0 10vw;
    display: flex;
    align-items: center;
}

.scroll_title h1 {
    color: white;
    font-family: "Julius Sans One", serif;
    font-weight: 400;
}

.scroll_container {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.item_container {
    width: 80vw;
    display: flex;
    justify-content: flex-start;
    gap: 1vw;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.scroll_item {
    position: relative;
    height: 33vh;
    min-width: 26vw;
    background-color: #CFBE43;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.scroll_item p {
    width: 80%;
    text-decoration: none;
    color: white;
    text-align: center;
    z-index: 1;
    font-family: "Average Sans", serif;
    font-size: 1.3rem;
    margin-bottom: 2vh;
}

/* added background gradient to see text better, similar to the netflix part */
.scroll_item span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
}

.item_container a {
    text-decoration: none;
}

.item_container a:nth-child(1) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story1.jpg');
    background-size: cover;
}

.item_container a:nth-child(2) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story2.jpg');
    background-size: cover;
}

.item_container a:nth-child(3) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story3.jpg');
    background-size: cover;
}

.item_container a:nth-child(4) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story4.jpg');
    background-size: cover;
}

.item_container a:nth-child(5) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story5.jpg');
    background-size: cover;
}

.item_container a:nth-child(6) .scroll_item {
    background-image: url('resources/Home_Page/Latest_stories/story6.jpg');
    background-size: cover;
}

/* bumping up animation when hovering */
.scroll_item:hover {
    animation: bumpup 0.5s ease-in-out;
}

@keyframes bumpup {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.scroll_buttons {
    margin-left: 55vw;
}

.world_corners {
    margin-left: 44vw;
}

.sbutton {
    all: unset;
    width: 1.1vw;
    height: 4vh;
    cursor: pointer;
}

#scroll_left {
    background: url(resources/Iconify/arrow_left.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

#scroll_right {
    margin-left: 1vw;
    background: url(resources/Iconify/arrow_right.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

#scroll_left_corners {
    background: url(resources/Iconify/arrow_left.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

#scroll_right_corners {
    margin-left: 1vw;
    background: url(resources/Iconify/arrow_right.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.item_container a:nth-child(1) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner1.jpg);
}

.item_container a:nth-child(2) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner2.jpg);
}

.item_container a:nth-child(3) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner3.jpg);
}

.item_container a:nth-child(4) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner4.jpg);
}

.item_container a:nth-child(5) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner5.jpg);
}

.item_container a:nth-child(6) .corners_item {
    background-image: url(resources/Home_Page/Corners_of_the_world/corner6.jpg);
}



/* subscription page, broken into 3 tiers of subcription */
.subscription {
    background: url(resources/Home_Page/underwater_background.jpeg);
    height: 100vh;
    width: 100vw;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4vh;
}

.subscriptions_title {
    transform: translateY(-3vh);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscriptions_title h1 {
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 800;
    font-size: 2.8rem;
}

.subscriptions_title h5 {
    font-family: "Kumbh Sans", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;

}

.subscription_plans_container {
    position: relative;
    height: auto;
    width: 90vw;
    display: flex;
    justify-content: center;
    gap: 5vw;
}

.subscription_plan {
    position: relative;
    background-color: #292A37;
    height: 70vh;
    width: 25vw;
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.price {
    position: absolute;
    width: 100%;
    height: 12%;
    background-color: #3F4050;
    top: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription_plan h1 {
    color: white;
    font-family: "Kumbh Sans", sans-serif;
    margin-top: 5vh;
}

.price p {
    font-family: 'average sans';
    font-size: 1.5rem;
    color: white;
}

.plan_features {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 28vh;
    gap: 2vh;
}

.plan_features p {
    font-family: 'average sans';
    font-size: 1.1rem;
    color: #F8F8FF;
}

.plan1_features p:nth-child(n+3):nth-child(-n+6) {
    color: rgba(248, 248, 255, 0.4);
}

.subscription_icon_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 10%;
    top: 28vh;
    gap: 2vh;
}

.subscription_icon_container img {
    width: 1.28rem;
}

.cancel_opacity {
    opacity: 0.4;
}

/*added outer box shadow by default, when exploring div is active (being clicked),
inner box shadow is added to give a pressed effect */
.start_exploring {
    position: absolute;
    bottom: 3.5vh;
    padding: 1.5rem 2.2rem;
    background-color: #454651;
    border-radius: 2rem;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.start_exploring:active {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.start_exploring p {
    color: white;
    font-family: 'average sans';
    font-size: 1.2rem;
}

.plan2_features p:nth-child(n+5):nth-child(-n+6) {
    color: rgba(248, 248, 255, 0.4);
}

.plan2_exploring {
    background-color: #195BFF;
}


/* login page has a fixed position and takes up the entire viewport, when login button is clicked, the opacity is shown and it drops down from the top */
/* login container is positioned in the middle of the login page */
.login_page {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 5;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.login_container {
    position: relative;
    width: 25vw;
    height: 65vh;
    background-color: #191919;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translateY(-100vh);
    transition: transform 0.5s ease-in-out;
    box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 2px, rgba(255, 255, 255, 0.07) 0px 2px 4px, rgba(255, 255, 255, 0.07) 0px 4px 8px, rgba(255, 255, 255, 0.07) 0px 8px 16px, rgba(255, 255, 255, 0.07) 0px 16px 32px, rgba(255, 255, 255, 0.07) 0px 32px 64px;
}

/* most of the widths of the child elements of the login container dont have max width to leave space on the sides, but the container is flex column so they will not wrap */
.login_icon_container {
    width: 90%;
    height: 9vh;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.login_icon_container a img {
    transform: scale(0.9);
}

.login_icon_container a img:hover {
    transform: scale(1.1);
}

.or_placeholder {
    margin-top: 1vh;
    height: 5vh;
    width: 80%;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: space-between;
}

.or_placeholder span {
    width: 40%;
    height: 2px;
    background-color: #D3D3D3;
}

.or_placeholder p {
    font-family: "leelawadee", serif;
    color: white;
    font-size: 1.3rem;
}

.ltext_container {
    margin-top: 3vh;
    width: 90%;
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 0.7vw;
}

.ltext_container p {
    font-family: "leelawadee", serif;
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
}

/* input box styling */
.ltext_container input {
    all: unset;
    width: 90%;
    height: 65%;
    background-color: #000000;
    box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px, rgba(255, 255, 255, 0.03) 0px 1px 1px -0.5px, rgba(255, 255, 255, 0.04) 0px 2px 2px -1px, rgba(255, 255, 255, 0.04) 0px 3px 3px -1.5px, rgba(255, 255, 255, 0.03) 0px 5px 5px -2.5px, rgba(255, 255, 255, 0.03) 0px 10px 10px -5px, rgba(255, 255, 255, 0.03) 0px 24px 24px -8px;
    border-radius: 0.6rem;
    color: white;
    padding-left: 1.5vw;
    font-family: "leelawadee", serif;
}

.remember_password {
    margin: 2vh 0;
    width: 85%;
    height: 3vh;
    display: flex;
    align-items: center;
}

.remember_password label {
    color: white;
    font-family: "leelawadee", serif;
    font-size: 1rem;
    cursor: pointer;
}

.remember_password label:hover {
    text-decoration: underline;
}

.remember_password input {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    width: 2.8vw;
    height: 1.5vw;
    background-color: #D9D9D9;
    border-radius: 100rem;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.remember_password input:checked {
    background-color: #FFCC00;
}

.remember_password input::before {
    content: '';
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 100rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
}

.remember_password input:checked::before {
    left: 1.3vw;
}

#rememberpass {
    margin-right: 0.5vw;
}

#login_button {
    width: 20vw;
    height: 7.5vh;
    background-color: #5E6EFF;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;

    letter-spacing: 1px;
    font-family: "leelawadee", serif;
    font-size: 1.3rem;
    color: white;
    font-weight: 700;

}

.accountpass {
    width: 80%;
    height: 4vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.accountpass a {
    text-decoration: none;
}

.accountpass p {
    font-family: "leelawadee", serif;
    font-size: 1rem;
    color: white;
    font-weight: 300;
}

/* hover effects */
.accountpass p:hover {
    text-decoration: underline;
}

#login_button:hover {
    background-color: #FFCC00;
    cursor: pointer;
}








/* FOOTER PART */
footer {
    position: relative;
    width: 100vw;
    display: flex;
    background-color: #000000;
    justify-content: space-evenly;
    padding-top: 7vh;
    padding-left: 4vw;
    padding-bottom: 10vh;
}

.connected_follow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5vh;
    width: 20vw;
}

.stay_connected {
    position: relative;
    width: 19vw;
    height: 30vh;
}

.stay_connected h1 {
    font-family: "Lisu Bosa", serif;
    font-weight: 1000;
    color: white;
    margin-bottom: 5vh;
}

.stay_connected p {
    font-family: "leelawadee", serif;
    font-weight: 400;
    color: white;
}

.your_email {
    margin-top: 3vh;
    width: 16vw;
    height: 5vh;
    display: flex;
    align-items: center;
    border-bottom: #D9D9D9 2px solid;
    justify-content: space-between;
}

/* forms is used for email part to make it typable */
.your_email input {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.5vw;
    font-family: "leelawadee", serif;
    font-weight: 400;
    font-size: 0.95rem;
    background-color: black;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background-color: transparent;
}

/* remove default styling of input box to make it fit theme */
.your_email input:focus {
    outline: none;
    border: none;
}

/* styling and arrangement of footer elements */
.your_email img {
    height: 2.8vh;
}

.your_email img:hover {
    cursor: pointer;
}

.follow_us {
    width: 30vw;
    height: 20vh;
}

.follow_image_container {
    margin-top: 1vh;
    display: flex;
    gap: 0.5vw;

}

.follow_us p {
    font-family: "leelawadee", serif;
    font-weight: 400;
    color: white;
}

.our_sites {
    width: 18vw;
    display: flex;
    justify-content: center;
}

.site_links {
    display: flex;
    width: fit-content;
    flex-direction: column;
    gap: 1.2vh;
}

.site_links a {
    width: 12vw;
    text-decoration: none;
    color: white;
    font-family: "leelawadee", serif;
}

.site_links a:hover {
    text-decoration: underline;
}

.our_sites h1 {
    font-family: "Lisu Bosa", serif;
    font-weight: 1000;
    color: white;
}

.contact_us {
    width: 30vw;
}

.contact_us h1 {
    font-family: "Lisu Bosa", serif;
    font-weight: 1000;
    color: white;
}

.contact_details {
    width: 100%;
    height: 20vh;
    margin-top: 7vh;
}

.footer_detail {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1vh;
}

.footer_detail p {
    margin-left: 1vw;
    color: white;
    font-family: "leelawadee", serif;
    font-weight: 400;
}

.footer_detail p:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* copyright part is added to the bottom of the padding of the footer element with position absolute */
.copyright {
    margin: 0;
    position: absolute;
    width: 100vw;
    height: 10vh;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-top: 1px rgba(217, 217, 217, 0.7) solid;
}

#copyright_logo {
    margin-left: 10vw;
    height: 6vh;
}

.copyright p {
    width: fit-content;
    margin-left: 5vw;
    color: rgba(255, 255, 255, 0.6);
}








@media (max-width: 1000px) {

    /* change eagle content to cropped picture for mobile view */
    #eagle1 {
        content: url('resources/Home_Page/eagle\ 1\ cut.jpg');
        width: 100%;
        height: auto;
        margin-top: 33vh;
    }

    /* styling of other css elements for front page */
    .search_container {
        width: 35vw;
        transition: 0.5s ease-in-out;
    }

    .hide_container {
        width: 0;
        max-width: 0;
        transition: 0.5s ease-in-out;
    }

    .right_align_search {
        top: 2vh;
        right: 8vw;
        position: absolute;
    }


    #cancel_icon,
    #search_icon {
        width: 6vw;
    }

    nav {
        display: flex;
        width: 100vw;
        flex-direction: column;
        align-items: center;
        border-bottom: 2px solid white;
        padding-bottom: 7vh;
    }

    .natgeologospan {
        width: 100vw;
    }

    #natgeologo {
        position: relative;
        width: 30vw;
        margin-top: 3vh;
        left: 4vw;
        margin-left: 2vw;
    }

    .navbar_right {
        margin-top: 2vh;
        width: 100vw;
        height: auto;
        position: relative;
        display: flex;
        justify-content: space-around;
    }

    .navbuttons {
        width: 80%;
        gap: 12vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    #home_search {
        top: 4vh;
        right: 10vw;
    }

    #select_box {
        width: 28vw;
        height: 5vh;
        margin-right: 4vw;
        font-size: 15px;
    }

    #audio_button {
        margin: 0.5rem;
    }

    #audio_button img {
        width: 6vw;
    }


    .show_details {
        position: absolute;
        width: 80vw;
        height: auto;
        right: 10vw;
        top: 20vh;
        flex-direction: column;
    }

    .show_details h1 {
        font-size: 2.7rem;
        margin: 0;
    }

    .show_details h5 {
        margin: 0;
        font-size: 1.4rem;
    }

    .show_details h3 {
        font-size: 1.5rem;
        margin-top: 3vh;
    }

    .time_container {
        display: flex;
        gap: 5vw;
        flex-direction: row;
        height: auto;
        justify-content: center;
    }

    .time_block {
        margin-bottom: 5vh;
    }

    .time_block p {
        width: 25.5vw;
        line-height: 7.7vh;
        font-size: 2.6rem;
        margin-left: 3.4vw;
        letter-spacing: 7vw;
    }

    .time_number_group {
        gap: 2px;
    }

    .time_number {
        width: 7vw;
        height: 5vh;
        font-size: 1.7rem;
        padding: 12px;
    }

    .time_label {
        font-size: 1.2rem;
    }

    /* cloud is not ment to be movable in mobile view, could cause problems if user clicks on it etc */
    .cloud {
        pointer-events: none;
        top: 100vh;
        position: absolute;
    }

    .trending_shows_title {
        padding: 6vh 0 0 0;
    }

    .trending_shows_title h2 {
        font-size: 1.5rem;
        padding-left: 10vw;
    }

    .trending_shows_title img {
        margin-left: 2vw;
        width: 30vw;
        height: 5vh;
    }

    .animals_trailer {
        height: 20vh;
    }

    .netflix_shows {
        padding-top: 2vh;
    }

    .netflix_video {
        width: 90vw;
    }

    /* redefine the netflix overlay, previously on desktop view, the dark side was on the right,
    but since there is no horizontal space on phone, the dark side is on the bottom */
    .netflix_overlay {
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0.6) 40%,
                rgba(0, 0, 0, 0.8) 60%,
                rgba(0, 0, 0, 1) 100%);
    }

    .netflix_desc {
        background-color: black;
        position: absolute;
        width: 82vw;
        height: auto;
        top: 15vh;
        margin: auto;
        right: auto;
        display: flex;
        padding: 1rem;
        border-radius: 1rem;

    }

    .netflix_desc h1 {
        font-size: 1.8rem;
        margin: 0;
    }

    .netflix_desc p {
        margin: 0;
    }


    .disney_movies {
        margin-top: 30vh;
    }

    .disney_movies h1 {
        font-size: 1rem;
    }

    .disney_movies .trending_shows_title h2 {
        font-size: 1.2rem;
    }

    .disney_movies .trending_shows_title img {
        height: 9vh;
        margin-bottom: 1vh;
    }

    /* as disney wrapper was made to be scrollable in mobile view,
    overlay x is used, to keep the size of each film from being too small on mobile
    min width is defined for each film to keep its size */
    .disney_wrapper {
        height: auto;
        padding: 2vh 5vw;
        overflow-x: auto;
        gap: 5vw;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0;
        scroll-behavior: smooth;
    }

    .film_item {
        min-width: 40vw;
        height: 26vh;
    }

    .item_container {
        gap: 10vw;
    }

    .scroll_item {
        height: 30vh;
        min-width: 75vw;
        border-radius: 1em;
    }

    .scroll_item span {
        border-radius: 1em;
    }

    .scroll_container {
        overflow-x: hidden;
    }

    .sbutton {
        width: 3vw;
        height: 3vh;
    }

    .scroll_buttons {
        margin-left: 16vw;
    }

    .scroll_title h1 {
        width: 50vw;
        font-size: 1.8rem;
    }

    .disney_movies {
        padding-bottom: 5vh;
    }

    .scroll_title {
        padding: 5vh 0 0 10vw;
    }

    .latest_interesting_news {
        padding-bottom: 6vh;
    }

    .horizontal_wrapper,
    .scroll_container {
        padding-left: 1.5vw;
    }

    .latest_interesting_news {
        overflow-x: hidden;
    }


    .subscription {
        gap: 0;
    }

    .subscriptions_title h1 {
        font-size: 2.2rem;
    }

    .subscription_plans_container {
        flex-direction: column;
        height: 80vh;
    }

    .subscription_plan {
        width: 100%;
        max-height: 25vh;
        border-radius: 2rem 0;
    }

    .start_exploring {
        display: none;
    }

    /*price for subscription page is styled differently in mobile view,
    border corners are added for only 2 opposite sides (cuz it look good),
    and the tier of subscription is rotated to be vertical instead of horizontal */
    .price {
        height: 100%;
        width: 20%;
        right: 0;
        top: 0;
        border-radius: 2rem 0;
        cursor: pointer;
    }

    .price p {
        font-size: 1.2rem;
        text-align: center;
    }

    .plan_features {
        top: 1vh;
        margin-left: 3vw;
    }

    .plan_features p {
        font-size: 1rem;
    }

    .subscription_icon_container {
        top: 1.1vh;
        left: 16vw;
        gap: 1rem;
    }

    .subscription_plan h1 {
        position: absolute;
        left: 0;
        top: 5.5vh;
        transform: rotate(-90deg);
        font-size: 1.5rem;
    }

    .login_container {
        width: 90vw;
        height: 60vh;
    }

    .login_icon_container {
        height: 7vh;
    }

    .ltext_container {
        margin-left: 6vw;
    }

    .ltext_container input{
        padding-left: 5vw;

    }

    .remember_password {
        width: 80%;
    }

    .remember_password input {
        width: 11vw;
        height: 6vw;
    }

    .remember_password input::before {
        width: 6vw;
        height: 6vw;
    }

    .remember_password input:checked::before {
        left: 5vw;
    }

    #rememberpass {
        margin-right: 3vw;
    }

    #login_button {
        width: 75vw;
        height: 7vh;
    }







    /* FOOTER PART */

    /* mostly just rearranging of elements in footer, except for the logo below */
    footer {
        position: relative;
        flex-direction: column;
        overflow: hidden;
        margin: 0;
        padding: 5vh 0 52vh 0;
    }

    .connected_only {
        margin-left: 5vw;
        width: 40vw;
        font-size: 0.8rem;
    }

    .your_email {
        width: 35vw;

    }

    .your_email img {
        transform: translateX(-8vw);
    }

    .contact_us {
        position: absolute;
        width: 40vw;
        word-break: break-word;
        top: 5vh;
        right: 6vw;
        font-size: 0.8rem;
    }

    .our_sites {
        position: absolute;
        top: 32vh;
        width: 70vw;
        margin-left: 15vw;
        font-size: 0.9rem;
    }

    .our_sites h1 {
        margin-left: 25vw;
    }

    .site_links {
        width: 80vw;
        height: 17vh;
        display: flex;
        flex-wrap: wrap;
    }

    .site_links a {
        width: 40vw;
    }

    .contact_details {
        margin-top: 0;
    }

    .contact_us img {
        margin-right: 2vw;
        transform: translateY(-0.5vh);
    }

    .follow_us {
        position: absolute;
        top: 52vh;
        left: 21vw;
        display: flex;
        justify-content: center;
        width: 50vw;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
    }

    .follow_image_container {
        gap: 5vw;
    }

    .follow_image_container img {
        width: 8vw;
    }

    .follow_us {
        margin-left: 2vw;
    }

    .follow_us p {
        text-align: center;
        font-size: 1.5rem;
        width: 30vw;
        margin-bottom: 1vh;
    }

    /* removed nat geo logo from footer in mobile view as it just takes up space and
    there is not much point of it on phone, may also block other elements if not removed */
    #copyright_logo {
        display: none;
    }



}







@font-face {
    font-family: 'geomedium';
    src: url('fonts/geographwebmedium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'geobold';
    src: url('fonts/geographeditwebbold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'georegular';
    src: url('fonts/geographwebregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'leelawadee';
    src: url('fonts/leelawad.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}