/*

filename: [styles.css]

author: [all members]

created: [13/04/2026]

last modified: [20/04/2026]

description: [links to all html files in the project]

*/

/* styling for screen widths of a max of 4000px - large screen */
@media screen and (max-width: 250em) {

/* central styling */

/* styling for all content, specifies font family */
html {font-family: Arial, Helvetica, sans-serif;}

/* styling for the central header */
header {
    border: 5px solid black;
    border-radius: 40px;
    margin: 0.5em;
    margin-top: 1em;
    padding: 1em;
    background-color: #44c4ff;
    text-align: center;
    text-decoration-color: white;
    padding-bottom: 2.5em;
}

/* styling for all h1 tags */
h1 {
    font-size: 2.6em;
}

/* styling for all body tags, sets background colour */
body {background-color: lightblue;}

/* styling for the logo */
.logo {
    width: 15%;
    height: 15%;
}

/* styling for the buttons in the navigation bar */
nav a {
    border: 4px transparent;
    padding: 0.6em;
    background-color: lightblue;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    color: black;
    font-weight: bold;
    width: 10em;
    transition: 0.2s;
}

/* styling for the home button in the navigation bar */
nav a#home {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
/* styling for the about us button in the navigation bar */
nav a#about_us {
    border-right: 0.25em solid black;
    border-left: 0.25em solid black;
}
/* styling for the jobs button in the navigation bar */
nav a#jobs {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* styling for the central navigation bar */
nav {
    display: flex;
    justify-content: center;
    border: 4px solid black;
    border-radius: 25px;
    width: 25em;
    margin: auto;
}

/* styling for when hovering over the buttons in the navigation bar */
nav a:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

/* end central styling */



/* apply page specific styling for  */

/* styling for the whole form element in apply.html */
form {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 5px solid black;
    border-radius: 25px;
    width: 70%;
    margin: auto;
    background-color: #44c4ff;
    padding-bottom: 1.25em;
}

/* styling for the form title */
#form_title {
    padding: 0.2em;
    font-size: 2.75em;
    font-weight: bold;
}

/* styling for the legend elements */
legend {
    font-weight: bold;
    font-size: 1.6em;
    border: 0.2em solid black;
    border-radius: 20px;
    padding: 0.1em;
    padding-left: 0.4em;
    padding-right: 0.4em;

}

/* styling for the fieldset elements and reference number box */
fieldset, #reference_number_box {
    border: 5px solid black;
    border-radius: 25px;
    margin: 0.5em;
    text-align: center;
    width: 80%;
    background-color: #44c4ff;
    padding: 0em;
}

/* more styling for the reference number box */
#reference_number_box {
    padding-top: 1.25em;
    padding-bottom: 1.5em;
}

/* styling for gender sub fieldset and skill list sub fieldset */
#gender_sub_fieldset, #skill_list_sub_fieldset {
    margin: auto;
    padding: 0.9375em;
    margin-bottom: 2.5em;
    width: 60%;
    padding-bottom: 2.4em;
}

/* more styling for gender sub fieldset */
#gender_sub_fieldset {
    width: 0%;
    padding-top: 0.25em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
}

/* styling for the input, textarea, and select elements */
input, textarea, select {
    background-color: lightblue;
    border: 4px solid black;
    padding: 0.3125em;
    border-radius: 10px;
    padding: 0.3125;
    padding-left: 0.625em;
    padding-right: 0.625em;
    font-size: 1.3em;
    transition: 0.2s;
}

/* more styling for the textarea element */
textarea {
    width: 25em;
    height: 10em;
}

/* styling for input, textarea, and select when they are selected (focused on) */
input:focus, textarea:focus, select:focus {
    background-color: #8ac5d8;
    transition: 0.2s;
}

/* styling for the input label class */
.input_label {
    font-size: 1.3em;
    font-weight: bold;
}

/* styling for the radio (gender) and checkbox (skill list) classes (their individual input buttons) */
.radio, .checkbox {
    background-color: lightblue;
    border: 4px solid black;
    border-radius: 10px;
    padding-left: 0.3125em;
    padding-right: 0.3125em;
    display: inline-block;
    width: 70%;
    margin: auto;
    text-align: left;
    margin-top: 0.625em;
    padding-bottom: 0.625em;
    padding-top: 0.3125em;
    font-size: 1.1em;
    padding-left: 1em;
}

/* more styling for the radio class */
.radio {width: 10em;}

/* styling for the radio and checkbox type */
[type = "radio"], [type = "checkbox"] {
    width: 0.9em;
    height: 0.9em;
}

/* styling for the submit button and the reset button when they are hovered over */
[type = "submit"]:hover, [type = "reset"]:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

/* styling for the input field class and the textarea element */
.input_field, textarea {margin-top: 0.625em;}

/* end apply page specific styling */



/* jobs page specific styling */

#listing1 {
    border: 0.3em solid black;
    border-radius: 2em;
    width: 70%;
    text-align: left;
    font-size: 1.25em;
    margin-left: auto;
    margin-right: auto;
}

#listing2 {
    border: 0.3em solid black;
    background-color: #44c4ff;
    border-radius: 2em;
    width: 70%;
    text-align: left;
    font-size: 1.25em;
    margin-left: auto;
    margin-right: auto;
}

#listing3 {
    border: 0.3em solid black;
    background-color: #44c4ff;
    border-radius: 2em;
    width: 70%;
    text-align: left;
    font-size: 1.25em;
    margin-left: auto;
    margin-right: auto;
}

#jobAside {
    border: 0.3em solid black;
    border-radius: 2em;
    width: 25%;
    padding: 1em;
    margin: 1em;
    text-align: center;
}

#information {
    border: 0.3em solid black;
    border-radius: 2em;
    width: 25%;
    padding: 1em;
    margin: 1em;
    margin-top: 1.5em;
    text-align: center;
}

#h2Job3 {
    text-align: center;
}

#h2Job2 {
    text-align: center;
}

#h2Job1 {
    text-align: center;
}

#joblistings1 th {
    padding: 1em;
}

#joblistings2 th {
    padding: 1em;
}

#joblistings3 th {
    padding: 1em;
}

#applylink a:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

#applylink {
    border: 4px solid black;
    border-radius: 1em;
    text-align: center;
    font-size: 1.4em;
    color: black;
    font-weight: bold;
    width: 10em;
    display: flex;
    align-items: center;
    margin: auto;
    margin-bottom: 1.5em;
    height: 2.8em;

}

#applylink a {
    border: 4px transparent;
    border-radius: 0.8em;
    text-decoration: none;
    color: black;
    background-color: lightblue;
    padding-left: 2.25em;
    padding-right: 2.25em;
    padding-bottom: 0.825em;
    padding-top: 0.825em;
    transition: 0.2s;
}

#interested {
   font-size: 1.4em;
   text-align: center;
}

/* end jobs page specific styling */



/* index page specific styling */

/*boarder outline for table*/
.table {
    border: 0.0625em solid;
    border-collapse: collapse;
    padding: 0.625em;
}

/*Positioning for main paragraph*/
.MainText{
    float:right;
    width: 57%;
}

/*table positioning*/
.table, aside{
    margin-left: auto;
    margin-right: auto;    
}
/* end index page specific styling */



/* about page specific styling */

.student_id {
    color: darkblue;
    text-shadow: 1px 1px 10px darkblue;
}

figure {
    border: 5px solid black;
    width: 30%;
    float: right;
}

tr.fun_facts_table_toprow {
    color: darkblue;
    text-shadow: 1px 1px 10px #00008b;
}

th.fun_facts_table_toprow {
    padding: 0.5em;
    background-color: lightblue;
    transition: 0.2s;
}

th.fun_facts_table_names {
    color: #0000ff;
    text-shadow: 1px 1px 10px #0000ff;
    padding: 0.5em;
    background-color: lightblue;
    transition: 0.2s;
}

td.fun_facts_table_names {
    color: black;
    text-shadow: 1px 1px 10px black;
    padding: 0.5em;
    background-color: lightblue;
    transition: 0.2s
}

th.fun_facts_table_toprow:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

td.fun_facts_table_names:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

th.fun_facts_table_names:hover {
    background-color: #8ac5d8;
    transition: 0.2s;
}

table#fun_facts_table {
    font-size:  1.25em;
}

/* end about page specific styling */

}



/* styling for screen widths of a max of 2000px - medium screen */
@media screen and (max-width: 125em) {

/* central styling for medium screen */

h1 {font-size: 2.2em;}

nav a {font-size: 1.2em;}

nav {width: 23em;}

/* styling for the logo */
.logo {
    width: 20%;
    height: 20%;
}

/* end central styling for medium screen */



/* apply page specific styling for medium screen */



/* styling for the form title for medium screen */
#form_title {
    font-size: 2.55em;
}

/* styling for the legend elements for medium screen */
legend {
    font-weight: bold;
    font-size: 1.4em;
}

/* more styling for gender sub fieldset for medium screen */
#gender_sub_fieldset {
    font-size: 0.9em;
}

/* styling for the input, textarea, and select elements for medium screen */
input, textarea, select {
    font-size: 1.1em;
}

/* styling for the input label class for medium screen */
.input_label {
    font-size: 1.2em;
}

/* styling for the radio (gender) and checkbox (skill list) classes (their individual input buttons) for medium screen */
.radio, .checkbox {
    font-size: 1.05em;
}

/* more styling for the textarea element for medium screen */
textarea {
    width: 23em;
    height: 8em;
}

/* end apply page specific styling for medium screen */



/* index page specific styling for medium screen */

.table {
    border: 0.0625em solid;
    border-collapse: collapse;
    padding: 0.625em;
}

.MainText{
    float:right;
    width: 57%;
}

.table, aside{
    margin-left: auto;
    margin-right: auto;    
}

/* end index page specific styling for medium screen */



/* jobs page specific styling for medium screen */

#applylink {
    font-size: 1.2em;
}

#listing1 {
    border-radius: 1.8em;
    font-size: 1em;
    width: 80%;
}

#listing2 {
    border-radius: 1.8em;
    font-size: 1em;
    width: 80%;
}

#listing3 {
    border-radius: 1.8em;
    font-size: 1em;
    width: 80%;
}

#interested {
   font-size: 1.2em; 
}

/* end jobs page specific styling for medium screen */



/* about page specific styling for medium screen */

table#fun_facts_table {
    font-size:  1em;
}

/* end about page specific styling for medium screen */

}



/* styling for screen widths of a max of 800px - small screen */
@media screen and (max-width: 50em) {

/* central styling for small screen */

h1 {font-size: 1.8em;}

nav a {font-size: 1em;}

nav {width: 19em;}

/* styling for the logo */
.logo {
    width: 30%;
    height: 30%;
}

/* end central styling for small screen */



/* apply page specific styling for small screen */

/* styling for the form title for small screen */
#form_title {font-size: 2.35em;}

/* styling for the legend elements for small screen */
legend {
    font-weight: bold;
    font-size: 1.2em;
}

/* more styling for gender sub fieldset for small screen */
#gender_sub_fieldset {font-size: 0.9em;}

/* styling for the input, textarea, and select elements for small screen */
input, textarea, select {font-size: 0.9em;}

/* styling for the input label class for small screen */
.input_label {font-size: 1em;}

/* styling for the radio (gender) and checkbox (skill list) classes (their individual input buttons) for small screen */
.radio, .checkbox {font-size: 0.9em;}

/* more styling for the textarea element for small screen */
textarea {
    width: 15em;
    height: 6em;
}

/* end apply page specific styling for small screen */



/* index page specific styling for small screen */
.table {
    border: 0.0625em solid;
    border-collapse: collapse;
    padding: 0.625em;
}

.MainText{
    float:right;
    width: 57%;
}

.table, aside{
    margin-left: auto;
    margin-right: auto;    
}

/* end index page specific styling for small screen */



/* job page specific styling for small screen */

#applylink {
    font-size: 1em;
}

#listing1 {
    border-radius: 1.6em;
    font-size: 0.8em;
    margin-left: 0.6em;
    margin-right: 0.5em;
    width: 95%;
}

#listing2 {
    border-radius: 1.6em;
    font-size: 0.8em;
    margin-left: 0.6em;
    margin-right: 0.5em;
    width: 95%;
}

#listing3 {
    border-radius: 1.6em;
    font-size: 0.8em;
    margin-left: 0.6em;
    margin-right: 0.5em;
    width: 95%;
}

#jobAside {
    border-radius: 1.6em;
    font-size: 0.7em;
    width: 40%;
    height: 4.5em;
}

#information {
    border-radius: 1.6em;
    font-size: 0.7em;
    width: 40%;
    height: 3.5em;
    margin-top: 2.25em;
}

#interested {
   font-size: 1em;
}

/* end jobs page specific styling for small screen */



/* about page specific styling for small screen */

table#fun_facts_table {
    font-size:  0.75em;
}

/* end about page specific styling for small screen */

}