/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * This CSS file is loaded by the base.html which is a parant file.    *
 * Therefore the styles apply to all the html files.                   *
 *                                                                     *
 *                                                                     *
 * Font types:  https://www.w3schools.com/css/css_font.asp             *
 * Font colors: https://htmlcolorcodes.com/color-names                 *
 *              https://www.w3schools.com/colors/colors_picker.asp     *
 * Font sizes:  https://www.w3schools.com/cssref/pr_font_font-size.asp *
 *              https://www.w3schools.com/cssref/css_units.asp         *
 *                                                                     *
 *                                                                     *
 * Author: Jonas Groenkjaer Pedersen                                   *
 * Date:   March 2021                                                  *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */




/* Styles for header 1 */
h1 {
  font-family: "Times New Roman", "Georgia"; /* Prioritized order of fonts */
  font-size:   2em; 
}




/* Styles for paragraphs */
p {
  font-family: "Times New Roman", "Georgia";
  font-size:   1em;
  color:       DarkSlateGray;
}




/* For the entire page */
body {
  background:  #FAFFFF;
}



/* You can change the CSS style for an element with a specific ID.
 * The example below changes the style of the element with the id "myid" 
 * #myid {
 *    color:white;
 * }
 */



/* Creates subclass */
.content {
  margin-top:  3em;
  margin-left: 3em;
}
  



/* Color of links 
 * "link" and "visited" must be before "hover" and "active". "active" must be last.
 * In html a link is created like this: <a href="some_url"> This is a link </a>  
 */
a:link{   color: CornflowerBlue; }    /* Unvisited link*/
a:visited{color: MediumSlateBlue;}    /* Visited link */
a:hover{  color: DeepSkyBlue;}        /* When hovering over link */
a:active{ color: DeepSkyBlue;}        /* When pressing link */




/* Combines CSS properties to display links as buttons
 * This is only showed on the webpage if the link is assigned to the class "linkbutton" 
 * For instance:
 * <a class="linkbutton" href="some_url"> This is a link </a>
 */
a.linkbutton:link, a.linkbutton:visited {
    color: RoyalBlue;             /* Text color */
    background-color: Gainsboro;  /* Background color */
    text-decoration: none;        /* Removes underline of text */
    padding-top:    14px;         /* Padding generates space around */ 
    padding-bottom: 14px;         /*    an element's content. If a  */
    padding-right:  25px;         /*    background color is added   */
    padding-left:   25px;         /*    it look like a button.      */
    display: inline-block;        /* Prevents enter shift but adds space around the content (the button) */
}

a.linkbutton:hover, a.linkbutton:active {
  background-color: DarkGray;
}






/**/