@import "base.css";

@font-face {
    font-family: jetbrains-mono;
    src: url("JetBrainsMono-SemiBold.woff2") format("woff2");
}

@media (width <= 400px) {
body {
    font-family: "jetbrains-mono";
    margin-right: 2em;
}
}

@media (width >400px) {
body {
    font-family: "jetbrains-mono";
    margin-left: 2em;
    margin-right: 2em;
}

}

.content {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-left: 2em;
    /*margin-right: 2em;*/
    margin-top: 0;
}

hr {
    border: 5px solid black;
    color: black;
    margin-bottom: 0;
    margin-left: 2em;
    margin-right: 2em;
}

.smallhr hr {
    border: 2.5px solid black;
}

.content hr {
    margin-left: 0;
    margin-right: 2em;
    border: 5px solid black;
}

header {
    margin: 2em;
    display: flex;
    align-items: center;
}

h1 {
    font-size: 4.5em;
    margin-top: 0;
    margin-bottom: 0;
}

h2 {
    font-size: 3em;
    margin-top: 0em;
    margin-bottom: 0;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.contact {
    margin-top: 2em;
}
.contact a {
    margin-right: 20px;
}

.subcontainer {
    margin-top: 5em;
}

.subcontainer a {
    text-decoration: underline;
    font-size: 1em;
}

.subcontainer p {
    margin-bottom: 1em;
    margin-top: 0px;
}

.date {
    font-size: 1em;
}

/* ===== Weather Page Styles ===== */
.weather {
    font-size: 4.5em;
    font-family: "jetbrains-mono", monospace;
}

.location {
    font-size: 1.5em;
    font-family: "jetbrains-mono", monospace;
}

.nav {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-family: "jetbrains-mono", monospace;
}

.nav a {
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav a.active {
    border-bottom: 2px solid black;
}

.nav a:hover {
    text-decoration: underline;
}

.metrics {
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-family: "jetbrains-mono", monospace;
}

.metric {
    font-size: 1em;
}


.info a {
    text-decoration: underline;
    font-size: 1em;
}