@font-face {
	font-family: poppins;
	src: url("./../../fonts/poppins.ttf");
}

@font-face {
	font-family: poppins;
	src: url("./../../fonts/poppins_bold.ttf");
	font-weight: bold;
}

* {
	font-family: poppins;
}

:root {
	--brand-primary-color: rgb(83, 166, 250);
	--brand-white-color: #ffffff;
	--brand-secondary-color: rgb(124, 183, 241);
	--footer-nav-border-radius: 30px;
	--footer-notch-border-radius: 60px;
	--footer-notch-background-color: rgb(255, 255, 255);
	--brand-mute-color: rgb(211, 205, 205);
	--brand-footer-nav-fontsize-2: 0.8rem;
	--brand-footer-nav-fontsize: 0.9rem;
	--brand-weather-value-font-size: 4rem;
	--brand-medium-font-size: 1.6rem;
	--brand-tertiary-color: rgb(137, 190, 243);
	--brand-tertiary-color-2: rgb(164, 204, 245);
    --brand-gradient-color:linear-gradient(240deg, var(var(--brand-primary-color)),var(var(--brand-secondary-color)));
	--brand-input-border-radius:5px;
	--brand-button-3-border-radius:5px;
	--brand-small-text-2:0.7rem;
}

#spinner {
	background: ghostwhite;
	height: 100vh;
	width: 100%;
	position: fixed;
	top: 0;
	right:0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	
}


/* utility classes */
.brand-btn {
	border-radius: 30px;
	background: var(--brand-primary-color);
	transition: 0.9s;
	padding: 15px;
	text-align: center;
	text-transform: capitalize;
	border: none;
	outline: none;
	width: 75vw;
	color: var(--brand-white-color);
}

.brand-btn-2{
	padding:13px;
	padding-left: 20px;
	padding-right:20px;
	border-radius:30px;
	border:0;
	outline:0;
	background:var(--brand-white-color);
	text-align:center;
	color:#000;
	text-transform: capitalize;
	width:100%;
}

.brand-btn-3{
	border-radius: var(--brand-button-3-border-radius);
	width:100%;
	outline:0;
	border:0;
	padding:10px;
	background:var(--brand-primary-color);
}
.brand-btn-3-secondary{
	border-radius:var(--brand-button-3-border-radius);
	background:var(--brand-white-color);
	border:2px solid var(--brand-primary-color);
	outline:0;
	width:100%;
	
}
.brand-btn:hover {
	background: var(--brand-secondary-color);
	cursor: pointer;
}
.brand-gradient{
    background:var(--brand-gradient-color);
}
.brand-text-mute {
	color: var(--brand-mute-color);
}

.brand-bg-mute {
	background: var(--brand-mute-color);
}

.brand-bg-white {
	background: var(--brand-white-color);
}

.brand-small-text {
	font-size: var(--brand-footer-nav-fontsize);
}

.brand-small-text-2 {
	font-size: var(--brand-footer-nav-fontsize-2);
}


.brand-small-text-3{
	font-size: var(--brand-small-text-2);
}
.brand-tertiary-color {
	background: var(--brand-tertiary-color);
}
.brand-medium-text {
	font-size: var(--brand-medium-font-size);
}
.brand-primary-color {
	background-color: var(--brand-primary-color);
}

.brand-secondary-color {
	background-color: var(--brand-secondary-color);
}

.brand-large-text {
	font-size: var(--brand-weather-value-font-size);
}

.brand-primary-text{
	color:var(--brand-primary-color);
}

/* styles for the footer navigation */
.footer-nav {
	color: white;
	width: 100%;
	padding: 3px;
}

.footer-nav-container {
	background: var(--brand-secondary-color);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
}

section.footer-nav > section {
	font-size: var(--brand-footer-nav-fontsize);
}
/* utility component */

.utility-component {
	background: var(--brand-secondary-color);
	color: white;
	padding: 20px;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: start;
	flex-direction: column;
	width: 100%;
	margin: auto;
	transition: 0.3s;
	border-radius: var(--footer-nav-border-radius) var(--footer-nav-border-radius)
		0px 0px;
	height: 0%;
}

.add-utility-component-height {
	height: 60%;
	z-index: 100;
}

.add-utility-component-height-2{
	height:40%;
}

.add-utility-component-height-3{
	height:30%;
}

.utility-component .utility-notch {
	background: var(--footer-notch-background-color);
	width: 15%;
	height: 7px;
	border-radius: var(--footer-notch-border-radius);
	position:absolute;
	top:0;
}

/* weather app styling */

.current-weather-unit {
	display: inline-block;
	transform: translateY(20px);
}

.current-weather-icon {
	transform: scale(3.5);
}

/* weather panel icons and text */
.weather-text {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-5px);
}
.future-weather-notch,
.future-weather-notch-active {
	width: 20px;
	height: 5px;
	background: var(--brand-secondary-color);
	border-radius: var(--footer-notch-border-radius);
	transform: translateY(-15px);
}

::-webkit-scrollbar
{
	height:0;
	width:0;
}

.future-weather-notch-active {
	background: var(--brand-primary-color);
}
.next-week-notch{
    width:40px;
    height:5px;
    background:white;
    border-radius: var(--footer-notch-border-radius);
	transform:translateY(-10px);
}

.map-container{
	transform: translate(165px,-5px);
}

.ripple-container{
	transform: translateX(-17px);
}

.search-input{
	border-radius:var(--brand-input-border-radius);
	border:0;
	outline:0;
	cursor:pointer;
}

.brand-gradient{
	background: var(--brand-tertiary-color-2);
}
@media (min-width: 667.98px) {
	.width-toggle {
		width: 35vw;
	}
	.width-toggle-2 {
		width: 75vw;
		
	}

	.width-toggle-5{
		width:90vw;
	}

	.width-toggle-3 {
		width: 50vw;
	}
	.width-toggle-4{
		width:35vw;
	}
	.width-toggle-6{
		width:25vw;
	}
}

.toggle-btn{
	cursor: pointer;
}

ul{
	list-style: none;
}