body,div,span,iframe,h1,h2,h3,h4,h5,table,colgroup,col,th,tr,td,img,a,p,input,button,textarea {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: RubikDoodleShadow;
    src: url('../fonts/RubikDoodleShadow-Regular.ttf');
}

@font-face {
    font-family: OpenSans;
    src: url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
    font-family: OpenSans;
    font-weight: bold;
    src: url('../fonts/OpenSans-Bold.ttf');
}

@font-face {
    font-family: OpenSans;
    font-style: italic;
    src: url('../fonts/OpenSans-Italic.ttf');
}

body {
    min-width: 340px;
    font-family: OpenSans, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    /*background-color: rgb(66, 141, 189);*/
    font-size: 14px;
    background-color: rgb(8, 6, 49);
}

@media (max-width:800px) {
    body {
        font-size: 11px;
    }
}

#container {
    color: #ecf0f1;
    margin: 0 auto;
    text-align: center;
}

#header {
    background-color: rgb(8, 6, 49);
    padding: 10px 0;
    font-size: 1.5em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#header img {
    display: inline-block;
    margin: 0 20px;
    padding-top: 0px;
    width: 50px;
    height: 50px;
    position: relative;
    top: 7px;
}

@media (min-width:800px) {
    #header img {
        top: 3px;
    }
}

#header h1 {
    display: inline-block;
    font-size: 3em;
    font-weight: bold;
    font-family: RubikDoodleShadow, Arial, sans-serif;
}

#content {
    margin: 0 auto 10px auto;
    padding: 10px 0 10px 0;
    width: 70%;

/*
older
    background-color: rgb(66, 141, 189);
*/
/*
newer*/
    background-color: rgb(14, 140, 219);

    /*background-color: #707070;*/
    /*box-shadow: 10px 10px 5px rgb(31, 87, 121);*/

    /*border-image: linear-gradient(rgb(8, 6, 49), rgb(14, 140, 219)) 30;*/
    /*border-width: 15px;
    border-style: solid;*/
    border: 10px solid rgb(17, 110, 168);
    border-radius: 10px;
    position: relative;
    @media (max-width:800px) {
        width: 90%;
    }
}

/*#controls {
    position: absolute;
    z-index: 1;
    display: flex;
    pointer-events: none;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes leftright {
    0% { transform: translateX(0px); }
   10% { transform: translateX(10px); }
   50% { transform: translateX(15px); }
   90% { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}

#showcase, #controls {
    width: 100%;
    height: 180px;
    @media (max-width:800px) {
        height: 140px;
    }
}

#showcase {
    display: flex;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#showcase::-webkit-scrollbar {
    display: none;
}

#controls .arrow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    width: 64px;
    height: 64px;
    position: absolute;
    cursor: pointer;
   pointer-events: all;
   animation: wiggle 2.5s 3;
}*/

.nouseraction {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 500ms linear;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 500ms, opacity 500ms linear;
}

.arrow:nth-of-type(1) {
    top: 40px;
    left: 6px;
}

.arrow:nth-of-type(2) {
    top: 40px;
    right: 6px;
    /*-webkit-transform: scaleX(-1);
    transform: scaleX(-1);*/
}

#slider {
    display: flex;
    width: 100%;
    justify-content: left;
}

#showcase a, #highlights a {
    color: white;
    text-decoration: none;
}

#projects {
    margin: 0 auto;
    /*width: 300px;*/
    height: 206px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    @media (max-width:800px) {
        /*width: 200px;*/
        height: 132px;
    }
}

#projects .project {
    margin: 5px;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 3px solid rgb(17, 110, 168);
    border-radius: 5px;
    @media (max-width:800px) {
        width: 200px;
        height: 130px;
        border: 1px solid rgb(17, 110, 168);
    }
}

/*#projects a {
    display: none;*/
    /*position: absolute;*/
/*}*/
/*
#projects a:nth-of-type(1) {
    display: block;
}*/

#navigator {
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-checked {
    margin: 5px;
    width: 24px;
    height: 24px;
    background-image: url('../images/icons/radio_button_checked.svg');
    cursor: pointer;
}

.radio-unchecked {
    margin: 5px;
    width: 24px;
    height: 24px;
    background-image: url('../images/icons/radio_button_unchecked.svg');
    cursor: pointer;
}

.project {
    color: black;
    background-color: rgb(163, 194, 225);
}

/*#showcase .project {
    margin: 5px;
    width: 300px;
    height: 170px;
    overflow: hidden;
    @media (max-width:800px) {
        width: 200px;
        height: 130px;
    }
}*/

.project .title {
    margin: 0 auto;
    width: 95%;
    height: 12%;
    font-weight: bold;
    overflow: hidden;
}

.project .summary {
    margin: 0 auto;
    width: 95%;
    height: 23%;
    overflow: hidden;
    line-height: 1.2em;
}

.project .image {
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
    max-width: 95%;
    max-height: 95%;
    width: 95%;
    height: auto;
}

#content h3 {
    margin-top: 15px;
}

#content h4 {
    margin-top: 8px;
}

.text {
    display: block;
    margin: 0 auto;
    padding: 30px 0;
    width: 80%;
    text-align: left;
}

.socialbar {
    height: 30px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nodecoration {
    text-decoration: none;
}

.sociallink {
    height: 24px;
    margin: 0 5px;
    padding: 2px;
    border: 2px solid rgb(17, 110, 168);
    border-radius: 5px;
    color: black;
    background-color: white;
    vertical-align: middle;
    display: flex;
    align-items: center;
    @media (max-width:800px) {
        border: 1px solid rgb(17, 110, 168);
    }
}

.sociallink img {
    width: 24px;
    height: 24px;
    @media (min-width:800px) {
        margin-right: 2px;
    }
}

.sociallink span {
    max-height: 100%;
    overflow: hidden;
    @media (min-width:800px) {
        margin-right: 4px;
    }
    @media (max-width:800px) {
        display: none;
    }
}

#biglogo {
    max-width: 50%;
}

#logo {
    margin-top: 50px;
}

#footer {
    padding: 5px 5px 15px 5px;
    background-color: rgb(8, 6, 49);
    font-size: 0.8em;
}