body 
{
    display: flex;
    /* justify-content: center; */
    padding-top: 40px;
    flex-wrap: wrap;
    flex-direction: column;
    background: linear-gradient(45deg, #00C6A7 , #1E4D92 );
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    color: rgb(var(--color));
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

::placeholder
{
    color: white;
}

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


.container{
    color:white;
}

.current-info{
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    padding-top: 10px;
    margin-top: 0;
}

.date-container .time{
    padding-top: 0;
    font-size: 50px;
    animation: moveright 1s linear 1;
    animation-delay: 1s;
    visibility: hidden;
    animation-fill-mode: forwards;
}

.date-container am-pm{
    font-size: 30px;
}

.date-container .date{
    font-size: 30px;
    animation: moveright 1s linear 1;
    animation-delay: 1s;
    visibility: hidden;
    animation-fill-mode: forwards;
}

@keyframes moveright 
{
    0%
    {
        transform: translateX(-100px);
        visibility: visible;
    }
    100%
    {
        transform: translateX(0);
        visibility: visible;
    }
}

#search-form
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    color: white;
}

[type="search"]::-webkit-search-cancel-button 
{
    -webkit-appearance: none;
    appearance :none;
    color: white;
    height: 10px;
    width: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
    background-size: 10px 10px;
}

#temp
{
    text-align: center;
}

#temp #temp-unit
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5rem;
    color: teal;
}

#temp #temp-value
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2rem;
    color: teal;
}

#climate
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5rem;
    color: teal;
    text-align: center;
}

#location
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5rem;
    color: teal;
    text-align: center;
}

#temp-icon
{
    margin: 1rem;
    width: 40%;
    height: auto;
}

main
{
    padding: 20px;
    margin-top: 10px;
    background-color: white;
    border-radius: 20px;
    width: 360px;
    height: 360px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 20px 10px rgba(112, 102, 102, 0.2);
    border:5px solid linear-gradient(45deg, #f8b703 , #fa037f );
    margin-bottom: 0;
}

#search-button
{
    font-size: 15px;
    color: white;
    background: linear-gradient(45deg, #00C6A7 , #1E4D92 ); 
    border-radius: 20px;
    border: white solid 2px;
    padding: 7px; 
    text-decoration: none;
    font-weight: 700;
    transition: all 0.4 ease 0s;
}

#search-button:hover
{

    font-size: 15px;
    color: white;
    background: linear-gradient(45deg, #1E4D92, #00C6A7 ); 
    border-radius: 20px;
    border: white solid 2px;
    padding: 7px; 
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 0 15px black;
    transform: translateY(-10px);
}

#search-input
{
    width: 260px;
    overflow: hidden;
    font-size: 20px;
    margin: 8px 0;
    padding: 8px 0;
    border-bottom: 3px solid white;
    color: white;
    outline: none;
    background: none;
}

input
{
    border: none;
}

a
{
    text-decoration: none;
    float: right;
    background: linear-gradient(45deg, #00C6A7 , #1E4D92 );
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    font-size: 20;
    font-weight: 400;
    border: white solid 2px;
    border-radius: 20px;
    align-items: centre;
    padding: 5px;
    margin-right: 5%;
    margin-bottom: 10%;
    animation: moveup 1s linear 1;
    animation-delay: 3s;
    visibility: hidden;
    animation-fill-mode: forwards;
}

@keyframes moveup 
{
    0%
    {
        transform: translateY(150px);
        visibility: visible;
    }
    100%
    {
        transform: translateY(0);
        visibility: visible;
    }
}

a:hover
{
    background: linear-gradient(45deg,#1E4D92 , #00C6A7);
    box-shadow:0 0 15px black;
    transform: translateY(-10px);
}