@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Guides:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&display=swap');

:root {
    --font-family: 'Lato', sans-serif;
    --main-color: #54FDB4;
    --dark-blue-color: #0D1127;
    --dark-green-color: #1E3E3D;
}

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

body {
    font-family: var(--font-family);
}

.button {
    text-decoration: none;
    padding: 7px 20px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    display: inline-block;
    background-color: white;
    cursor: pointer;

    &:hover {
        background-color: #54FDB4;
        color: white;
    }
}

.home {
    display: flex;
    justify-content: center;

    .content {
        margin-top: 100px;

        .current-weather {
            .title {
                font-family: "Edu AU VIC WA NT Hand", cursive;
                font-weight: 700;
                font-size: 22px;
                text-decoration: none;
            }

            .items {
                margin-top: 15px;
            }
        }

        .add-subscription {
            margin-top: 20px;
        }
    }
}

.add-number {
    display: flex;
    justify-content: center;

    .content {
        margin-top: 100px;

        .title {
            font-family: "Edu AU VIC WA NT Hand", cursive;
            font-weight: 700;
            font-size: 22px;
            text-decoration: none;
        }

        .form {
            margin-top: 20px;

            form {
                .text-inputs {
                    margin-top: 4px;

                    input {
                        display: block;
                        padding: 2px 4px;
                    }
                }

                .notification-time {
                    margin-top: 4px;
                }

                .buttons {
                    margin-top: 4px;
                }
            }
        }

        .message {
            color: green;
        }

        .error {
            color: red;
        }
    }
}