.error-page {
    position: fixed;
    inset: 0;
    background-image: url(../images/228310-P2FL95-675.jpg);
    z-index: 10;
    background-position: center;
    background-size: cover;
}


.loading-sec {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.523);
    z-index: 3;
}

.loading-sec .loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
}

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}

.loader::after {
    margin: 8px;
    animation-duration: 3s;
}

@keyframes l15 {
    100% {
        transform: rotate(1turn)
    }
}

nav .container {
    .navbar-brand {
        img {
            width: 40px;
            height: 40px;
            object-fit: content;
        }
    }

    #navbarNav {
        .navbar-nav {
            li.nav-item {
                a {
                    color: white;
                    transition: all 0.3s ease;
                    border: 2px solid transparent;
                    border-radius: 30px;

                    &:hover {
                        color: aqua;
                        border-color: aqua;
                    }

                }

                a.active {
                    color: aqua;
                    border: 2px solid aqua;
                    border-radius: 30px;
                }
            }
        }
    }
}

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/76811.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .container {
        .row {
            .col-sm-9 {
                .input-group {
                    input {
                        &::placeholder {
                            color: rgba(255, 255, 255, 0.6);
                        }

                        &:focus {
                            border-color: transparent;
                            box-shadow: 0 0 0 0 transparent;
                            color: white;
                        }
                    }
                }
            }
        }

        #locationContainer {
            font-weight: lighter;
            box-shadow:inset 5px 5px 10px 5px rgba(0, 0, 0, 0.423),inset 5px 5px 10px 5px rgba(0, 0, 0, 0.423);
            background-position: center;
            background-size: cover;
        }

        #weatherData {
            .card {
                box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5), 5px 5px 10px 2px rgba(0, 0, 0, 0.5);

                &#weatherTod {
                    font-weight: lighter;

                    .card-body {
                        #tempTod {
                            font-size: 100px;
                        }

                        #conditionTod {
                            width: 40px;
                            height: 40px;
                        }

                        #infoCondTod {
                            font-weight: bold;
                        }

                        #windDetailsTod {
                            img {
                                width: 20%;
                                margin-inline: 5px;
                            }
                        }
                    }
                }

                &#weatherTom {
                    font-weight: lighter;

                    .card-body {
                        #tempTom {
                            font-size: 100px;
                        }

                        #tempTomMin {
                            font-size: 50px;
                        }

                        #conditionTom {
                            width: 40px;
                            height: 40px;
                        }

                        #infoCondTom {
                            font-weight: bold;
                        }
                    }
                }

                &#weatherAfTom {
                    font-weight: lighter;

                    .card-body {
                        #tempAfTom {
                            font-size: 100px;
                        }

                        #tempAfTomMin {
                            font-size: 50px;
                        }

                        #conditionAfTom {
                            width: 40px;
                            height: 40px;
                        }

                        #infoCondAfTom {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

.btn-aqua {
    --bs-btn-color: rgb(116, 116, 116);
    --bs-btn-bg: aqua;
    --bs-btn-border-color: aqua;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: rgb(0, 207, 207);
    --bs-btn-hover-border-color: rgb(0, 207, 207);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: rgb(0, 207, 207);
    --bs-btn-active-border-color: rgb(0, 207, 207);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: aqua;
    --bs-btn-disabled-border-color: aqua;
}

footer {
    background-color: #323544;
}

#subscribeInput::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#subscribeInput:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0 transparent;
}

.social-icons i{
    color: #01FFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-icons i:hover{
    color: rgb(0, 207, 207);
}