:root {
    --teal: #4effff;
    --aquamarine: #4effff;
    --white: #ffffff;
  }

*{font-family:'Inconsolata';}
html{ scroll-behavior: smooth;} 
body{
    opacity: 0;
    animation: fadeIn 2s forwards;
    background-color: #f3fdff; 
    transition: 1s;


/*
    background-repeat: no-repeat;
    background-image: url(/src/styles/images/windows.png);
    background-size: 100%;
    background-position: top;
*/
}

.nameJacky{
    display: flex;
    justify-content: center;
    h1{
        padding: 1rem;
        color:#4effff;
        font-weight: 500;
        font-family: comfortaa;
        text-shadow: 0 0 3px rgba(18, 118, 148, 0.233);
        background-image: url(/src/styles/images/bajablast.gif);
        background-size: 180%; 
        background-position: 70%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@media(max-width: 1800px){
    .space{
        display: none;
    }
}
@media(max-width: 1800px){
    .starSpace{
        display: none;
    }
}


@keyframes fadeIn {to {opacity: 1;}}
.hr0{border: dashed 1px; border-color: #4effff; width: 25%;}

.darkmodeNoTransition{
    align-items: center;
    align-self: center;
    align-content: center;
    margin: none;
    background-color: #011d2b;
    background-repeat: no-repeat, no-repeat, no-repeat,  no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-image: url(/src/styles/images/snowymountainsoriginal1.555.png),  url(/src/styles/images/snowymountainsoriginal1.png), url(/src/styles/images/snowymountainsoriginal.png), 
    url(/src/styles/images/snowymountainsoriginal1.1.png), url(/src/styles/images/snowymountainsoriginal.png), url(/src/styles/images/snowymountainsoriginal1.1.png), 
    url(/src/styles/images/snowymountainsoriginal.png), url(/src/styles/images/snowymountainsoriginal1.555.png);
    background-size: 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%, 100%;
    background-position: center center, center 137%, center 2%, center 2%, center 2%, center 137%, center 137%, center 137%;
    .name{
        font-family:'IBM Plex Sans';
        font-weight: 500;
        font-size: 2.8rem;
        color: #4effff;
        text-shadow: 0 0 3px rgba(18, 118, 148, 0.233);
        background-image: url(/src/styles/images/bajablast.gif);
        background-size: 180%; 
        background-position: 70%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .para1{ color:rgb(46, 151, 177);}
    #span1{ border: solid 1px rgb(9, 96, 117);}
    .aboutbuttons{ background-color: rgb(4, 54, 66);}
    #abouttitles{ color:rgb(14, 149, 173);}
    .tree{ color:rgb(19, 136, 165);}
    #topic{ color:rgb(19, 136, 165);}
    .darkmodemain{ box-shadow: 0 0 20px 5px  rgb(3, 58, 83);}    
    .projectdirectingbutton{ color: rgb(36, 130, 146);}
    .para2{ color:rgb(22, 144, 175);}
    #contacts{ color:rgb(22, 144, 175);}
    #backtotop{ color:rgb(22, 144, 175);}
    .para2-5{ color:rgb(22, 144, 175);}

    .socialsMediaIcon{ width: 1.5em; height: 1.5em; margin-top: 2.5px; opacity: .75;
        
        -webkit-filter: drop-shadow(5px 5px 5px transparent);
        filter: drop-shadow(5px 5px 5px transparent);
    }   /*media link sizes*/ 
    /*
    .linkSpan{ border-radius: 25px;
        border-bottom: none;
        border-left: none;
        border-right: none;
        box-shadow: none;
        }
    */
    .linkSpan{ border-radius: 25px;
        border-bottom: solid 1.5px rgba(0, 11, 15, 0.322);
        border-right: solid 1.5px rgba(0, 11, 15, 0.322);
        border-left: solid 1.5px rgba(0, 11, 15, 0.322);
        box-shadow: 0 0 10px rgb(0, 49, 66);
        padding-left: .25em;
        padding-right: .25em;
    }
    .emoji{
        font-size: 100%;
        color: transparent; text-shadow: 0 0 0 #64faff;
        border-radius: 25px;
        padding-bottom: 1px;
        background-color: rgb(4, 54, 66);
    }
    .navButtonElementSpan{
        background-color: rgb(4, 54, 66);
    }
   
}

/***************************************ESSENTIALS********************************************/
.parentContainer{
    align-items: center;
    align-self: center;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: right;
}
.childContainer{display: grid; align-self: center;}
.linkSpan{ border-radius: 25px;
    border-bottom: solid 1.5px rgba(56, 199, 255, 0.11);
    border-right: solid 1.5px rgba(56, 199, 255, 0.11);
    border-left: solid 1.5px rgba(56, 199, 255, 0.11);
    box-shadow: 0 0 8px rgba(56, 199, 255, 0.233);
    }
.container1{padding-top: 2.9rem; padding-bottom: 2.8rem;}
.container2{padding-bottom: 1em;}
.container3{}
    
.navButtonElement1{ opacity: 0; animation: fadeIn 1s forwards;}
.navButtonElement2{ opacity: 0; animation: fadeIn 2s forwards;}
.navButtonElement3{ opacity: 0; animation: fadeIn 3s forwards;}
.darkModeButton{ opacity: 0; animation: fadeIn 4s forwards; }
.linkItems1{ opacity: 0; animation: fadeIn 1s forwards;}
.linkItems2{ opacity: 0; animation: fadeIn 2s forwards;}
.linkItems3{ opacity: 0; animation: fadeIn 3s forwards;}
.linkItems4{ opacity: 0; animation: fadeIn 4s forwards;}
.linkItems5{ opacity: 0; animation: fadeIn 5s forwards;}
.darkModeButton{
    border: none;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    cursor: pointer;
    border-radius: 25px; 
    transition: 1.5s !important;
    /*transform: scaleX(-1);*/
}
.darkModeButton:hover{background-color: transparent !important; transform: rotate(180deg);}
.emoji{
    font-size: 100%;
    color: transparent; text-shadow: 0 0 0 #64faff;
    border-radius: 25px;
    padding-bottom: 1px;
    background-color: #d3f6ff46;
}


/*toppage-------------------------------------------*/
.link{display: flex; justify-content: center;} /*container for media links*/
.linkItems{ padding-left: 0.55em; padding-right: 0.55em;} /*media link spacing*/
/*.linkItems img:hover{transform: translateY(-2px); transition-duration: 200ms;}*/
.socialsMediaIcon{ width: 1.5em; height: 1.5em; margin-top: 2.5px;
    transition: 3s;
    -webkit-filter: drop-shadow(5px 5px 5px #7cdaff9c);
    filter: drop-shadow(5px 5px 5px #7cdaff9c);
}   /*media link sizes*/ 
.navButton{ display: flex; justify-content: center; -webkit-tap-highlight-color: transparent;}
.navButtonElement{
    -webkit-tap-highlight-color: transparent;
    padding-right: 1.5em;
    padding-left: 1.5em;
    border-radius: 15px;
    transition: .25s ease;
    font-weight: 400;
    text-decoration: none;
    color: #52f9ff;
    font-size: 105%;

}
@media (max-width:500px){
    .navButtonElement{
        -webkit-tap-highlight-color: transparent;
        padding: 0;
        padding: auto;
        border-radius: 15px;
        transition: .25s ease;
        font-weight: 500;
        text-decoration: none;
        color: #52f9ff;
        font-size: 105%;
    }
}

.navButtonElementSpan{
    color: #52f9ff;
    background-color: rgba(64, 255, 245, 0.205);
    border-radius: 25px;
}
.navButtonElementSpan1{
    color: #52f9ff;
    border-radius: 25px;
}
.navButtonElementSpan1:hover{
    transition: 0.5s;
    background-color: rgba(64, 255, 245, 0.205);

}
/*toppage-------------------------------------------*/

/*name----------------------------------------------*/
.name{
    padding: 15px 15px 15px 15px;
    margin: 0.25em;
    font-family:'IBM Plex Sans';
    font-weight: 500;
    font-size: 2.8rem;
    color: #4effff;
    text-shadow: 0 0 3px rgba(30, 210, 255, 0.226);
    background-image: url(/src/styles/images/tidalwave2.gif);
    background-size: 60%; 
    background-position: 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.imagetextcenter{
    display: flex;
    justify-content: center;
}
#profilepicture{
    border: transparent;
    border-radius: 50%; 
    align-self: center;
    width: 2.8rem;
    height: 2.8em;  
    opacity: 0.8;
  
    /*box-shadow: 0px 2px 25px rgba(32, 158, 180, 0.062);*/
}
/*
.pfppadding{
    display: flex;
    justify-content: left;
    padding-left: 5em;
}
    */
@media(max-width:399px){
    .imagetextcenter{
        width: 30%;
        height: 30%;
        display: flex;
        flex-wrap: wrap;
        padding: auto;
        margin: auto;
    }
}
/*name----------------------------------------------*/


/*mainpage------------------------------------------------------*/
.mainpage{
    display: flex;
    justify-content: center;
}
#flexboxspacing{
    width: 100%; 
}

@media (max-width: 1200px){ 
    .tableofcontents > #tree {
        display: none;
    }
    .mainpage{
        
        display: block;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .pfp{
        display: none;
    }
}
@media (max-width: 399px){ 

    .mainpage{
        
        display: block;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}
/*tableofcontents----------------------------------------------*/
.tableofcontents{}

.tree{
    -webkit-tap-highlight-color: transparent;
    color: #4c97dd;
    text-align: right;
    padding-right: 4em;
    position: sticky;
    top: 20em;

}
#topic{
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: #4c97dd;
    padding: 10px;
}
#topictitle{
    font-weight: 400;
    font-size: larger;
}
#topic #hovertopic:hover{
    font-weight: 500;
    color: #34e8f5;
    background-color: rgba(175, 243, 255, 0.185);
    border-radius: 25px;
    transition: .75s;
}
@media (max-width: 1500px){ /*IMPORTANT - hides the table of contents when on mobile*/
    .tableofcontents > #tree {
        display: none;
    }
}
/*tableofcontents----------------------------------------------*/



/*maincontent---------------------------------*/

@media (max-width: 599px){
    .maincontent >  div{
        background-color: transparent;
        padding: 0px;
        margin: 0px;
    }
}

@media (max-width: 330px){
    #para{
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    #span1{
        padding: 0px;
        margin: 0px;
    }
}

.maincontent{
    width: 100%;
    display: grid;
}
.maincontentstyle{
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(245, 254, 255, 0.596), rgb(238, 255, 254), rgb(230, 255, 253), rgb(170, 255, 248), rgb(187, 255, 249));
    border: whitesmoke;
    border-radius: 25px;
    box-shadow:  0 0 80px 10px  rgb(206, 255, 251);
    animation: boxGlow 10s infinite;
   
}

@keyframes boxGlow{
    50% {
        box-shadow:  0 0 80px 10px  rgba(0, 217, 255, 0.144);
    }
}

.darkmodemain{
    background-color: transparent;
    background-image: linear-gradient(to bottom,#0220308e, #021f3188, #011b3088);
    border-radius: 25px;
    box-shadow: 0 0 20px 5px  rgb(3, 58, 83);
    animation: glowAnimate 10s infinite;
}

@keyframes glowAnimate {
    33%{
        box-shadow: 0 0 20px 5px  rgba(4, 97, 105, 0.466);
    }
}
.aboutcontent{
    padding: 0 5em;
    margin-top: 5em;
    text-align: left;
}
.aboutbuttons{
    padding: 0 0 5 0px;
    background-color: #4271bd;
    text-decoration: none;
    color: #4effff;
    border-radius: 2px;
}
#abouttitles{
    color:#3f88c4;
    padding-left: 5px;
    font-weight: 500;
}

#para{
    /*border: solid 1px yellow;*/
    padding: 0 5em;
}


.para1{ /*all the texts*/
    /*border: solid 1px yellow;*/
    font-weight: 450;
    padding: 0 5em;
    color: #4c97dd;
}

.para2{ /*email*/
    /*border: solid 1px yellow;*/
   text-align: center;
    color: #4c97dd;
}
.para2-5{ /*email*/
    /*border: solid 1px yellow;*/
    color: #4c97dd;
    text-decoration: none;
    text-align: center;
}
#span1{
    padding: 1em;
    border-radius: 5px;
    border: solid 1px #4271bd;
    box-shadow: 10px  rgb(214, 253, 250);
}
.colorhover:hover{
    color: #4effff;
}
.projectdirectingbutton{
    text-decoration: none;
    color: #3484c5;
}
/*maincontent---------------------------------*/


/*sidecontent---------------------------------*/
.misc{
    display: hidden;
}
/*sidecontent---------------------------------*/



/*mainpage------------------------------------------------------*/

.secondpage{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#contacts{
    text-align: center;
}
.imagecontent{
    padding: 5em;
    margin: 1em; 
}
.imgcard{
    border-radius: 15%;
    max-width: 100%;
    width: auto;
    height: auto;

}

.parentcontainer > h1{
    color: #4effff;
    text-align: center;
}
#minilogo{
    width: 1%;
    height: 1%;
    text-align: center;
}
#clock{
    text-align: center;   
}
#clock > span{
    color: #4effff;
}
#txt{
    font-size: 132%;
}
#backtotop{
    -webkit-tap-highlight-color: transparent;
    color: #3484c5;
    text-decoration: none;
}


/*----------------------------*/
.patreon{
    text-align: center;
}
.endbox{
    display: flex;
    justify-content: center;  
}
.endboxitem{
    padding: 50px;
}
#gmaillogo{
    width: 50px;
    height: 40px;
    padding-top:10px;
}
#xlogo{
    width: 75px;
    height: 50px;
}
#patreonlogo{
    width: 50px;
    height: 50px;  
}
/*----------------------------*/


/*----------------------------*/
#instagramlogo{
    width: 40px;
    height: 40px;
}
#instagramlink{
    text-decoration: none;
    color: #4effff;
}
#email{
    color: #4effff;
    padding: 50px;
}
@media (max-width: 330x){
    #album > #imgcard1, img{
        border: solid 15px black;
    }
}
.place{
    color: #4effff;
}
/*----------------------------*/

.songRef{
    background-image: linear-gradient(to left,  rgb(84, 227, 255), rgb(117, 228, 180),rgb(32, 235, 229));
    color: transparent;
    background-clip: text;
    text-align: center;
}


.myEmail:visited{
    font-weight: 900;
    font-size: 105%;
    background-image: linear-gradient(to left,  rgb(84, 227, 255), rgb(117, 228, 180),rgb(32, 235, 229));
    color: transparent;
    background-clip: text;
    text-decoration: none;
}
.myEmail:link{
    font-weight: 900;
    font-size: 105%;
    background-image: linear-gradient(to left,  rgb(84, 227, 255), rgb(117, 228, 180),rgb(32, 235, 229));
    color: transparent;
    background-clip: text;
    text-decoration: none;
}

.footer{
    display: flex;
    justify-content: center;
}


/* original code */



@keyframes animate-background {
    0% {
        background-position: 30% 50%;
    }
    100% {
        background-position: 70% 50%;
    }
}