* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #2c2e30;
}

.header {
    display: flex;
    justify-content: center;
    background-color: rgb(52, 174, 250, 0.5);
    padding: 20px;
}

.title {
    color: #f4f4f4;
}

main {
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
}

.svg {
    width: 60%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    /* width: 80%; */
    /* margin: auto; */
    justify-content: space-around;
}

.container path {
    fill: rgb(52, 174, 250);
    stroke: #f4f4f4;
    stroke-width: 2px;
}

.container path:hover {
    fill: rgb(26, 123, 233);
}



.link {
    display: flex;
    justify-content: left;
    margin: 50px;
}

.link a {
    font-size: 10px;
    color: #f4f4f4;
    text-decoration: none;
}

.footer {
    display: flex;
    justify-content: right;
    background-color: rgb(52, 174, 250, 0.5);
    padding: 20px;
    top: 0;
}

.footer a {
    color: #f4f4f4;
    text-decoration: none;
}

.location {
    display: flex;
    border: solid 2px;
    padding: 10px;
    border-radius: 10px;
    height: 240px;
    width: 240px;
}

.card {
    display: flex;
    flex-wrap: wrap;
    align-items: space-around;
    justify-content: space-around;
    padding: 10px;
    border: solid 2px;
    border-radius: 10px;
    height: 400px;
    width: 240px;
    background-color: rgb(39, 78, 109);
}

.mini-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: solid 2px transparent;
    border-radius: 10px;

    height: 60px;
    width: 100px;
}

.wide-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: solid 2px transparent;
    border-radius: 10px;
    height: 60px;
    width: 200px;
}

.weather-img {
    width: 75px;
    height: 75px;
}

.white-text {
    /* color: rgb(39, 78, 109); */
    color: #f4f4f4;
}

.orange-text {
    color: orange;
}

.center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.pad-right5 {
    padding-right: 5px;
    padding-left: 20px;
}

.pad-top10 {
    padding-top: 10px;
}

.mrl5{
    margin-left: 5px;
}