/* #region - notes */

    /* #region - CSS item order */
        /* display */
        /* positioning */
        /* size */
        /* padding, border, margin */
        /* transform */
        /* 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 - page wide */

    /* Setting main body theme */
    body {
        background-color: grey;}

    /* Making top container the viewport size */
    .container-fluid {
        height: 100vh;
        width: 100vw;
        overflow: hidden;}

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

        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;}

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

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

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

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

    /* #endregion */

/* #endregion */


/* #region - main body */

    /* top black and yellow tape */
    .tape-top {
        position: relative;
        top: 0;
        left: -10vw;
        height: 5vh;
        width: 120vw;
        background-color: black;}

    /* bottom black and yellow tape */
    .tape-bottom{
        position: relative;
        left: -10vw;
        height: 5vh;
        width: 120vw;
        background-color: black;}

    /* Row containing the under construction sign */
    .under-construction-row {
        height: 75vh;
        margin-top: 15vh;
        overflow-y: hidden;}

    /* Image of the under construction sign */
    .under-construction-img {
        height: 85vw;
        width: 85vw;
        padding: 0;}

    /* Black parallelograms on tape */
    .parallelogram {
        max-width: 9vw;
        overflow-x: hidden;
        transform: skew(-45deg);
        background-color: yellow;}
    
    /* row for home button */
    .home-button-row {
        min-height: 5vh;
        margin-top: 2vh;}

    /* home button */
    .home-button {
        padding: 5px;
        border-radius: 20px;
        background-color: blue;}
        
    /* home button */
    .home-button-link {
        color: white;
        font-size: 4vw;
        text-decoration: none;
        font-weight: 500;}
    
    /* #region - sign */
        .sign-back {
            display: inline-block;
            position: absolute;
            height: 75vw;
            width: 75vw;
            padding: 0;
            border: 0;
            border-radius: 20%;
            margin: 0;
            transform: rotate(45deg);
            transform-origin: 50%, 50%;
            background-color: black;}

        .sign-front {
            display: inline-block;
            position: relative;
            height: 60vw;
            width: 60vw;
            padding: 0;
            border: 0;
            border-radius: 20%;
            margin: 0;
            background-color: yellow;}
    /* #endregion */

/* #endregion */


@media (min-aspect-ratio: 500/700) {
    .under-construction-row {
        height: 85vh;
        margin-top: 5vh;
        overflow-y: hidden;}

    .under-construction-img {
        height: 70vh;
        width: 70vh;}
    
    .home-button-link {
        font-size: 4vh;}
    }