/*  This style is designed to adapt to the limitations of the NetSurf 
    web browser to better serve the RISC OS platform. */

/* hide from any particularly ancient browers (pre-HTML 3.2 */
/*<!-- NO CSS */

/*  Rules below are for NetSurf, but will be overridden via feature query
    for other browsers at the bottom.*/

* {
    font-family: georgia;
}

h1 {
    /* Align icon and text within main header */
    display: flex;
    align-items: center;
}

h2 {
    text-align: center;
}

body {
	background-image: url('altbg');
	background-repeat: repeat;
}

#topbox {
    /* Border radius not supported in NetSurf but should be harmless */
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    margin-top: 0px;
    position: relative;
    min-width: 600px;
}

nav {
    position: absolute;
    top: 5px;
    right: 5px;
}

#bottombox {
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    margin-bottom: 0%;
    box-shadow: 6px 0px gray;
}

.tile {
    /* Style for visible "tiles" in layout */
    padding: 10px;
    margin: 10px;
}

#projs {
    display: flex;
    flex-wrap: wrap;
}

.proj {
    width: 45%;
    flex: 1 1 auto;
}

.sshot {
	width: 100%;
	height: 100%;
	max-width: 750px;
	border: 5px solid black;
}

/* The above will all work in NetSurf, but if a more compliant browser is
   available, this will override some of it with a justified, colorful
   drop-shadow scheme with a more modern look. */
@supports (justify-content: space-between) {
    body {
        background-image: none;
    }

    #projs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .proj {
        width: 45%;
        flex: auto; /* proj tiles fill projs div */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: green;
        max-width: 900px;
    }

    .sshot {
        border: none;
        max-width: 100%;
    }

    .tile {
        /* Style for visible "tiles" in layout */
        background-color: green;
        color: white;
        box-shadow: 6px 6px gray;
        border-radius: 15px;
        padding: 10px;
        margin: 10px;
    }

    a {
        /* General link style */
        color: lightyellow;
        font-weight: bold;
    }
}

/* inline-flex doesn't work in NetSurf, but it does just fine without it 
   for some reason while Firefox doesn't. */
@supports (display: inline-flex) {
    .download a {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        padding-right: 10px;
    }
}