/*
  File: vowels.css
  Author: Shane John
  Date: 2025-05-19
  Course: CPSC 3750 – Web Application Development
  Purpose: Styling for Programming Exam 2
  Notes: Not commented to save time for word doc
         ...I like to think the labels are pretty self-explainitory
*/

body
{
    background-color: rgba(224, 255, 245, 0.896);
}

.E2
{
    padding: 20px;
    text-align: center;
}

.E2 #buttons
{
    padding: 15px;
    margin: auto;
    width: fit-content;
    background-color: rgba(148, 148, 148, 0.466);
    border-radius: 20px;
}
.E2 #buttons h3
{
    color: rgb(11, 63, 52);
}
.E2 button
{
    font-size: 14pt;
    padding: 8px 15px 5px 15px;
    color: white;
    background-color: rgba(11, 86, 71, 0.693);
    border-radius: 10px;
}

.E2 #word-list
{
    overflow-y: auto;
    padding: 5px;
    margin: 1% 33% 1% 33%;
    width: 33%;
    max-height: 200px;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.E2 #favs
{
    padding: 10px;
    margin: 0 35% 0 35%;
    background-color: rgba(7, 59, 38, 0.271);
    border-radius: 20px;
}
.E2 #drop-area
{
    width: fit-content;
    padding: 5px;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 1%;
    background-color: white;
    border-radius: 5px;
}