/* Base */

html {
    scroll-behavior: smooth;
}
@font-face {
    font-family: "Myriad";
    src: url("../fonts/myriadpro.otf") format("opentype");
}
@font-face {
    font-family: "Myriad Pro";
    src: url("../fonts/myriadprobold.otf") format("opentype");
}
@font-face {
    font-family: "TASA";
    src: url("../fonts/tasareg.otf") format("opentype");
}

/* Main content */

body {
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 22px;
    text-align: center;
    background-image: url('../assets/bg/clear.jpg');
    background-position: 100% 100%;
    background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
.head, .content, .hourly, .footer {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    margin: 5px;
    padding-bottom: 10px;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}
.input {
    margin: 5px;
    padding-bottom: 10px;
}
@media (min-width: 350px) {
    .head, .content, .input, .hourly, .footer {
        margin: 5px 10% 5px 10%;
    }
}
@media (min-width: 600px) {
    .head, .content, .input, .hourly, .footer {
        margin: 5px 20% 5px 20%;
    }
}
@media (min-width: 992px) {
    .head, .content, .input, .hourly, .footer {
        margin: 5px 30% 5px 30%;
    }
}
@media (min-width: 1200px) {
    .head, .content, .input, .hourly, .footer {
        margin: 5px 35% 5px 35%;
    }
}
#weather-icon {
    margin-top: 10px;
    height: 70px;
}
#location {
    font-size: 26px;
}
#temp {
    font-weight: bold;
    font-size: 60px;
}
#temp, #hl-temp, #conditions {
    padding: 5px;
}
#fc0Icon, #fc1Icon, #fc2Icon, #fc3Icon, #fc4Icon, #fc5Icon, #fc6Icon {
    max-height: 30px;
}
#fc-legend > .row > div > span {
    color: #cccccc;
    font-family: "Myriad Pro", sans-serif;
    font-size: 15px;
}
.hourly > #listhours > .col-2 > span {
    font-size: 15px;
}
.hourly > #hoursicons > .col-2 > span > img {
    max-width: 36px;
}
.hourly > #hourstemps > .col-2 > span {
    font-size: 22px;
}
.footer {
    font-size: 14px;
    font-family: "Myriad", sans-serif;
}
#aznate {
    font-size: 16px;
    font-family: "Myriad Pro", sans-serif;
}

/* Bootstrap re-coloring */
a, .btn-link {
	color: #E0A116;
}
a:hover, .btn-link:hover {
	color: #c28e20;
}
.btn {
	font-family: "Myriad Pro", sans-serif;
}
.btn-primary {
	background-color: #E0A116;
	border-color: #e0a116;
	color: black;
	font-family: "Myriad Pro", sans-serif;
}
.btn-primary:hover {
	background-color: #c28e20;
	border-color: #e0a116;
	color: black;
}
.btn-primary:focus, .btn-primary.focus, .btn-primary:active {
	background-color: #c28e20;
	border-color: #e0a116;
	color: black;
	box-shadow: 0 0 0 0.2rem rgba(194, 142, 32, 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: black;
  background-color: #c28e20;
  border-color: #e0a116;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(194, 142, 32, 0.5);
}
.form-control:focus, .form-control.focus {
    border-color: #e0a116;
}