/* =======================================
   Emily's Sports Tables and Forms Project
   Pastel Sports Theme
======================================= */

/* Entire webpage */
body {
    background: linear-gradient(to bottom, #fffafc, #f7f8ff);
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
    margin: 30px;
    line-height: 1.7;
}

/* ===========================
   Navigation Bar
=========================== */

nav {
    background: #f8d7da;
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0px 4px 10px rgba(0,0,0,.12);
}

nav a {
    text-decoration: none;
    color: #7b5ea7;
    font-weight: bold;
    padding: 10px 18px;
    transition: .3s;
}

nav a:hover {
    background: #fff4b8;
    border-radius: 20px;
    color: #444;
}

/* ===========================
   Headings
=========================== */

h1 {
    text-align: center;
    background: linear-gradient(to right,
        #ffd6e8,
        #ffe3c8,
        #fff5ba,
        #d8efff,
        #e8ddff);

    color: #5f4b8b;
    padding: 25px;
    border-radius: 25px;
    font-size: 38px;
    box-shadow: 0px 6px 12px rgba(0,0,0,.15);
}

h2 {
    color: #7b5ea7;
    border-left: 10px solid #ffd6e8;
    padding-left: 12px;
}

h3 {
    color: #ff8fab;
}

p {
    font-size: 17px;
}

/* Highlighted text */

span {
    color: #ff6fa5;
    font-weight: bold;
}

strong {
    color: #7b5ea7;
}

/* ===========================
   Sections
=========================== */

section {
    background: white;
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 35px;
    box-shadow: 0px 5px 15px rgba(0,0,0,.12);
}

/* ===========================
   Lists
=========================== */

ul {
    list-style-type: 🌸;
    padding-left: 30px;
}

li {
    margin-bottom: 6px;
}

/* ===========================
   Links
=========================== */

a {
    color: #6b8cff;
}

a:hover {
    color: hotpink;
}

/* ===========================
   Tables
=========================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
}

/* Table title */

caption {
    font-size: 22px;
    color: #7b5ea7;
    font-weight: bold;
    padding: 12px;
}

/* Headings */

th {
    background: #d9ecff;
    color: #5f4b8b;
    padding: 15px;
    border: 2px solid white;
}

/* Data cells */

td {
    padding: 15px;
    text-align: center;
    border: 2px solid white;
}

/* Pastel striped rows */

tbody tr:nth-child(1) {
    background: #ffe3ec;
}

tbody tr:nth-child(2) {
    background: #fff1d6;
}

tbody tr:nth-child(3) {
    background: #fff9cc;
}

tbody tr:nth-child(4) {
    background: #e6f4ff;
}

tbody tr:nth-child(5) {
    background: #efe4ff;
}

/* Hover effect */

tbody tr:hover {
    background: #ffe5f4;
    transition: .3s;
}

/* Footer rows */

tfoot {
    background: #f6eaff;
    font-weight: bold;
}

/* ===========================
   Tic Tac Toe
=========================== */

.tic {
    width: 320px;
    margin: auto;
}

.tic td {
    width: 100px;
    height: 100px;
    font-size: 28px;
    font-weight: bold;
    border: 4px solid #cdb4db;
    background: #fff8fc;
}

.tic td:hover {
    background: #ffe4f3;
}

/* ===========================
   Forms
=========================== */

fieldset {
    border: 4px solid #ffd6e8;
    border-radius: 25px;
    background: #fffdfd;
    padding: 25px;
}

legend {
    font-size: 24px;
    color: #7b5ea7;
    font-weight: bold;
}

label {
    font-weight: bold;
    color: #6a5d7b;
}

/* Input boxes */

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=color],
input[type=range],
select,
textarea {

    width: 100%;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 2px solid #d9ecff;
    background: #fffdfd;
    box-sizing: border-box;
    font-size: 15px;
}

/* Radio & Checkboxes */

input[type=radio],
input[type=checkbox]{
    accent-color:#ff8fab;
}

/* Buttons */

input[type=submit],
input[type=reset]{

    background:#ffd6e8;
    color:#5f4b8b;
    border:none;
    padding:12px 24px;
    border-radius:20px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    margin-right:10px;
    transition:.3s;
}

input[type=submit]:hover{
    background:#d8efff;
}

input[type=reset]:hover{
    background:#fff5ba;
}

/* ===========================
   Horizontal Rule
=========================== */

hr{
    border:0;
    height:3px;
    background:linear-gradient(to right,
    #ffd6e8,
    #ffe3c8,
    #fff5ba,
    #d8efff,
    #e8ddff);
    margin:40px 0;
}

/* ===========================
   Footer
=========================== */

footer{
    text-align:center;
    background:#f6eaff;
    padding:20px;
    border-radius:20px;
    color:#6a5d7b;
    font-size:15px;
    box-shadow:0px 4px 10px rgba(0,0,0,.08);
}