/*
  Name: McGee Technology copyright 2018-2020
  Date: JUN 2020
  Description: Simple layout for Tech Blogging
  Version: 3.0
  Author: Andrew McGee
*/

/* Imports */
/* @import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700'; */
@import 'https://fonts.googleapis.com/css?family=Titillium Web:200,300,400,500,600';

/********
  Global
*********/

    p {
      font-family: Titillium Web;
      font-size: 20px;
      font-weight: 300;
    }

    .ui.header {
      font-family: Titillium Web !important;
      font-weight: 600 !important;
    }

    .hidden.menu {
      display: none;
    }

    .masthead.segment {
      min-height: 500px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      margin-top: 2em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }

    .ui.vertical.stripe {
      padding: 4em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }

    .ui.vertical.stripe .divider {
      margin: 3em 0em;
    }

    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }

    .footer.segment {
      padding: 5em 0em;
    }

    .secondary.pointing.menu .toc.item {
      display: none;
    }

    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }

    .codebox {
        /* Below are styles for the codebox (not the code itself) */
        border:1px solid black;
        background-color: azure;
        padding:10px;
    }
    .codebox code {
        /* Styles in here affect the text of the codebox */
        font-size:1em;
        /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
    }
/*******************************
  Add Custom Colours to Semantic
********************************/
     .ui.header.white {color: white;}
     .ui.header.smoke {color: whitesmoke;}
     .ui.header.lightgrey {color: lightgrey;}
     .ui.header.lightcyan {color: #9dbee3;}
     .ui.header.darkcyan {color: #29648A;}

     .ui.lightcyan.labels .label,
     .ui.lightcyan.label {
       background-color: #2E9CCA !important;
       border-color: #2E9CCA !important;
       color: #FFFFFF !important;
     }

     .ui.inverted.darkpurple.segment {
       background-color: #25274D !important;
       color: #FFFFFF !important;
     }

     .ui.header.darkpurple {
      color: #25274D !important;
    }

     .ui.inverted.dullpurple.segment {
       background-color: #464866 !important;
       color: #FFFFFF !important;
     }

     .ui.header.dullpurple {
      color: #464866 !important;
    }

    .ui.label.dullpurple {
      background-color: #464866 !important;
      color: #FFFFFF !important;
   }

   .ui.message.dullpurple {
    background-color: #464866 !important;
    color: #FFFFFF !important;
 }

 .ui.button.dullpurple {
     background-color: #464866 !important;
     color: #bebed7 !important;
   }

   .ui.button.lightcyan {
     background-color: #9dbee3 !important;
     color: #464866 !important;
   }

     .ui.inverted.smoke.segment {
       background-color: whitesmoke !important;
       color: #000000 !important;
     }

     .ui.inverted.lightgrey.segment {
       background-color: #bebed7 !important;
       color: #000000 !important;
     }

     .ui.lightslategrey.container {
       background-color: #5f819e !important;
       color: #000000 !important;
     }
