style.css

@import url(reset.css);

html {
    font-family: "Barllow", sans-serif;
}

.content {
    padding: 0 50px;
}

.topnav {
    background-color: forestgreen;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 15px;
    gap: 15px;
}

.topnav > h1 {
    font-size: 1.8em;
    color: white;
    text-align: center;
}

.topnav-button {
    height: 30px;
    display: flex;
}

.manage-connections {
    margin: 20px 10px;
}

.connected-devices-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
}

.connected-device {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 0;
}

.device-card {
    background-color: white;
    box-shadow: 0 4px 12px rgba(140, 140, 140, .5);
    margin: 0 10px;
    padding: 10px 20px;
    border-radius: 8px;
}

.device-card > hr {
    border-top: 2px solid #1b8a94;
}

button {
    color: white;
    background-color: #0A1128;
    padding: 2px 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.negative-button {
    background-color: #d13a30;
}

.neutral-button {
    background-color: #5f6c6d;
}

.positive-button {
    background-color: #24af37;
}

.hidden-button {
    display: none;
}

.device-info {
    min-width: 200px;
}

.device-temperature{
    min-width: 200px;
}

.device-power{
    min-width: 200px;
}

.device-power-drop{
    min-width: 200px;
}

.device-id {
    display: none;
}

.set-power-drop-temp-input {
    height: 1.3em;
    width: 70px;
}