/* ================================================= */
/* Custom properties */
/* ================================================= */
:root {
	--body-font: 'Roboto', serif;

	--p-shade-80: #050B12;
	--p-shade-50: #0e1b2d;
	--p-shade-30: #13263e;
	--p-shade-20: #162b47;
	--primary: rgb(144, 187, 36);
	--p-tint-40: #76869b;
	--p-tint-90: #ffffff;
	--secondary: #EFA00B;
	--tertiary: #03B5AA;

	--global-border-radius: 4px;
	--global-transition: all .2s ease-in-out;
}



/* ============================================================ */
/* General styles */
/* ============================================================ */
html {
	font-size: 16px;
}

body {
	font-family: var(--body-font);
	background-color: #050B12;
	color: var(--p-tint-90);
}

figure {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

.container {
	padding: 4rem 2rem;
}


#backgroundContainer {
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: fixed;
	justify-content: center;
	align-items: center;
}

#imageContainer {
	display: none; /* Hide image container */
}

#imageContainer img {
	max-width: 100%;
	max-height: 100%;
}

svg {
	padding: 10px;
}
/* ================================================= */
/* Typography */
/* ================================================= */
h1 {
    font-size: 60px;
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
}

h2 {
    font-size: 24px;
    font-family: 'Roboto Slab', serif;
    font-weight: 800;
    line-height: 1;
}

h3 {
    font-size: 42px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}


h4 {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

h5 {
    font-size: 21px;
    font-family: 'Roboto Slab', serif;
    font-weight: 200;
    line-height: 1.4;
}

p {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

small,
.form-msg,
.city__country {
	font-size: 1.75rem;
	line-height: 1.5;
}

a {
	color: var(--secondary);
	text-decoration: none;
	transition: var(--global-transition);
}

a:hover {
	color: var(--p-tint-90);
}

/* ================================================= */
/* New grid */
/* ================================================= */


    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 900px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #EFA00B;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #050B12;
      color: white;
      padding: 15px;
	  padding-top: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }


/* ================================================= */
/* Forms */
/* ================================================= */
form {
	width: 100%;
	margin-bottom: .6rem;
	max-width: 30rem;
}

label {
	margin-bottom: .8rem;
    margin-top: 1.2rem;
	display: block;
}


input {
	border-radius: var(--global-border-radius);
	border: 0;
}

input[type="text"] {
	height: 2.75rem;
	background: var(--p-shade-30) .75rem center no-repeat;
	color: var(--p-tint-90);
	padding-left: 1.25rem;
	flex-grow: 1;
	outline: none;
	transition: var(--global-transition);
}

input[type="radio"] {
	height: .75rem;
	background: var(--p-shade-30);
	color: var(--p-tint-90);
	padding-left: 2.25rem;
	flex-grow: 1;
	outline: none;
	transition: var(--global-transition);
 }
 


input::placeholder {
	color: var(--p-tint-40);
}

input:focus,
input:hover {
	background-color: var(--p-shade-50);
}

form button {
	height: 2.5rem;
	width: 95%;
	background-color: #050B12;
	border: none;
	border-radius: var(--global-border-radius);
	display: fixed;
	align-items: center;
	justify-content: center;
	transition: var(--global-transition);
	cursor: pointer;
    padding: 5px;
    margin-bottom: .2rem;
    margin-top: 2rem;

}

form button:hover {
	background-color: #03B5AA;
}

form button:active {
	background-color: var(--p-shade-50);
}

.form-msg {
	background-color: var(--p-shade-20);
	padding: .5rem 1rem;
	border-radius: 0 0 var(--global-border-radius) var(--global-border-radius);
	width: 75%;
	margin-left: .75rem;
	transform: translate3d(0, -100%, 0);
	opacity: 0;
	transition: var(--global-transition);
	position: relative;
	z-index: -1;
}

.form-msg.visible {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.form-row {
	display: flex;
	gap: .5rem;
}



/* ================================================= */
/* Header */
/* ================================================= */
.notification {
	background-color: var(--p-shade-80);
	padding: .5rem 2rem;
	width: 100%;
}

.notification p {
	margin: 0;
}



/* ================================================= */
/* Cities */
/* ================================================= */
.cities {
	display: flex;
	grid-template-columns: 1fr;
	padding: 50px;
	margin: 0 0 4rem;
	gap: 2rem;
}

.cities li {
	list-style: grid;
	display: flex;
	gap: 1.5rem;
	background-color: #fff;
	align-items: center;
	padding: 1.5rem;
	color: var(--p-shade-80);
	border-radius: var(--global-border-radius);
	box-shadow: 8px 8px 0px rgba(117, 115, 115, 0.08);
}

.city__conditions {
	color: var(--p-tint-40);
	margin-bottom: 1rem;
}

.city__country {
	color: #fff;
	background-color: var(--secondary);
	border-radius: var(--global-border-radius);
	padding: .125rem .25rem;
	margin-left: .5rem;
}


.input-hidden {
	position: absolute;
	left: -9999px;
  }
  
  input[type=radio] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
  }
 input[type=radio] + img {
	cursor: pointer;
  }

  input[type=radio] + img {
	width: 150px;
	height: auto;
	padding: 10px;
	transition: 500ms all;
  }
  
  input[type=radio]:checked + img {
	transform: 
	  rotateZ(-10deg) 
	  rotateX(10deg);
  }


  
/* ================================================= */
/* 560px+ */
/* ================================================= */
@media screen and (min-width: 560px) {
	.cities {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}

	.cities li {
		flex-direction: column;
		text-align: center;
	}

	.city__conditions {
		margin-bottom: 1.5rem;
	}
}



/* ================================================= */
/* 768px+ */
/* ================================================= */
@media screen and (min-width: 768px) {
	.notification {
		padding: .5rem 4rem;
	}

	.container {
		padding: 4rem;
	}
}


/* ================================================= */
/* Footer */
/* ================================================= */


.logo {
    transition-duration: 1.6s;
    cursor: pointer;
    display: inline-block;
	padding-bottom: 60px;
	padding-top: -10px;
}

.logo:hover {
    animation: bounceIn 1.6s;
    transform: rotate(0deg) scale(1.1) translateZ(0);
    transition: all 0.4s cubic-bezier(.8,1.8,.75,.75);
    cursor: pointer;
    transition-duration: 1.2s;
      
}
.logo:active {
    animation: bounceIn 0.6s;
    transform: rotate(0deg) scale(1.1) translateZ(0);
    transition: all 0.4s cubic-bezier(.8,1.8,.75,.75);
    cursor: pointer;
    transition-duration: 1.2s;
      
}