*, *:before, *:after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}


html {
    box-sizing: border-box;
    font-size: 16px;
}

body {
    max-width: 100vw;
    background-color: #0C2D48;
    font-family: Helvetica, Arial, sans-serif;
    color: #f7f7f7;
    
}

header {
    display: flex;
    justify-content: center;
    font-family:  sans-serif, Arial, Helvetica
}


main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#weatherInput {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;

}

#weatherInput > span{
    margin: 1rem;
}

#weatherContainer{
     display: flex;
     flex-direction: column;
     justify-content:space-between;
     align-items: center;
     flex-wrap: wrap;
     margin: 1rem;
     
}

#submitCity{
    background-color: #2E8BC0;
    color: white;
    border: 1px solid grey;
    cursor: pointer;
}

#submitCity:hover{
    border: 1px solid white;
}

#secondaryContainer{
    display:flex;
    order: 2;
    justify-content: space-between;
    font-size:smaller;
    border: 2px solid #b1c1c9;
    border-radius:10px;
    padding: 0.5rem;
}

#tempContainer{
    display:flex;
    border: 1px solid;
    border-radius: 10%;
    align-items: center;
    background-color: #145DA0;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

#fahrenheitSelect, #celsiusSelect{
      margin: 0.25rem;
}

#tempToggler{
    background-color: #ebebeb;
    border: 1px solid  grey;
    border-radius: 10%;
    position: relative;
    width: 2rem;
    height: 1rem;
    padding-top: 0.1rem;
    padding-bottom: 1rem;
    cursor: pointer;
   
}


#tempToggler:hover{
    border: 2px solid white;
    

}


#temperatureBtn{
    border-radius: 100%;
    border: 2px solid #2E8BC0;
    background-color: #2E8BC0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    position: absolute;
    pointer-events: none;   
}

#spin{
    animation: spinning 1.8s linear infinite;
    border: 8px solid #B1D4E0;
    border-top: 8px solid #0C2D48;;
    border-bottom: 8px solid #0C2D48;;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
   
}

@keyframes spinning {
    0% {  
        transform: rotate(0deg);

    }

    100% { 
        transform: rotate(360deg);
        
    }

}

.errorCard {
    position:absolute;
    bottom: 50vh;
    width: 98%;
    font-family: Helvetica, Arial, sans-serif;
    padding-top: 5rem;
    padding-bottom: 5rem;
    color: white;
    background-color: #145DA0;
    border: 1px solid white;
    border-radius: 3px;
    text-align: center;
    font-weight: bolder;
    opacity: 0.9;
     
}

@media screen and (min-width: 768px) {
    .errorCard {
        width: 50%;
        left: 25%;
    }
    
}

.headline {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: large;

}

.msg {
    display: block;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    width: 100%;
    text-align: center;
    margin: 0;;
}

.xButton{
    position: absolute;
    top: 0;
    right: 0;
    color: red;
    cursor: pointer;
    border: none;
    opacity: 0.7;
    font-size: xx-large;
}

.xButton:hover{
    opacity: 1;
}

.sessionCelsius{
    right: 0;
}

.toggleCelsius{
    animation: toggleRight 1s linear  1;
    animation-fill-mode: forwards;
}

.toggleFahrenheit {
    animation: toggleLeft 1s linear  1;
    animation-fill-mode: forwards;
}

@keyframes toggleRight {
    0% {
        border: 2px solid red;
        transform: rotate(0deg)
    }

    50%{
        right: 50%;
        border: 2px solid green;


        
    }

    100% {
        transform: rotate(360deg); 
        right: 0;        
        
    }

}

@keyframes toggleLeft {
    0%{
        right: 0;
        border: 2px solid red;
        transform: rotate(0deg)
    }

    50%{
        right: 50%;
        border: 2px solid green;
    }

    100% {
        transform: rotate(-360deg); 
        right: auto;
        
        
    }

}

.mainCard{
    font-size: larger;
    border-radius: 10px;
    padding-right: 1.75rem;
    padding-left: 1.75rem;
    min-width: 40%;
    
}

.mainCard > .Time {
    font-size: small;    
}


.mainCard > .Temperature {
    font-size: xx-large;

}

.mainCard > .feelsLike {
    font-size: small;
}

.mainCard > .humidity {
    font-size: small;
    
}

.mainCard > .Time > .timeText {
    font-size: large;
}


.Time{
    order: 1;
    margin: 0.1rem;

}

.Forecast {
    order: 2;
    font-weight:bold

}

.Temperature {
    order: 3;
    margin-bottom: 0.1rem;
    margin-top: 0.4rem;
    font-size: larger;

}

.feelsLike {
    order: 4;
    margin-top: 0.1rem;

}

.humidity {
    order: 5;

}

.dateText {
    display: block;
}

.timeText {
    border: 1px solid white;
    border-radius: 3px;
    background-color: #145DA0;
    font-weight: bold;
}

.earlier, .later {
    margin: 0.25rem;
    padding: 0.25rem;
    font-size: large;
    border: none;
    color: white;
    border: 1px solid grey;
    border-radius: 4px;
    background-color: #2E8BC0;
    cursor: pointer;
}

.earlier:hover {
    border: 1.5px solid white;
}

.later:hover {
    border: 1.5px solid white;
}


span {
    margin: 0.25rem;
}

input {
    background-color: #ebebeb;;
    color: grey;
    font-weight:bolder
}

.none {
    display:none;
}

.card {
    display: flex;
    flex-direction: column;
    background-color:#145DA0;
    box-shadow: 0 3px 10px #ebebeb;
    flex-grow: 1;
    text-align: center;
    word-wrap: break-word;
    padding: 0.25rem;
}