styles.scss

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    margin: 0;
    transition: background-color 0.5s;
}

#main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    h1 {
        margin-bottom: 20px;
        cursor: pointer;
        transition: color 0.2s;
        &:hover {
            color: rgb(172, 172, 172);
        }
    }
    #result {
        margin-top: 20px;
        p {
            height: 20px;
            margin: 10px 10px;
        }
        img {
            height: 50px;
            margin: -20px 0;
            filter: drop-shadow(0px 0px 3px #808080);
        }
        .pre-city {
            font-weight: bold;
            color: #cfcfcf;
            cursor: pointer;
            max-width: max-content;
            transition: color 0.3s;
            &:hover {
                color: #FFF;
            }
        }
        .map-link {
            background-color: rgb(134, 106, 211);
            border-radius: 5px;
            margin-top: 20px;
            cursor: pointer;
            a {
                padding: 20px;
                display: flex;
                flex: 1;
                color: rgb(245, 255, 247);
                font-weight: bold;
                text-decoration: none;
            }
            &:hover {
                background-color: rgb(73, 41, 161);
            }
        }
    }
    .mylocation-button {
        cursor: pointer;
        margin-top: 20px;
        background-color: #bd93f9;
        padding: 20px;
        text-align: center;
        font-weight: bold;
        border-radius: 5px;
        &:hover {
            background-color: #9061d3;
        }
    }
    .footer {
        font-weight: bold;
        color: #8f9099;
        text-decoration: none;
        transition: color 0.3s;
        &:hover {
            color: #696a72;
        }
    }
}

.dark {
    background-color: #44475a;
    color: #f8f8f2;
}

.light {
    color: #44475a;
    background-color: #f8f8f2;
}