/* We call them style declaration, consisting of 선택자(Selector), 속성(Property), and 값(Value). It's not a function. */
/* "#" for Id, "." for class. */

    body { /* Overall webpage setting */
        font-family: Arial, sans-serif; /* Font. Multiple list will be considered as "OR" */
        margin: 1; /* Number of spaces between the edges */
        padding: 1; /* Number of spaces inside the edges */
        background-color: #ffffff; /* Total background color */
        color: black; /* Total text color */
    }

    #titlep1Id {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateX(-50%);
        /* Transforms half of its size leftwards. */
        font-family: 'Noto Sans', sans-serif;
        font-size: 20pt;
        color: yellowgreen;
        opacity: 0;
    }

    #titlep2Id {
        position: absolute;
        top: 54%;
        left: 7%;
        transform: translateX(-50%);
        /* Transforms half of its size leftwards. */
        font-family: 'Noto Sans', sans-serif;
        font-size: 16pt;
        color: yellowgreen;
        opacity: 0;
    }

    #titlepageId {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Transforms half of its size leftwards. */
        font-family: 'Segoe UI', sans-serif;
        font-size: 50pt;
        color: white;
        opacity: 0;
    }

    .titlepage {
        font-family: 'Segoe UI', sans-serif;
        font-size: 40pt;
        color: white;
    }

    #titleButtonId {
        position: absolute;
        top: 350pt;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Segoe UI', sans-serif;
        font-size: 20pt;
        color: #0dd8dc;
        opacity: 0;

        background-color: rgba(13, 216, 220, 0.15);
        border: 2px solid #0dd8dc;
        border-radius: 8px;
        padding: 12px 36px;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    #titleButtonId:hover {
        background-color: #0dd8dc;
        color: #001f23;
    }

    /* '@media' supports various style making depends on the device (PC, mobile). */
    /* 'max-width: 600px' usually indicates mobile devides. 768px is for tablets. 1920px is for laptops. */
    @media (max-width: 600px) {
        .titlepage {
            top: 15%;
            font-size: 30px;
        }

        #titlep1Id {
            top: 45%;
            left: 10%;
            font-size: 16px;
        }
    
        #titlep2Id {
            top: 48%;
            left: 10%;
            font-size: 13px;
        }
    
        #titlepageId {
            font-size: 36px;
        }
    
        #titleButtonId {
            top: 350pt;
            font-size: 16px;
            padding: 10px 24px;
        }
    }

    h1, h2, h3 { /* Title tags */
        border: 0px black;
        text-align: center;
        color: white;
        font-family: 'Helvetica', 'Arial', sans-serif;
    }

    nav { /* Bacground color, margins */
        width: 100%;
        display: flex;
        background-color: #3498db;
        padding: 0.5rem 1rem;
        box-sizing: border-box;
    }

    nav ul { /* To a list inside a nav: Arranging, listing, removing dot, etc.. */
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 0;
        padding: 0;
    }

    nav a { /* When clicking a link inside nav: Text color, Removing underline, Bold text, etc.. */
        border-collapse: collapse; /* 테이블 셀들의 테두리를 겹쳐서 하나로 보이게 함. (<-> separate) */
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    nav a:hover { /* When a curser points to a hyperlink inside a nav: show underline */
        text-decoration: underline;
    }

    .top {
        background-color: #100659;
        padding: 20px;
        border-radius: 0px;
    }

    .firstHorizon {
        background: linear-gradient(to bottom, #100659, #5e8bd9);
        padding: 40px;
        color: #333; /* Color for texts, not background */
    }

    table { /* Overall table setting */
        width: 80%;
        margin: 1rem auto;
        border-collapse: collapse;
        background-color: white;
    }

    th, td { /* For all cells of a table: 테두리, padding, align, etc.. */
        border: 1px solid #ccc;
        padding: 0.5rem;
        text-align: center;
    }

    th { /* For all header cells: bg color */
        background-color: #f0f0f0;
    }

    form { /* Overall form settings */
        background-color: white;
        padding: 1rem;
        margin: 1rem auto;
        width: 80%;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    label { /* For all labels inside the form: block properties, margin, etc.. */
        display: block;
        margin-top: 0.5rem;
    }

    input[type="text"], textarea, select { /* Form input elements */
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.2rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    button { /* Overall button settings */
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        background-color: #27ae60;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover { /* When cursor points to a button */
        background-color: #219150;
    }

    footer { /* Overall page footer */
        background-color: #2c3e50;
        color: white;
        padding: 1rem;
        text-align: center;
        margin-top: 2rem;
    }

    footer a { /* For a link inside a footer*/
        color: #1abc9c;
        text-decoration: none;
    }

    footer a:hover { /* When a cursor points to a link inside a footer */
        text-decoration: underline;
    }

    /* Custom function: find any "class" of a 'div' in html file and name them after a dot. */
    .titlep1 {
        display: inline-block;
        white-space: nowrap;
        font-family: 'Segoe UI', sans-serif;
        color: yellow;
    }
    .titlep2 {
        display: inline-block; /* Keep them in a feasible? size */
        white-space: nowrap; /* Fix the box to prevent newline */
        font-family: 'Segoe UI', sans-serif;
        color: yellow;
        /* animation: move; */
        /* animation name(Necessary) - duration(Necessary) - timing function - delay - iteration count - direction - fill mode - play state 
        timing function: ex> ease in,out | linear | elastic in,out ...
        fill mode: state after the animation: ex> none, forwards, backwords, ...

        **We have to make our custom animation name, via tag '@keyframes ...'. See below for example. */
    }

    /* @keyframes move {
        /* Move duration scale of 0-100% (0% for start, 100% for end) 
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        } 
    } */