// Basic Styling

body {

overflow-y: scroll;
overflow-x: hidden;
font-family: $base-font-family;
font-size: $base-font-size;
color: #000;
background-color: $background-color;
-webkit-text-size-adjust: 100%;

}

.updates {

margin-bottom: 15px;
overflow-y: auto;
border: 0.5px solid grey;
border-radius: 5px;

}

// Images

img {

max-width: 100%;
vertical-align: middle;

}

// Lists

ul, ol {

list-style-type: none;

}

li {

> ul,
> ol {
  margin-bottom: 0;
}

}

// Blockquotes

blockquote {

color: $grey-color;
border-left: 4px solid $grey-color-light;
padding-left: $spacing-unit / 2;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;

> :last-child {
  margin-bottom: 0;
}

}

/**

* Code formatting
*/
pre,
code {
  font-size: $base-font-size;
  background-color: $code-background-color;
}

code {
  margin: 0em;
}

pre { 
  margin: 0em;
  padding : 1em;
  overflow-x: auto;

  > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

.highlight {
 border: 0px solid $grey-color-light;
 border-radius: .25em;

}
.highlighter-rouge {
  margin-bottom: 1em;

}

// Clearfix

%clearfix {

&:after {
  content: "";
  display: table;
  clear: both;
}

}

// Icons

.icon {

> svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;

  path {
    fill: $grey-color;
  }
}

}

.my-name {

font-family: $title-font-family;
text-align: center;
font-size: 30px;

}

// Style the Image Used to Trigger the Modal

myImg {

border-radius: 5px;
cursor: pointer;
transition: 0.3s;
z-index: 9999;

}

myImg:hover {

opacity: 0.7;

}

// The Modal (background)

.modal {

display: none;
// Hidden by default

position: fixed;
// Stay in place

z-index: 1;
// Sit on top

padding-top: 100px;
// Location of the box

left: 0;
top: 0;
width: 100%;
// Full width

height: 100%;
// Full height

overflow: auto;
// Enable scroll if needed

background-color: rgb(0, 0, 0);
// Fallback color

background-color: rgba(0, 0, 0, 0.9);
// Black w/ opacity

z-index: 9999;

}

// Modal Content (Image)

.modal-content {

margin: auto;
display: block;
width: 80%;
max-width: 700px;
z-index: 9999;

}

// Caption of Modal Image (Image Text) - Same Width as the Image

caption {

margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
z-index: 9999;

}

// Add Animation - Zoom in the Modal

.modal-content, caption {

animation-name: zoom;
animation-duration: 0.6s;
z-index: 9999;

}

@keyframes zoom {

from {
  transform: scale(0);
}

to {
  transform: scale(1);
}

}

// The Close Button

.close {

position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
z-index: 9999;

}

.close:hover, .close:focus {

color: #bbb;
text-decoration: none;
cursor: pointer;
z-index: 9999;

}

// 100% Image Width on Smaller Screens

@media only screen and (max-width: 700px) {

.modal-content {
  width: 100%;
}

}