//Material Icons
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(../fonts/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(../fonts/iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(../fonts/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}


*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #f5f5f5 !important;
}

h2{
    color: #FF7043!important;
}

h3{
    font-weight: bolder !important;
}

hr{
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

a{
    color: #111111 !important;
    &:hover{
        color: #FF7043 !important;
        text-decoration: none !important;
    }
}

ul{
    li{
        text-decoration: none;
        list-style-type: none;
        &:hover{
            :before{
                content: 'keyboard_arrow_right';
                font-family: 'Material Icons';
                position: absolute;
                margin-left: -20px;
                font-size: 1.6em;
                font-weight: bolder;
                margin-top: -6px;
            }
            a{
                color: #FF7043 !important;
            }
        }
    }
}

header {
    height: 80px;
    margin: 20px auto;
    .logo{
        height: inherit;
        display: flex;
        align-items: center;
        a{
            display: contents;
            img{
                height: 60%;
            }
            span{
                font-size: 4em;
                font-weight: 400;
                margin-left: 8px;
                margin-top: -4px;
                color: #000000;
            }
        }
    }
    .search {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        padding-right: 0;
        input {
            width: 80%;
            height: 50%;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            box-shadow: 5px 6px 10px #cccccc;
        }
        i {
            font-size: 50px;
            color: #000000;
            margin-right: 20px;
        }
    }
}

.content {
    min-height: calc(~"100vh - 150px");
    padding: 0 0 50px 0;
    display: flex;
    .websites{
        flex-grow: 5;
        background: #ffffff;
        padding: 20px 15px;
        border: 1px solid #ddd;
        box-shadow: 5px 6px 10px #cccccc;
    }
    .shortcuts{
        flex-grow: 1;
        margin-left: 50px;
        padding: 0;
        .sc-object{
            background: #ffffff;
            padding: 20px 15px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            box-shadow: 5px 6px 10px #cccccc;
        }
    }
    @media (max-width: 992px){
        flex-direction: column-reverse;
        .shortcuts{
            display: flex;
            margin: 0;
            .sc-object{
                flex-grow: 1;
                flex: 1 1;
            }
        }
    }
}