/*

    Name:   Lleyton Seymour
    Date:   May. 2021
    File:   styles.css
    Notes:  'under construction' 

*/

/*** FONTS ***/
    @font-face {
        font-family: 'SF-Pro-Text-Regular';
        src: url('../resources/SF-Pro-Text-Regular.otf'),
             url('location/of/font.svg#webfont') format('svg');
    }

    @font-face {
        font-family: 'SF-Pro-Text-Light';
        src: url('../resources/SF-Pro-Text-Light.otf');
    }

    @font-face {
        font-family: 'SF-Pro-Text-Bold';
        src: url('../resources/SF-Pro-Text-Bold.otf');
    }

    @font-face {
        font-family: 'SF-Pro-Rounded-Bold';
        src: url('../resources/SF-Pro-Rounded-Bold.otf');
    }

    @font-face {
        font-family: 'Apple-Color-Emoji';
        src: url('../resources/Apple-Color-Emoji.ttc');
    }


/***********/

/*** ANIMATIONS ***/

    /*** TRANSITIONS ***/
    @keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }
    
    @-moz-keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }
    
    @-webkit-keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }
    
    @-o-keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }
    
    @-ms-keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }

    @keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
    }
    
    @-moz-keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
    }
    
    @-webkit-keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
    }
    
    @-o-keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
    }
    
    @-ms-keyframes fadeOut {
        0% {opacity:1;}
        100% {opacity:0;}
    }

    /*** CONTACT ME LINK ***/
    @keyframes backgroundGradient {
        0% {background:linear-gradient(90deg,#fff,#fff)}
        50% {background:linear-gradient(90deg,#fff,#f4f6f9)}
        to
        {background:linear-gradient(90deg,#fff,65%,#f4f6f9,#f4f6f9 80%)}
    }
        
    @-webkit-keyframes hue {
        0%{-webkit-filter:hue-rotate(0deg)}
        to
        {-webkit-filter:hue-rotate(-1turn)}
    }
    
    @keyframes hue {
        0%{-webkit-filter:hue-rotate(0deg)}
        to
        {-webkit-filter:hue-rotate(-1turn)}
    }

    /*** ON-LOAD ***/

    @keyframes load-head-move {
        0% {transform: translateY(25vh);}
        50% {transform: translateY(25vh);}
        100% {transform: translateY(0vh);}
    }

    @keyframes load-head-fade {
        0% {opacity:0;}
        50% {opacity:0;}
        100% {opacity:1;}
    }


/***********/

/*** NATIVE STYLES ***/
    a {

        text-decoration: none;
        transition: transform .3s ease-out;

        max-width: 210px;
        word-wrap: break-word;
        margin-bottom: 6px;
        line-height: 18px;
        position: relative;
	    padding: 0px;
        border-radius: 17px;
        
    }

    b {
        font-family: 'SF-Pro-Text-Bold', 'Helvetica', 'Arial', sans-serif;
    }

    body {
        font-family: 'SF-Pro-Text-Regular', 'Helvetica', 'Arial', sans-serif;
        color: rgb(1, 0, 0);
        font-size: 12px;
        margin: 0;
        height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: auto;
      
    }

    h1 {
        color: rgb(1, 0, 0);
        font-size: 12px;
        margin-bottom: 20px;
        margin-top: 0px;
    }

    h2 {
        display: inline-block;
        font-size: 28px;
        margin: 0px;
    }

    h6 {
        color: rgb(142, 142, 147);
        font-size: 9px;
        max-width: 210px;
        word-wrap: break-word;
        margin: 0px;
        line-height: 0px;
        position: relative;
	    padding: 0px;

        align-self: flex-end;
        padding: 4px 10px 4px 10px;
        margin: 0px 0px 3px 0px;

        right: -7px;

    }

    html {
        font-family: 'Apple-Color-Emoji', 'Helvetica', 'Arial', sans-serif;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    p {
        max-width: 212px;
        word-wrap: break-word;
        margin-bottom: 6px;
        line-height: 18px;
        position: relative;
	    padding: 0px;
        border-radius: 17px;
    }

    ul, li {
        list-style: none;

        transition: transform .3s ease-out;

        max-width: 210px;
        word-wrap: break-word;
        margin-bottom: 6px;
        line-height: 18px;
        position: relative;
	    padding: 0px;
        border-radius: 17px;

        margin-left: 0;
        margin-right: 0; 
    }

    


/***********/




/*** ID (#) ***/
    #Time { 
        color: rgb(142, 142, 147);
        animation: load-head-fade 7s ease-in-out
    }

    #Icon {
        width: 100px;
        animation: fadeIn 2s ease-in-out, load-head-move 4s ease-in-out;
    }

    #move-about-bio {
        position: absolute;
        top: 10vh;
        left: -48vw;
        
    }

    #move-about-photo {
        position: absolute;
        top: -5vh;
        left: -14vw;
        
    }

    #move-about-skills {
        position: absolute;
        top: -17vh;
        left: -41vw;
        
    }

    #move-port {
        position: absolute;
        top: -5vh;
        left: -40vw;
        
    }

    #move-resume {
        position: absolute;
        top: -5vh;
        left: -90vh;
        
    }

    #load-home {
        animation: fadeIn 2s ease-in-out, load-head-move 4s ease-in-out;
    }

    #temp-fade {
        animation: load-head-fade 7s ease-in-out
    }

/***********/

/*** CLASSES (.) ***/

    .body_copy {
        font-size: 14px;
        line-height: 20px;
        text-align: justify;
        text-justify: inter-word;
    }

    .Blue-Bubble { /* non-tail messages */
        color: white; 
        background: #0B93F6;
        align-self: flex-end;
        padding: 4px 10px 4px 10px;
        margin: 0px 0px 3px 0px;
            
    }

    .Blue-Bubble-Sent { /* with-tail messages */
        color: white; 
        background: #0B93F6;
        align-self: flex-end;
        padding: 4px 12px 4px 10px;
        margin: 0px 0px 10px 0px;
            
    }

    .Grey-Bubble { /* non-tail messages */
        background: #E5E5EA;
        color: black;
        align-self: flex-start;
        padding: 4px 10px 4px 10px;
        margin: 0px 0px 3px 0px;
    }

    .Grey-Bubble-Sent { /* with-tail messages */
        background: #E5E5EA;
        color: black;
        align-self: flex-start;
        padding: 4px 12px 4px 12px;
        margin: 0px 0px 10px 0px;
    }

    .Convo-Section {
	    max-width: 300px;
	    margin: 5px auto 5px auto;
        display: flex;
        flex-direction: column;
    }

    /* File too large for hosting
    .emoji {
        font-family: 'Apple-Color-Emoji', 'Helvetica', 'Arial', sans-serif;
    }
    */


    .Head-Section {
        max-width: 300px;
	    margin: 0px auto 10px auto;
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .link {
        background-image: linear-gradient(
                        60deg, 
                        rgba(239,0,143,.5),rgba(110,195,244,.5),
                        rgba(112,56,255,.5),rgba(255,186,39,.5));
        background-size: 400% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: hue 5s infinite alternate;
        border-radius: 0px;
    }

    .Page-Container {
        margin: 5vh;
        display: block;
    }

    .item {
        display: none;
        flex-direction: column;
        position: absolute;
        right: 0;
        top: 15vh;
        max-width: 50vw;
        padding-right: 8vw;
        margin: 15px;
    }

    .about, .resume, .portfolio, .home {
        animation: fadeIn ease 3s;
        -webkit-animation: fadeIn ease 3s;
        -moz-animation: fadeIn ease 3s;
        -o-animation: fadeIn ease 3s;
        -ms-animation: fadeIn ease 3s;

        /*animation: fadeOut ease 8s;
        -webkit-animation: fadeOut ease 8s;
        -moz-animation: fadeOut ease 8s;
        -o-animation: fadeOut ease 8s;
        -ms-animation: fadeOut ease 8s;*/
        
    }

    /* not working */
    .fade-out {
        animation: fadeOut ease 8s;
        -webkit-animation: fadeOut ease 8s;
        -moz-animation: fadeOut ease 8s;
        -o-animation: fadeOut ease 8s;
        -ms-animation: fadeOut ease 8s;
    }

    /*  ///// Currently not working //////
    .contact {
        
        position: absolute;
        top: 15vh;
        
        transition: all 1s ease-out;
        transition-delay: 10s; 
        color: blue;
    }

    
    .contact:hover {
        
        transform: translate(10vw, 0);
        transition-delay: .25s;
        color: blueviolet;


    }

    .homehead {
        transition: transform .3s ease-out;

        
    }

    .homehead:hover {
        transform: scale(1.05);
        transition-delay: 0s;
    }
    





    .contact{
        visibility: hidden;
        opacity: 0;
        transition: all .3s ease-out;
        position: absolute;
        left: 0vh;
        top: 5.5vh;
        color: blue;
        transition-delay: 0s;
        
    }
    

    #homehead {
        -webkit-transition: .5s all;   
        -webkit-transition-delay: 5s; 
        -moz-transition: .5s all;   
        -moz-transition-delay: 5s; 
        -ms-transition: .5s all;   
        -ms-transition-delay: 5s; 
        -o-transition: .5s all;   
        -o-transition-delay: 5s; 
        transition: .5s all;   
        transition-delay: 5s; 
    }

    #homehead:hover {
        -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    }
    

  

    .contact:hover {
        transform: scale(1.05);
        
        transition-delay: 5s; 
    }
    
    .homehead:hover .contact{
        transform: translate(15vh, 0);
        visibility: visible;
        opacity: 1;


    }
*/
    


/***********/

/*** PSEUDO-CLASSES (:) ***/


    p::before, p::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 25px;
    }

    a::before, a::after, li::before, li::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 25px;
    }

    a:hover, li:hover {
        color: #b7e1ff;
        transform: translate(-7.5px, 0);
        cursor: pointer;
    }

    .Blue-Bubble-Sent:nth-of-type(1)::before {
        right: -7px;
        width: 20px;
        background-color: #0B93F6;
        border-bottom-left-radius: 16px 14px;
        z-index: -2;
    }
    
    .Blue-Bubble-Sent:nth-of-type(1)::after {
        right: -26px;
        width: 26px;
        background-color: white;
        border-bottom-left-radius: 10px;
    }

    .Blue-Bubble-Sent:nth-of-type(3)::before {
        right: -7px;
        height: 12px;
        width: 20px;
        background-color: #0B93F6;
        border-bottom-left-radius: 24px 16px;
        z-index: -2;
    }

    .Blue-Bubble-Sent:nth-of-type(3)::after {
        right: -26px;
        width: 26px;
        background-color: white;
        border-bottom-left-radius: 10px;
        z-index: -2;
    }

    .Blue-Bubble-Sent:nth-of-type(5) {
        margin: 0px 0px 5px 0px;
    }

    .Blue-Bubble-Sent:nth-of-type(5)::before {
        right: -7px;
        height: 12px;
        width: 20px;
        background-color: #0B93F6;
        border-bottom-left-radius: 24px 16px;
        z-index: -2;
    }
    
    .Blue-Bubble-Sent:nth-of-type(5)::after {
        right: -26px;
        width: 26px;
        background-color: white;
        border-bottom-left-radius: 10px;
        z-index: -2;
    }

    .Grey-Bubble-Sent::before {
        left: -7px;
        width: 20px;
        background-color: #E5E5EA;
        border-bottom-right-radius: 16px 14px;
        z-index: -2;
    }

    .Grey-Bubble-Sent::after {
        left: -26px;
        width: 26px;
        background-color: white;
        border-bottom-right-radius: 10px;
    }

    .Grey-Bubble-Sent:nth-of-type(2)::before {
        left: -7px;
        height:12px;
        width: 20px;
        background-color: #E5E5EA;
        border-bottom-right-radius: 16px 14px;
        z-index: -2;
    }

    .Grey-Bubble-Sent:nth-of-type(2)::after {
        left: -26px;
        width: 26px;
        background-color: white;
        border-bottom-right-radius: 10px;
    }
    
    li.active {
        color: #b7e1ff;
        background-color: #76bff3;
        transition: all 250ms ease-in-out;
        z-index: 2;
    }

    li.active:nth-of-type(3)::after {
        right: -26px;
        width: 26px;
        background-color: white;
        border-bottom-left-radius: 10px;
        z-index: 1;
    }

    li.active:nth-of-type(3)::before {
        right: -7px;
        height: 12px;
        width: 20px;
        background-color: #76bff3;
        border-bottom-left-radius: 24px 16px;
        transition: all 250ms ease-in-out;
        z-index: -2;
    }

/***********/

/*** Window Classes ***/
    span {
        line-height: 9px;
        vertical-align: 50%;
    }
    
    .window {
        background: #fff;
        width: 40vw;
        height: 25vw;
        margin: auto;
        margin-top: 12.5vh;
        border: 1px solid rgba(172, 172, 172, 0.5);
        border-radius: 10px;
        box-shadow: 0px 0px 30px -10px #acacac;
        max-width: 50vw;
        overflow: scroll;
    }
    
    .titlebar {
        background: rgb(238, 238, 238);
        color: #4d494d;
        font-size: 9pt;
        line-height: 20px;
        text-align: center;
        width: 40%;
        height: 25px;
        border-top: 1px solid #f3f1f3;
        border-bottom: 1px solid rgba(172, 172, 172, 0.5);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        cursor: default;
        position: fixed;
    }
    
    .buttons {
        padding-left: 8px;
        padding-top: 6px;
        float: left;
        line-height: 0px;
    }
    
    .buttons:hover a {
        visibility: visible;
    }
    
    .close {
        background: #ff5c5c;
        font-size: 9pt;
        width: 11px;
        height: 11px;
        border: 1px solid #e33e41;
        border-radius: 50%;
        display: inline-block;
    }
    
    .close:active {
        background: #c14645;
        border: 1px solid #b03537;
    }
    
    .close:active .closebutton, .close:hover, .closebutton:hover {
        color: #4e0002;
    }
    
    .closebutton {
        color: #820005;
        visibility: hidden;
        cursor: default;
    }
    
    .minimize {
        background: #ffbd4c;
        font-size: 9pt;
        line-height: 11px;
        margin-left: 4px;
        width: 11px;
        height: 11px;
        border: 1px solid #e09e3e;
        border-radius: 50%;
        display: inline-block;
    }
    
    .minimize:active {
        background: #c08e38;
        border: 1px solid #af7c33;
    }
    
    .minimize:active .minimizebutton, .minimize:hover, .minimizebutton:hover {
        color: #5a2607;
    }
    
    .minimizebutton {
        color: #9a5518;
        visibility: hidden;
        cursor: default;
    }
    
    .zoom {
        background: #00ca56;
        font-size: 9pt;
        line-height: 11px;
        margin-left: 4px;
        width: 11px;
        height: 11px;
        border: 1px solid #14ae46;
        border-radius: 50%;
        display: inline-block;
    }
    
    .zoom:active {
        background: #029740;
        border: 1px solid #128435;
    }
    
    .zoom:active .zoombutton .zoom:hover, .zoombutton:hover{
        color: #003107;
    }
    
    .zoombutton {
        color: #006519;
        visibility: hidden;
        cursor: default;
    }
    
    .content-window {
        padding: 5vh;
        padding-top: 7vh;
        overflow: hidden;

    }

    .title-style {
        padding-top: 3px;
        padding-right: 10%;
    }

    /* Scrollbar fix for Windows Default */
    ::-webkit-scrollbar {
        width: 0;
        background: transparent; 
    }

/***********/