body {
  margin: 0;
  background: #eaeaea;
  font-family: Courier New, monospace;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  padding: 25px 50px;
  background: black;
  color: white;
}

.logo { width: 80px; }

.main-title {
  font-family: Arial, sans-serif;
  font-size: 80px;
}

.catchphrase {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #aaa;
}

/* MAIN LAYOUT */
.jq-container {
    display: flex;
    width:100%;
    min-height:80vh;
    background: #eaeaea;
    padding: 40px;
    box-sizing:border-box;
    gap: 40px;
}

/* SIDEBAR */
.jq-sidebar {
    width: 220px;
    height:270px;
    border: 3px solid black;
    backrground: white;
    display:flex;
    flex-direction:column;
}

.jq-sidebar h3 {
    margin-top: 2px;
    font-size: 28px;
    border-bottom: 3px solid black;
    padding:15px;
}

/*MENU ITEMS*/
.jq-menu-item {
    padding:15px;
    border-bottom:1px solid #aaa;
    font-size:14px;
    cursor:pointer;
    transition:0.15s;
}

/*HOVER = SELECTED FEEL*/
.jq-menu-item:hover {
    background:black;
    color:white;
}

/*ENTRIES SIDE*/
.jq-entries {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:25px;
}
    
/* ENTRIES COLUMN */
.jq-card {
    display:flex;
    align-items:center;
    gap:20px;

    width:80%;
    min-height:110px;

    border:4px solid black;
    background:white;
    padding:20px;
    
    cursor:pointer;
    transition: 0.15s ease;
}

/* HOVER EFFECT */
.jq-card:hover {
    bax-shadow: 8px 8px 0px black;
    transform: translate(-3px, 3px);
}

.jq-card:active{
    transform:translate(2px,2px);
    box-shadow:2px 2px 0px black;
}

/*ICON*/
.jq-icon {
    width:80px;
    height:80px;
    object-fit:none;
    border:3px solid black;
}

/*TEXT INFO*/
.jq-info p {
    margin:4px 0;
    front-size:14px;
}

.jq-info span {
    font-weight:bold;
    display:inline-black;
    width:90px;
}

.jq-link{
    text-decoration:none;
    color:inherit;
    display:block;
}