@charset "UTF-8";

/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Gamja+Flower|Source+Sans+Pro|Great+Vibes');

/*END OF FONTS---------------------------------------------------------*/

/* HTML */
html {
    background: #e6e9e9;
    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

/*END OF HTML---------------------------------------------------------*/

/* NAVIGATION STYLING */
/* Add a background color to the top navigation */
.navigation {
    background-color: #e6e9e9;
    overflow: hidden;
    margin: 0em -2em;
    box-shadow: none;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
}

/* Style the links inside the navigation bar */
.navigation a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
}

#navLabel {
    color: black;
    font-weight: bold;
    border-right: 6px solid #4286f4;
    background-color: inherit;
    text-decoration: none;
    cursor: not-allowed;
}

/* Change the color of links on hover */
.navigation a:hover {
    /*background-color: #DBFF33;*/
    background-color: white;
    color: #4286f4;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4286f4;
    color: white;
}

/* Hide the link that should open and close the navigation on small screens */
.navigation .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navigation (.icon) */
@media screen and (max-width: 700px) {
    .navigation a:not(:first-child) {
        display: none;
    }

    .navigation a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the navigation with JavaScript when the user clicks on the icon. This class makes the navigation look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
    .navigation.responsive {
        position: relative;
    }

    .navigation.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .navigation.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/*END OF NAVIGATION---------------------------------------------------------*/

/* COLUMNS *Source: https://codepen.io/Cheesetoast/pen/KFAaq */
.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 10px 0;
}

.column {
    flex: 1;
    margin: 2px;
    padding: 10px;
    border-top: 6px solid black;
    border-bottom: 6px solid #4286f4;

    &:first-child {
        margin-left: 0;
    }

    &:last-child {
        margin-right: 0;
    }

    position: absolute;
    overflow: auto;
    max-height: 70vh;
}

.column:nth-last-of-type(2) {
    flex: 3;
}

#left {}

#unimain {}

#unimain #tableOfUni {}

#unimain td {}

#unimain a {}

#right a {
    font-size: 0.8vw;
}

#right a:hover {
    color: black;
}

#right div {
    font-size: 1vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#right div:hover {
    /*    overflow: visible;*/
    white-space: normal;
}

@media screen and (max-width: 980px) {
    .columns .column {
        margin-bottom: 5px;
        flex-basis: 40%;
    }

    .columns .column:nth-last-child(2) {
        margin-right: 0;
    }

    .columns .column:last-child {
        flex-basis: 100%;
        margin: 0;
    }

    #left {
        display: none;
    }
}

@media screen and (max-width: 680px) {
    .columns .column {
        flex-basis: 100%;
        margin: 0 0 5px 0;
    }
}

/*END OF COLUMNS---------------------------------------------------------*/

/* HEADER */
header {
    padding: 60px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */
    color: white;
    font-size: 3.5em;
    font-family: 'Caesar Dressing', cursive;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

header a {
    color: inherit;
}

header a:hover {
    text-decoration: none;
    color: inherit;
}

/* Source: https://freefrontend.com/css-text-effects/ */
#anim8 {
    display: inline;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Gamja Flower', cursive;
    text-transform: capitalize;
}
#uniHeader{
        font-family: 'Source Sans Pro', sans-serif;
    
}
#anim8:first-of-type {
    animation: showup 7s infinite;
}

#anim8:last-of-type {
    width: 0px;
    animation: reveal 7s infinite;
}

#anim8:last-of-type span {
    margin-left: -355px;
    animation: slidein 7s infinite;
}

@keyframes showup {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slidein {
    0% {
        margin-left: -600;
    }

    20% {
        margin-left: -600;
    }

    35% {
        margin-left: 0px;
    }

    100% {
        margin-left: 0px;
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        width: 0px;
    }

    20% {
        opacity: 1;
        width: 0px;
    }

    30% {
        width: 355px;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 355px;
    }
}

/*END OF HEADER---------------------------------------------------------*/

/* BODY */
body {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 80%;
    padding: 2em 2em 4em;
    position: relative;
}

/*
#unimain{
    position: relative;
    flex: 1 1 auto;
    line-height: 0;
}
#unimain h2{
    flex: 0 0 auto;
}
*/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    margin-top: .5em;
}

a {
    color: #4286f4;
    text-decoration: none;
}
#deadLink {
    cursor: not-allowed;
}  
b,
strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    /*
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
*/
}

input[type=search] {
    border: 2px solid black;
}

input[type=submit] {
    background-color: #4286f4;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: 0.3s;
}

input[type=submit]:hover {
    background-color: #000;
    color: #fff;
}

a:hover {
    color: black;
    cursor: pointer;
    text-decoration: underline;
}

ul {
    list-style-type: none;
    padding: 0;
}

ol {
    list-style-type: none;
    padding: 0;

}

ul li {
    margin: 5px;
}

li {
    margin: 10px 0;
    border-left: 6px solid lightgrey;
    padding-left: 10px;
}

li:hover {
    color: black;
    cursor: pointer;
    border-left: 6px solid black;
}

li a:hover {
    color: black;
}

#details {
    color: black;
}
#tasks{
    color: black;
}
#quals{
    color: black;
}
#signature{
    font-family: 'Great Vibes', cursive;
    font-size: 1.5em;
}
/*END OF BODY---------------------------------------------------------*/

/* TABLES */
table {
    table-layout: fixed;
    font-size: 1em;
    width: 100%;
    word-break: break-all;
}

td {
    border-bottom: 2px solid lightgrey;
    padding: 10px;
}

/*END OF TABLES---------------------------------------------------------*/

/* FOOTER */
.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #4286f4;
    color: white;
    text-align: center;
}

.footer a {
    color: white;
}

.footer a:hover {
    color: greenyellow;
}

/*END OF FOOTER---------------------------------------------------------*/

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    color: crimson;
}

.sticky + .content {
    padding-top: 102px;
}