* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

header {
    font-size: 1.2rem;
    color: white;
    text-align: center;
    background-image: linear-gradient(to right, rgb(59,109,195), rgb(35,5,85));
    height: 60px;
}

#container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

#title_contaier {
 display: flex;  
 flex-wrap: wrap;
 margin: 0 0; 
}



form {
    border-bottom: 3px solid rgb(117,117,117);
    margin-bottom: 15px;
}

#search-block {
    height:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex:1;
    margin: 0 10px;
}

#search-label {
    font-weight: bold;
    font-size:1.7rem;
}

#search {
border-radius: 5px;
font-size: 1.1rem;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
width:100%;
height:2.5rem;
}

.button {
    font-size: 1.1rem;
    width:100%;
    height:2.2rem;
    margin-bottom: 15px;
    border-radius: 5px;
    border: none;
    transition:background-color, 0.5s ease-in-out;
}

.color-blue {
    color:white;
    background-color: rgb(90, 162, 233);
}

button.color-blue:hover {
    background-color: rgb(10, 97, 184);
}

.color-red {
    color:black;
    background-color: red;
}

button.color-red:hover {
    color:white;
    background-color: rgb(214, 9, 9);
}

.color-grey {
    background-color: rgb(183, 183, 183);
}

button.color-grey:hover {
    color:white;
    background-color: rgb(114, 114, 114);
}

#radio-button-container {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

#radio-button-container label {
font-size: 1.1rem;
margin: 10px 5px;
}

#radio-button-container span {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 10px
}

.radio-button {
    width: 20px;
    height: 20px;
    margin: 10px 0;
}

#weather-block {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height:100%;
    flex:4;
    margin: 0 20px 0 10px;
}

#current-weather {
    padding: 0 10px;
}

.black-border {
    border:3px solid black;
}

#current-weather h2 {
    padding: 10px 0;
    font-size: 2rem;
    font-weight: bolder;
}

#current-weather h3 {
    margin: 15px 0;
}

#current-weather h3 span:hover{
    cursor: pointer;
}

#uv-good{
 background-color: rgb(41,149,1);
 padding: 5px 10px;
 border-radius: 5px;
}

#uv-ok{
 background-color: rgb(247,228,1);
 padding: 5px 10px;
 border-radius: 5px;
}

#uv-bad{
background-color: rgb(249,89,1);
padding: 5px 10px;
border-radius: 5px;
}

#uv-danger{
    background-color: rgb(217,0,17);
    padding: 5px 10px;
    border-radius: 5px;
}

#uv-death{
    background-color: rgb(108,79,203);
    padding: 5px 10px;
    border-radius: 5px;
}

#forecast {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

#forecast-title {
    flex-basis: 100%;
}

#forecast h3 {
    font-size: 1.6rem;
    padding: 10px 0;
}

.card {
    background-color: rgb(51, 71, 90);
    color:white;
    font-size: 1.3rem;
    padding: 5px 50px 20px 10px;
    margin-bottom: 25px;
    
}

.card p {
   line-height: 2.5; 
   font-size: 1.2rem;
}