/* #region - notes */

    /* #region - CSS item order */
        /* display */
        /* positioning */
        /* size */
        /* padding, border, margin */
        /* z-index */
        /* colours */
        /* text */
    /* #endregion */

    /* #region - screen sizes */
        /* 320px — 480px: Mobile devices */
        /* 481px — 768px: iPads, Tablets */
        /* 769px — 1024px: Small screens, laptops */
        /* 1025px — 1200px: Desktops, large screens */
        /* 1201px and more — Extra large screens, TV */
    /* #endregion */

/* #endregion */


/* #region - remove borders/margins/padding */

    html {
        margin: 0;
        border: 0;
        padding: 0;}

    head {
        margin: 0;
        border: 0;
        padding: 0;}

    body {
        margin: 0;
        border: 0;
        padding: 0;}

    div {
        margin: 0;
        border: 0;
        padding: 0;}

    a {
        margin: 0;
        border: 0;
        padding: 0;}

    button {
        margin: 0;
        border: 0;
        padding: 0;}

    p {
        margin: 0;
        border: 0;
        padding: 0;}

    h1 {
        margin: 0;
        border: 0;
        padding: 0;}

    h2 {
        margin: 0;
        border: 0;
        padding: 0;}

    img {
        margin: 0;
        border: 0;
        padding: 0;}

    .container-fluid {
        margin: 0;
        border: 0;
        padding: 0;}

    .row {
        margin: 0;
        border: 0;
        padding: 0;}
    
    .col {
        margin: 0;
        border: 0;
        padding: 0;}

    .no-margin {
        margin: 0;}

    .no-border {
        border: 0;}

    .no-padding {
        padding: 0;}

/* #endregion */


/* #region - page-wide settings */

    body {
        font-family: 'Ubuntu', sans-serif;}

    a:link {
        text-decoration: none;}

/* #endregion */


/* #region - top menu */

    /* Menu bar fluid container */
    .menu-bar {
        position: sticky; /* Keep menu bar at top */
        top: 0;
        height: 75px;
        width: 100%;
        border-bottom: 1px solid lightgrey;
        z-index: 8;
        background-color: white;}

    /* menu-bar rows */
    .menu-row {
        height: inherit;
        z-index: 4;}

    /* Home icon colour setting */
    .home-icon {
        margin: 0 0 0 20px;
        color: black;}

     /* Make home icon 50% transparent */
    .home-icon:hover {
        opacity: 0.5;}

    /* Comment saying what button is if hovered for 1 sec */
    .tool-tip {
        position: absolute;
        top: 75%;
        left: 12.5px;
        padding: 0 2px 0 2px;
        border: 2px solid white;
        border-radius: 5px;
        opacity: 0.0;
        transition: opacity 500ms;
        z-index: 2;
        background-color: grey;
        color: white;}

    /* Text box appearing under home icon saying home */
    .home-icon:hover ~ .tool-tip{
        opacity: 0.5;}

    /* Sizing container for the menu icon and side menu */
    .menu-icon-div {
        margin: 0 26px 0 0;
        z-index: 2;}

    /* menu icon */
    .menu-icon {
        background-color: white;}

    /* Make menu icon 50% transparent */
    .menu-icon-div:hover > .menu-icon{
        opacity: 0.5;}

    /* Side menu */
    .side-menu {
        transition: right 500ms;
        position: fixed;
        top: 75px;
        right: -70vw;
        height: 100%;
        box-shadow: 0 0 20px 20px white;
        z-index: 16;
        background-color: white;}

    /* Move side menu into view */
    .menu-icon-div:hover > .side-menu {
        right: 0;
        opacity: 90%;}

    /* Side menu items */
    .side-menu-item {
        width: 100%;
        padding: 0 30px 0 30px;
        border: 0;
        margin:0;
        z-index: 16;
        color: black;
        font-size: 28px;}

    /* Highlight side menu items */
    .side-menu-item:hover {
        opacity: 0.8;
        background-color: black;
        color: white;}

    /* Top menu row for large screens */
    .sub-menu-row {
        display: none;}

/* #endregion */


/* #region - main body */

    /* #region - home */

        /* #region - triangles */

            /* Triangle */
            .triangle {
                position: relative;
                height: 0;
                width: 100%;
                padding: 0;
                border-top: 0vw;
                border-left: 50vw solid transparent;
                border-right: 50vw solid transparent;
                border-bottom: 5vw solid white;
                margin: 0;
                z-index: 2;}

            /* Upside down dark triangle */
            .triangle-down {
                position: absolute;
                border-top: 5vw solid white;
                border-bottom: 0vw;}

            /* Right half of triangle */
            .triangle-right {
                position: relative;}

            /* Left half of triangle */
            .triangle-left {
                position: relative;
                top: -5vw;
                right: 50vw;}

                /* #endregion */

                /* Moving self-portrait image underneath top triangle */
                .self-portrait-row {
                    top: -5vw;
                    bottom: 0}

                /* The introduction self portrait */
                .self-portrait {
                    width: 50vw;
                    margin-top: 30px;
                    z-index: 0;}

                /* Message underneath first image */
                .welcome-message {
                    padding: 0 0 10px 0;
                    font-size: 24px;
                    font-weight: 1000;
                    text-align: center;
                    font-style: italic;
                    color: 	#000080;}

                /* Introduction paragraph */
                .intro-text {
                    padding: 0 0 20px 0;
                    font-family: 'Ubuntu', sans-serif;
                    font-size: 23px;
                    font-weight: 500;
                    text-justify: inter-word;}

                /* Physics image */
                .physics-image {
                    width: 100%;
                    padding-bottom: 20px;}

            /* #endregion */

            /* #region - history */

                /* Timeline bar */
                .bar {
                    top: 0;
                    left: 0;
                    width: 100%;}

                .bar:after {
                    width: 10px;
                    background-color: darkblue;}

                /* Timeline event */
                .event {
                    position: relative;
                    left: 20px;
                    border: 1px solid black;}
            /* #endregion */

            /* #region - projects */
            
                /* project section title rows */
                .title-row {
                    padding: 30px 0 10px 0;}

                /* project section titles */
                .title {
                    padding: 0 20px 0 20px;}

                /* euler image container*/
                .project-image-div {
                    margin: 0 20px 0 20px;}

                /* euler image */
                .project-image {
                    height: auto;
                    width: 160px;}

            /* #endregion */

            /* #region - Bucket-list */
            
            .side-col {
                width: 20%}

            /* #endregion */

        /* #endregion */


    /* #region - Mobile screen <481px*/
    @media only screen and (max-width: 480px) {

        /* Menu underneath title instead of side menu */
        .sub-top-menu {
            display:none;}

    }
    /* #endregion */


    /* #region - Tablet screen 481px<768px*/
    @media only screen and (min-width: 481px) {

        /* #region - top menu */

            /* Menu bar fluid container */
            .menu-bar {
                height: 100px;}

            /* Side menu */
            .side-menu {
                top: 100px;}
        
        /* #endregion */

    }
    /* #endregion */


    /* #region - Laptop screen 769px<1024px */
    @media only screen and (min-width: 769px) {

        /* #region - top menu */

            /* menu icon */
            .menu-icon {
                display: none;}

            /* Menu underneath title instead of side menu */
            .sub-top-menu {
                margin: 10px;
                font-size: 24px;
            }

            .self-portrait {
                width: 50vw;}

        /* #endregion */

        /* #region - home */

            .triangle {
                display: none;}

        /* #endregion */

    /* #endregion */


    /* #region - Spare code */

    /* Static background image */       
    .background-image {
        background-image: url("../images/night-sky.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;}

    /* #endregion */