/* ========================================= */
    /* File Name: styles.css                     */
    /* Project: Phillip Deeley Website           */
    /* Author: Phillip Deeley                    */
    /* Created: 19/04/2026                       */
    /* Last Edited: 19/04/2026                   */
    /* Version: 1.0                              */
    /* Notes: Main stylesheet for website        */
    /* ========================================= */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        font-family: Arial, sans-serif;
        background-color: rgb(44, 44, 44);
        padding-top: 80px;
    }

    header {
        background-color: #333;
        color: white;
        padding: 20px 40px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }    

    header a {
        color: white;
        text-decoration: none;
        transition-duration: 0.1s;
    }

    header a:hover {
        color: #949494;
    }

    header h1 {
        font-size: 30px;
    }

    header #profilephoto {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 20px;
        margin-top: 51px;
        float: right;
        transition-duration : 0.4s;
    }

    header #profilephoto:hover {
        filter: brightness(60%);
        rotate: 360deg;
    }
            
    main {
        flex: 1;
        padding: 40px;
    }

    #introduction {
        color: white;
        font-size: 20px;
        padding: 40px;
    }

    #introduction a {
        color: white;
    }

    #socialboxes {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    .social {
        background-color: #949494;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0.2);
        width: 350px;
        height: 350px;
        text-align: center;
    }

    .social a {
        display: inline-block;
        margin: 10px;
        padding: 10px 20px;
        background-color: #333;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition-duration: 0.1s;
        align-items: center;
    }

    .social a:hover {
        background-color: #555;
    }

    .social h2 {
        margin: 0px;
        font-size: 30px;
    }

    .social h3 {
        color: rgb(255, 255, 255);
        font-size: 20px;
        padding-bottom: 30px;
        padding-top: 20px;
    }

    .social img {
        width: 40px;
        height: 40px;
    }

    .social-title {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .social-title h1 {
        margin: 0;
        line-height: 1;
    }

    .social-title img {
        display: block;
        width: 40px;
        height: 40px;
    }

    #circular {
        border-radius: 25%;
    }
            
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }