/* This centres the embedded video players */
video,iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* This is the set of instructions which appear before a link is clicked */
#initialinstructions {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* This is the div of AWS server details */
#serverdetails {
    text-align: left;
}

/* Space out the cards on the front page */
.maincard {
    margin: 1em;
}
/* Put space above the card images */
.card-img-top {
    margin-top: 1em;
}

/* Limit the height of the partner logos */
.partner-logos img {
    max-height: 100px;
    margin: 0.5em;
}

/* Give the lead text some space */
.lead {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 150%;
}

/* Make the navbar text a sensible colour and a bit bigger */
.nav-item a {
    color: white;
}

.nav-item a:hover {
    color:magenta;
}
.nav-item {
    color: white;
    padding-left: 1em;
    font-size: 120%;
}

/* Just has some clear space so nothing clashes with the navbar */
#navspace {
    margin-top: 120px;
}

/* We restrict the width and centre the exercise instructions otherwise they look odd */
div.exercise {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Put bigger gaps between the different sections of each course module */
#coursecontent h3 {
    margin-top: 2em;
}

/* Make all of the sections invisible to start with and we'll selectively turn them on later */
.sectioncontent {
    display: none;
}

/* Make the sections on the left look like links */
#sections h5 {
    color: white;
    cursor: pointer;
}

/* Put some spacing above the course logo */
.course-logo {
    padding-top:1em;
}

/* Make the divs line up properly */
.square {
    border-radius: 0;
    border: 0;
    margin-bottom: 2em
}

/* The styling for exercise questions and hints */
p.question {
    font-size: 120%;
}
span.hint {
    text-decoration-style: dotted;
    background-color:darkmagenta;
    padding-left: 0.2em;
    padding-right: 0.2em;
    font-weight: bold;
    color: white;
    border-radius: 2px;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    font-size: 80%;
}

p.hint {
    display: none;
    margin-left: 1em;
    background-color: #DDD  ;
    border-radius: 2px;
    padding: 0.5em;
}

p.question {
    margin-top: 3em;
}

/* Better spacing in the course layout */
h3.section {
    margin-top: 2em;
}

/* Space our values in ordered lists */
ol li {
    padding-bottom: 1em;
}

/* Nice formatting for titles in a test card style */
.testcard {
    background: url("/static/images/test_card.svg");
    background-size: 100% 100%;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 2em;
    padding-right: 2em;
    color: white;
    font-weight: bolder;
    font-family: 'Share Tech Mono', monospace;
    font-size:300%;
}

/* Nice background for the main navbar cards and footer */
nav {
    background: url("/static/images/sonic_background.png");
}
.maincard {
    background: url("/static/images/sonic_background.png");
}

footer {
    background: url("/static/images/sonic_background.png");
}


/* Redefine the default dark background colour to stop 
   everything being so grey */

.bg-dark {
    background-color: #00004e !important;
}

/* Make the reminder to log in to filter courses not take the whole width */
.small-alert {
    display: inline-block;
}

/* Make the course section titles a bit more obvious */
h2.sectionname {
    font-weight: bold;
    margin-top: 1em;
    font-size: 300%;
}
h3.section {
    font-family: 'Share Tech Mono', monospace;
    color: white;
    background-color: #00004e;
    padding: 0.4em;
    margin-bottom: 1em;
}

/* Force some space above the footer */
footer {
    margin-top: 2em;
}