@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.head {
    font-size: 30px;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(rgb(143, 77, 219),rgb(76, 94, 199));
    font-family: "Readex Pro";
    color: blanchedalmond;
}

body {
    background: linear-gradient(270deg, rgb(153, 94, 219), rgb(113, 76, 199));
    background-size: 400% 400%;

    -webkit-animation: anim 7s ease infinite;
    -moz-animation: anim 7s ease infinite;
    animation: anim 7s ease infinite;
}

@-webkit-keyframes anim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes anim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes anim {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.area,
.temp {
    background:rgba(97, 55, 131, 0.459);
    border-radius: 20px;
    height: 20vh;
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.temp {
    background:rgba(124, 55, 131, 0.459);
    flex-direction: column;    
}

.forecast {
    background:rgba(124, 55, 131, 0.459);
    flex-direction: column;   
    border-radius: 20px;
    height: 20vh;
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center; 
}

.degree {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.degree h2{
    font-size: 125px;
    justify-content: space-around;
    align-items: center;
    display: flex;
}


.descript {
    font-size: 25px;
    float: right;
   
    display: flex;
    justify-content: right;
}



.wind {
    background:rgba(124, 55, 131, 0.459);
    display: flex;
    border-radius: 20px;
    justify-content: space-around;
    align-items: center;
    background:rgba(97, 55, 131, 0.459);
    width: 50%;
    height: 20vh;
}

.windTest {
    display:block;
    justify-content: center;
    align-items: center;
}

.converter {
    padding-top: 20px;
}

.converterButton {
    font-family: "Readex Pro";
    font-size: 25px;
    color: blanchedalmond;

    cursor: pointer;
    background-color: rgba(124, 55, 131, 0.459); 
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0);
    padding: 10px;

    
}

.converterButton:active{
    transform: scale(0.98);
     box-shadow: -2px 11px 11px -2px rgba(24, 112, 228, 0.24);
  }

  .container{
      padding: 20px;
  }

  .table {
    border: 3px solid rgba(243, 243, 243, 0.103);
    margin-bottom: 102px;
    background:transparent;border:0
  }
  .table, td{
    background:rgba(97, 55, 131, 0.459);
      
      text-align: center;
      font-size: 19px;
      border-radius: 2px;
  }

  .fa-thermometer-three-quarters{
    color:rgb(250, 250, 250);
    margin: 20px;
    
   
  }

  @media all and (max-width:768px){

    .head {
        font-size: 20px;
        justify-content: center;
        flex-direction: column;
        margin-top: 30px;
    }



    .area,
    .temp {
        background:rgba(97, 55, 131, 0.459);
        border-radius: 20px;
        height: 20vh;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 11px;
        padding-left: 10px;
    }
    
    .temp {
        background:rgba(124, 55, 131, 0.459);
        flex-direction: column;    
    }
    
    .degree {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 17vh;
    }
    
    .degree h2{
        font-size: 45px;
        justify-content: space-around;
        align-items: center;
        display: flex;
    }

    .descript {
        float: right;
        height: 17vh;
        display: flex;
        justify-content: right;
    }
    
    
    
    .wind {
        background:rgba(124, 55, 131, 0.459);
        display: flex;
        border-radius: 20px;
        justify-content: space-around;
        align-items: center;
        background:rgba(97, 55, 131, 0.459);
        width: 100%;
        height: 17vh;
        font-size: 11px;
        padding-left: 10px;
    }
    
    .windTest {
        display:block;
        justify-content: center;
        align-items: center;
        
    }
    
  }