/* INFORMATION!!! CSS IS NOT AI GENERATED, This is to ensure only principles and methods covered in class are used*/ 
/* By: Ethan Balon */
/* ebb0039@arastudent.ac.nz */
/* 23 June 2026 */




/* RESET */

/* Cancel out some differences between browser defaults */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
img,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
a,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
}

* {
    box-sizing: border-box;
}


/*Fix for form errors*/
form p {
    font-size: 0;
    color: transparent;
}

/* 2. Bring back the normal font size and color for your labels, inputs, and selectors */
form p label,
form p select,
form p input,
form p textarea,
form p ul,
form p span {
    font-size: 16px; /* Adjust to match your preferred text size */
    color: #000000;  /* Adjust to match your preferred text color */
}







/* LAYOUT */

/* The default layout (before any media queries take effect) is a single-column
   layout with the principal structural elements as blocks in normal flow. That
   is: the header, main, and aside are allowed to take their normal positions
   one after the other down the window. We don't need a grid or other layout CSS
   for this - it is default behaviour. */

header,
main,
aside,
footer, nav {
    padding: 1em;
}




/* TYPOGRAPHY */

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

h1,
h2 {
    font-weight: bold;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
}


p {
    margin-bottom: 1em;
}

footer {
    text-align: center;
}



/* COLOUR SCHEME */

header,
footer{
    background-color: #0B5E75;
    color: #fff;
}

main {
    background-color: white;
}

td, nav > ul > li > *, td > a, th {
    color: white;
}

.add_new_btn, .cancel_btn {
color: black;
}

nav, table {
    background-color: #0c343d;
}

nav a {
    color: #000000;
}

video {
    max-width: 100%;
    max-height: 100%;
}


.info_forms {
background-color: #0B5E75;
}

.info_forms > p > label{
color: white;
}


/* IMAGES */


img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


nav {
    width: 100%;
}

nav>ul {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
}


header>img {
    max-height: 4rem;
}



aside {
    background-color: #48531a;
    color: white;
}

.login-container > form > button {
width: 100%;
}



/* TABLE */


/*td {
    padding: 0.5em;
}*/

table, th, td {
text-align: left;
border: solid;
border-color: #0B5E75;
padding: 0.5em;
}



.hidden {
    display: none;
}



/*flex alignment*/
.login-container {
display:flex;
flex-direction: column;
align-items: center;
}

.login-container > form > p, .info_forms > p{
display:flex;
justify-content: space-between;
}

#id_referrer {
width: 50%;
}



/*padding */
.info_forms {
padding: 0.5em;
}



/* NAVIGATION */

nav ul {
    list-style-type: none;
}

nav a {
    text-decoration: none;
}



table {
    width: 100%;
    border-collapse: collapse;
}








@media screen and (min-width: 58em) {
    
    body {
        /* Create the grid with two central content columns and flexible (but equal)
        white space columns on either side. */
        display: grid;
        grid-template-columns: 1fr 56rem 1fr;
	 grid-template-areas:
		". wrapper ."
    }

    header {
	grid-area: header;
    }

	nav{
		grid-area: nav;
	}
    main {
        grid-area: main;
    }
 
    aside {
        grid-area: aside;
    }
    footer {
	grid-area: footer;
}

.wrapper {
grid-area: wrapper;
}

.user-controls {
grid-area: user-controls;
}

.info_forms {
width: 40%;
}

    
}