body { 
    font-size: 13px; /* sets default font size for body text */
    font-family: Trebuchet MS; /* sets default font for body text */
    overflow-x: hidden;
} 

a { color: blue; } /* makes links permanently blue */ 

/* centers elements for use in the tooltip */ 
.center { 
  display: block; /* sets elements to be treated as block elements */ 
  margin-left: auto; /* auto set left margin */ 
  margin-right: auto; /* auto set right margin */
}


main {
    display: flex;
    justify-content: center;
}

#compare-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    width: 300px;
}

.compare {
    padding: 10px;
}

.compare > * {
    margin-bottom: 5px;
}

.compare-palette {
    display: flex;
    justify-content: center;
    align-items: center;
}

.compare-palette-color {
    width: 25px;
    height: 25px;
}

.compare-image {
    width: 100%;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}

.compare-name {
    font-size: 16px;
}

.compare-pname {
    font-size: 14px;
}

.compare-year {
    font-size: 14px;
}

#tooltip {
    position: absolute; /* prevents tooltip position from affecting positions of other objects onscreen */ 
    left: 318px; /* initial x position */ 
    top: 395px; /* initial y position */ 
    padding: 10px; /* sets padding around tooltip elements to 10px */
    background-color: white; /* sets tooltip background color to white */  
    border-radius: 10px; /* rounds out edges */ 
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); /* sets shadow */ 
}

.hidden { 
    display: none; /* hides display of tooltip when not in use */ 
}

#tooltip p { 
    margin: 10px; /* applies 10 pixel margin to tooltip text elements */
    font-family: Trebuchet MS; /* sets tooltip font */ 
    font-size: 16px; /* sets tooltip font size */ 
    line-height: 20px; /* sets tooltip line height */ 
}


#pTooltip { 
    position: absolute; /* prevents tooltip position from affecting positions of other objects onscreen */ 
    left: 318px; /* initial x position */ 
    top: 395px; /* initial y position */ 
    padding: 0px; /* sets padding around tooltip elements to 10px */
    background-color: white; /* sets tooltip background color to white */  
    border-radius: 10px; /* rounds out edges */ 
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); /* sets shadow */ 
}

#pTooltip p { 
    margin: 10px; /* applies 10 pixel margin to tooltip text elements */
    font-family: Trebuchet MS; /* sets tooltip font */
    font-size: 16px; /* sets tooltip font size */ 
    line-height: 20px; /* sets tooltip line height */ 
} 


#submission { background-color: aliceblue; } /* sets background color to blue */


/* creates four columns that float side by side */
.column {
    float: left; /* sets text to float left */
    text-align: center; /* centers text within its column */
    width: 25%; /* sets width of each column to 1/4 of the page */
} 

/* extends blue div background to include the previously-mentioned columns */
.row:after {
    content: ""; /* inserts blank content after columns */ 
    display: block; /* sets element to be treated as a block element */
    clear: left; /* pushes div below left floating elements */
}