*{
    font-family: "scandia-web", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #131313;
    font-style: normal;
}

body{
    background-color: #f3f3f3;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
    font-style: normal;
}

.container-fluid{
    margin-top: 5%;
    width: 90%;
}

.sun, .moon{
    width: 20%;
    display: none;
    margin-bottom: 10%;
}

.sun.active, .moon.active{
    display: inline;
}

span#daytime, .currenttemp{
    font-size: 30px;
    font-weight: 300;
}

.overview{
    padding: 15%;
    min-height: 350px;
    border-radius: 24px;
    background-color: white !important;
    text-align: center !important;
    display:table-cell;
    vertical-align: middle; 
}

.headerrow{
    margin-bottom: 3%;
    padding-left: 1%;
}
.row{
    margin-bottom: 3%;
}

.wicon img{
    width: 25%;
}

img.map{
    width: 100%;
    object-fit: cover;
    min-height: 450px;
}

.overviewbig{
    padding: 2% !important;
    min-height: 480px !important;
    display:table-cell;
    vertical-align: middle;
    border-radius: 24px;
    background-color: white !important;
    text-align: center !important;
    display:table-cell;
    vertical-align: middle; 
}
.col-md-4, .col-md-6 {
    display : table;
  }

  .dtext{
    margin-bottom: 2%;
  }
  iframe{
    min-height: 400px;
    min-width: 400px;
    border-radius: 12px;  
  }
  .map{
    border-radius: 12px;
  }
  
  /*NIGHT SETTINGS*/
  body.night{
    background-color: rgb(0, 0, 37);
  }

  .container-fluid.night{
    background-color: rgb(0, 0, 37);
  }

  .container-fluid.night h1{
    color: white;
  }

  .container-fluid.night .overview, .container-fluid.night .overviewbig{
    background-color: rgb(4, 4, 61) !important;
  }

  .container-fluid.night span, .container-fluid.night .wtext, .container-fluid.night .currenttemp, .container-fluid.night .dtext, .container-fluid.night b{
    color: white;
  }

  .container-fluid.night .map{
    filter: invert();
  }

@media(max-width:480px){
    .overview{
        min-height: 150px;
        margin-bottom: 5% !important;
    }
    .overviewbig{
        padding: 2%;
        min-height: 250px;
    }
    img.map{
        min-height: 250px;
    }
    .col-sm-12{
        margin-bottom: 5%;
    }
    iframe{
        min-height: 200px;
        min-width: 200px; 
      }
}