@font-face {
    font-family: Ubuntu;
    src: url(Ubuntu-Medium.ttf);
}

body {
    background-image: linear-gradient(to bottom right, rgb(158, 198, 56), rgb(19, 161, 183));
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: Ubuntu, sans-serif;
    color: rgb(222, 217, 217);
}

.grid {
    display: grid;
    grid-template: 1fr 1fr 3fr 1fr / 1fr 3fr 1fr;
    align-items: center;
    justify-content: center;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 70%;
    height: max(60%, 500px);

    background-image: linear-gradient(to top right, rgb(67, 212, 193), red);
    border-radius: 20px;
    padding: 10px;
}

.grid>* {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.location-information {
    grid-row: 3 / 4;
    grid-column: 2 / 3;

    font-size: 2rem;
    text-align: center;
}

.temperature-button {
    grid-row: 1 / 2;
    grid-column: 3 / 4;

    justify-self: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;
    border: 2px solid black;
    color: white;
    background-color: rgb(64, 56, 56);
}


.name-and-region {
    font-size: 2.5rem;
}

#location-input {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin: 5px;
    padding: 5px;

    width: 70%;
    height: 30%;
    align-self: flex-start;
    justify-self: center;

    font-size: 1.5rem;
    background-color: grey;
    border-radius: 20px;
    color: white;
}

#location-input:focus {
    outline: none;
}

#location-input-label {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    font-size: 2rem;
    align-self: flex-end;
}

.icon {
    width: 50px;
}