p{
    color:#becce8;
    font-family: sans-serif;
}

body{
    
    background-color:#282020;
    margin: 0;
    cursor: url(https://cdn.custom-cursor.com/db/10282/32/vsco-shell-and-a-fish-cursor.png) , default;



 
}
.page-wrapper{
margin: 0;
}

::selection{
    color:#ba4046;
    background: #5e79d4;
}


::-webkit-scrollbar {
    width:10px; 
    
}
::-webkit-scrollbar-track {
    background-color: #282020f9; 
}
  
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    height: 30px;
    background-image: url(https://static.vecteezy.com/system/resources/thumbnails/001/622/942/original/underwater-bubbles-rising-free-video.jpg);
    background-position: center;
    background-size: cover;
 
}
::-webkit-scrollbar-thumb:hover {
    
    background-position:20%;
   
}
  





h1,h2{
    color:aliceblue;
}

h3,h4{
    color: #becce8;
}
a{
    text-decoration: none;
    color: #ba4046;
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
}


nav {
    display: flex;
    padding-top: 1%;
    padding-bottom: 1%;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: #282020;
    z-index: 10;
    width: 100%;
}

.nav-logo-title img {
    content: url(https://www.freepnglogos.com/uploads/fish-png/fish-png-clipart-stormdesignz-16.png);
    max-width: 70px;
    margin-right: 10px;
    margin-left: 10%;
    display: inline-block;
}

.nav-logo-title {
    display: flex;
    align-items: center;
}

.nav-logo-title a {
    width: 300px;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
}

nav ul {
    flex: 1;
    text-align: right;
    margin: 0;
}

nav li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
nav li a:hover{
    text-decoration: underline;
}

nav a {
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
}
.header-filler{
    width: 150px;
    height: 60px;
    background-color:transparent;
    background-image: url(https://thumbs.gfycat.com/ElementaryTenderAmericanratsnake-size_restricted.gif);
    background-size: cover;
    background-position: center;
    transform: scale(-1,1);
    position: relative;
    margin-top: 5%;
    margin-bottom: 2%;
    display: flex;
    animation: swim 10s infinite; 
    animation-timing-function: linear;
    
    
   
}


.header-filler::after{
    content: "";
    width: 40px;
    height: 40px;
    background-color:transparent;
    background-image: url(https://i.pinimg.com/originals/9b/c6/2c/9bc62cc7ca800fddfe294e8ebdbe5aa4.gif);
    background-size: cover;
    background-position: center;
    position: relative;
    left: -35%;
    animation: swimm 10s infinite;
    animation-timing-function: linear;
    
   
    

}

@keyframes swim {
   from{left: -40%}
   to{left: 100%;}
}
@keyframes swimm {
    0%{
        top:-25%;
    }
    50%{
        top:50%;
    }
    100%{
        top:-25%;
    }
 }


#header{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 60px;
    padding: 5px;
    background-size:cover;
    background-position: center;
    background-image: url(https://images.unsplash.com/photo-1575980202155-18b6c1e49169?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXF1YXJpdW18ZW58MHx8MHx8&w=1000&q=80);
}
#header h1{
    color: aliceblue;
    margin-top: 50px;
    font-size: larger;
    margin-left: 10px;
}
.header-texts h3,p{
    font-size: large;
    margin-left: 10px;
    color: aliceblue;
}
.content{
    width: 70%;
    margin: 20px;
}
.content-aside{
    position: relative;
   display: flex;
   margin-top: 5%;
   
}
.content::before{
    content: "";
    position: absolute;
    display: inline-block;
    width: 70%;
    height: 80%;
    top: 100px;
    z-index: -2;
    margin-left: 7%;
    border-radius: 52% 48% 75% 25% / 65% 49% 51% 35%;
    background-color: #321890;
    box-shadow: -10px 10px 0 20px #251856;
    transform: rotate(1605deg);
    transition: border-radius ease-in-out 500ms;
    opacity: 0.8;
    animation: fadeInAnimation 3s ;
}

.content:hover::before {
    border-radius: 14% 86% 36% 64% / 68% 27% 73% 32% ;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.content::after{
    content: "";
    right: 10%;
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 20%;
    bottom: 10%;
    z-index: -1;
    margin-left: 7%;
    border-radius: 78% 36% 64% 67% / 43% 38% 92% 71% ;
    background-color: #321890;
    box-shadow: -10px 10px 0 20px #251856;
    transform: rotate(1605deg);
    animation:blob 10s infinite;
    opacity: 0.8;
}
@keyframes blob{
0%{
    border-radius: 78% 36% 64% 67% / 43% 38% 92% 71% ;
}
33%{
    border-radius:82% 73% 64% 48% / 68% 38% 75% 71% ;
}
66%{
    border-radius: 81% 73% 25% 94% / 10% 76% 73% 88% ;
}
100%{
    border-radius: 78% 36% 64% 67% / 43% 38% 92% 71% ;
}
}

.content-aside aside ::after{
    content: "";
    right: 10%;
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 20%;
    bottom: 10%;
    z-index: -1;
    margin-left: 7%;
    border-radius: 78% 36% 64% 67% / 43% 38% 92% 71% ;
    background-color: #321890;
    box-shadow: -5px 5px 0 10px #251856;
    transform: rotate(1605deg);
    animation:blob 8s infinite;
    opacity: 0.8;
}




.content-aside aside:hover ul {  
   display: block;
   
}
.content-aside aside ul{
   display: none;
   color: #becce8;
}
.content-aside aside ul li{
    list-style-type: square;
   
}
.content-second,.content-first {
    margin-bottom: 10%;
    
}
.content p{
    margin-left: 0;
}





.content-aside aside{
    z-index: 100;
    border-radius: 52% 48% 75% 25% / 65% 49% 51% 35%;
    background-color: #321890;
    box-shadow: -5px 5px 0 10px #251856;
    transition: border-radius ease-in-out 2000ms;
    opacity: 0.8;
    padding: 1%; 
    position: -webkit-sticky;
    position: sticky;
    width: 20%;
    height: 20%;
    top: 7%;
   
}
.content-aside aside:hover {
    border-radius: 75% 25% 56% 44% / 17% 67% 33% 83%  ;  
    transition: border-radius ease-in-out 2000ms; 
}
aside h2{
    margin-left: 5%;
}





.articles{
    position: relative;
}

.row-first td{
    height: 15rem;
}
.row-first h3{
    color: aliceblue;
    
}
.article{
    padding: 5%;
    width: 33%;
    position: relative;
}

.row-first img{
    position: absolute;
    width: 0;
    content:url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    z-index: -999999999;
}


.article p, .article a{
    display: none;
    text-align: justify;
}


.article:hover p, .article:hover a{
    display: block;
}
tr.row-first td.article:nth-child(1){
    background-image: url(https://images.theconversation.com/files/150289/original/image-20161215-13663-1o37rfi.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop);
    background-size:cover;
    background-position: center;
    transition: 5s ease-in-out background;
    
}
tr.row-first td.article:nth-child(1):hover{
    background: transparent;
    height: 25rem;
}
tr.row-first td.article:nth-child(2){
    background-image: url(https://images.squarespace-cdn.com/content/v1/58617a5946c3c49fd7aa0f94/1677611601683-9F59FRN6UIFMCRV7M1LO/Lysmata+amboinensis+1200px+x+1200px+png+comp.png?format=2500w);
    background-size:cover;
    background-position: center;
    transition: 5s ease-in-out background;
    
}
tr.row-first td.article:nth-child(2):hover{
    background: transparent;
    height: 25rem;
}
tr.row-first td.article:nth-child(3){
    background-image: url(https://awsimages.detik.net.id/community/media/visual/2021/08/13/kerang-kima-1.jpeg?w=1200);
    background-size:cover;
    background-position: center;
    transition: 5s ease-in-out background;
}
tr.row-first td.article:nth-child(3):hover{
    background: transparent;
    height: 25rem;
}


















.article p{
    margin-left: 0;
}


.row-second {
  background-image: url(https://imgs.mongabay.com/wp-content/uploads/sites/20/2022/03/11183228/Screen-Shot-2022-03-11-at-10.32.04-AM.png);
  border-collapse: separate;
  display: flex;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
  padding-top: 10%;
  padding-bottom: 10%;
  background-size: 125%;
  background-position: left;
  width: 300%;
  transition: 4s ease-in-out background-position;
}

.row-second:hover {
    background-position: right;
}

.row-second img{
    visibility: hidden;

}


table {
    border-collapse: collapse;
   
}
.article a{

    position: absolute;
    text-align: center;
    bottom: 5%;
    left: 25%;
    width: 50%;
    height: 5%;
    border-radius: 5% 5% 5% 5% / 25% 25% 25% 25% ;
    background-color: #282020;
    padding: 1%;
    padding-top: 2%;
    transition:bottom 1s ease-out ;
    
}
.article a::before {
    content: "";
    z-index: -100;
    position: absolute;
   border-radius: 7% 7% 7% 7% /25% 25% 25% 25%;
    display: inline;
    width: 110%;
    height: 150%;
    
    
    background: conic-gradient(
        red,orange,yellow,green,blue,purple,magenta,red
    );
    
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
   
    
    
}
.article a:hover{
    transition: ease-in 200ms bottom;
    bottom:6% ;
}





.article-long{
   
    padding: 4%;
    padding-left: 35%;
    text-align: justify;
}
.article-long p,.article-long h3{
    color:aliceblue
}
.article-long p{
    margin-left: 0;
}
.creativity-wrapper{
    left: 0;
    position: relative;
    width: 400%;
    animation: slide 60s infinite; 
    
}
.creativity{
    margin-top: 10%;
    margin-bottom: 10%;
    width: 100%;
    overflow: hidden;

}
.creativity h2:hover{
    text-decoration: underline;
}

@keyframes slide{
0%{
    left: -0;
}
10%{
    left:-0;
}
16.6%{
    left: -100%;
}
26.6%{
    left: -100%;
}
33.3%{
    left: -200%;
}
43.3%{
    left: -200%;
}

50%{
    left: -300%;
}
60%{
    left: -300%;
}
66.6%{
    left: -200%;
}
76.6%{
    left: -200%;
}
83.3%{
    left: -100%;
}
93.3%{
    left: -0;
}
100%{
    left: -0;
}


}
.mini-one{
    
    position:relative;
    left: 0;
    width: 25%;
    float: left;
}
.mini-two{
    position:relative;
    left: 0;
    width: 25%;
    float: left;
}
.mini-three{
    position:relative;
    left: 0;
    width: 25%;
    float: left;
}
.mini-four{
    position:relative;
    left: 0;
    width: 25%;
    float: left;
}
.mini-content{
    padding: 5%;
    display: inline;
    float: left;
    width: 53%;
    height: 13rem;
}
.mini-content p{
    margin-left: 0;
}


.mini-one img{
    background-image: url(https://64.media.tumblr.com/f4ec80001bb3d0d851f92617fcb751ef/tumblr_oqzxgavB3n1wnax9eo1_400.gif);
    content: url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    background-size:cover;
    background-position:top;
}
.mini-two img{
    content:  url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    background-size:cover;
    background-position:top;
    background-image: url(https://bestanimations.com/media/fish/996053927pretty-clown-fish-1.gif);
}
.mini-three img{
    content:  url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    background-size:cover;
    background-position:top;
    background-image:url(https://bestanimations.com/media/fish/1011176300tetra-aquarium-gif.gif) ;
}
.mini-four img{

    content:  url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    background-size:cover;
    background-position:top;
    background-image:url(https://bestanimations.com/media/fish/1006525786aquarium-animated-gif-2.gif) ;
}



.creativity-wrapper img{
display: inline;
float: left;
width: 37%;
height: 13rem;
padding-top: 5%;
padding-bottom: 5%;
}






.footer-logo h3,.footer-logo p{
    color: aliceblue;
 
}
.footer-credit h3{
    color: aliceblue;
}

.footer-form p{
    color: aliceblue;
}



.footer-logo{
    margin-right: 2%;
    position: absolute;
    right: 0;
    text-align: end;
    display: inline;
    float: left;
    width: 35%;
    font-size: smaller;
    padding: 1.5%;
    align-content: center;
}
.footer-form:hover{
    transform: none;
    transition: 200ms ease-in-out transform;
    }

.footer-form{
    margin-left: 20%;
    display: inline-block;
    position: relative;
    width: 20%;
    color: aliceblue;
    padding: 1.5%;
    background-color:#7fffd480;
    margin-bottom: 5%;
    transform: skewY(15deg);
    box-shadow: 0.5rem 0.5rem #19876280;
    transition: 1s ease-in-out transform;
}
.footer-credit{
    margin-right: 2%;
    position:absolute;
    right: 0;
    bottom: 0;
    text-align: end;
    display: inline;
    float: left;
    width: 35%;
    font-size: smaller;
    padding: 1.5%;
}
.footer-credit h3{
    visibility: hidden;
}
.footer-credit h3:nth-child(1)::after{
    visibility:visible;
    content: "Template Made by Bryan Samuel";
    text-align: end;
}
.footer-credit h3:nth-child(2)::after{
    visibility:visible;
    content:  "Copyright @ 2023 NCI";
    text-align: end;
    
}

footer{
    margin-top: 5%;
    position: absolute;
    width: 100%;
    background-image: url(https://i.pinimg.com/originals/b4/b6/a7/b4b6a73a605112d9e07d3211fe7c0a47.png);
    background-size:cover;
    background-position:top;
    height:auto;
    
    
}
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background-color: #59cfa4;
    color: white;
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
}
select{
    border: none;
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
}
select :nth-child(1){
    background-color: skyblue;
}
select :nth-child(2){
    background-color: pink;
}
select :nth-child(3){
    background-color: lightgrey;
}
select option:hover{
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
}


input[type=radio]{
    accent-color:aliceblue ;
}
input[type=radio]:focus{
    accent-color:#becce8;
}

.footer-form p{
    text-align: center;
    font-family: serif;
}
.footer-form form p{
    margin-left: 0;
    margin-bottom: 0.5em;
    font-family: serif;
    text-align: left;
}
.footer-form button {
    position: absolute;
    bottom: 5%;
    right: 5%;
  }
  input[type="radio"]+label{
    font-family:sans-serif;
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
  }

  input[type="radio"][id="html"] + label {
    background: linear-gradient(to bottom right,orange, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  input[type="radio"][id="html"] + label::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png);
    background-size: cover;
    background-position: center;
  }
  input[type="radio"][id="css"] + label {
    background: linear-gradient(to top right, blue, white,blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
  }
  input[type="radio"][id="css"] + label::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png);
    background-size: cover;
    background-position: center;
  }
  input[type="radio"][id="javascript"] + label {
     background: linear-gradient(to bottom right,orange, rgba(255, 208, 0, 0.485));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  input[type="radio"][id="javascript"] + label::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    background-image: url(https://1000logos.net/wp-content/uploads/2020/09/JavaScript-Logo.png);
    background-size: cover;
    background-position: center;
  }
 
  
 button {
    transition: ease-out 500ms bottom;
    background-color: aliceblue;
    border: none;
    border-radius: 5%;
    cursor: url(https://cdn.custom-cursor.com/db/10281/32/vsco-shell-and-a-fish-pointer.png) , pointer!important;
    
}
button::before {
    content: "";
    z-index: -100;
    position: absolute;
   border-radius: 7% 7% 7% 7% /25% 25% 25% 25%;
    display: inline;
    width: 110%;
    height: 150%;
    background: conic-gradient(
        red,orange,yellow,green,blue,purple,magenta,red
    );
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

button:hover{
    transition: ease-in 200ms bottom;
    bottom:6% ;
}


@media screen and (max-width: 794px) {
    body{
        overflow-x: hidden;
        
    }
    h1,h2,h3,p{
        font-size: smaller;
        


    }
   
  
    

    nav {
        align-items: center;
        text-align: center;
        position: sticky;
        font-size: smaller;
    }
    

    .nav-logo-title {
        display: none;
    }
    nav ul{
        padding-left: 0;
    }

    nav li {
        padding: 8px 12px;
    }

    nav a {
        font-size: 13px;
        text-transform: uppercase;
        text-align: center;
    }
    #header{
        top: 0;
    }
    .header-texts{
        padding-top: 5%;
    }
    .content{
        padding-left: 10%;
    }
    .content::after{
        overflow-x: hidden;
    }
    .content::before{
        left: 0%;
        width: 70%;
        top: 5%;
        overflow-x: hidden;
    }
    .content p{
        text-align: justify;
      
    }
    table{
        margin-top: 5%;
    }
    .content-aside aside{
        display: block;
        left: 20%;
        width: 50%;
        padding-left: 20%;
        
    }
    .content-aside aside ul{
        display: block;
    }
    .content-aside{
        position: relative;
        display: inline-block;
        align-content: center;
        overflow-x: hidden;
    }
    .row-first{
        display: flex;
        flex-direction: column;
        
    }
    .article{
        padding: 5%;
        width: 90%;
        position: relative;
        padding-bottom: 11%;
    }
    .row-first td{
        height: auto;
    }
    

    .article p, .article a{
        display:block;
    }
    table p{
        text-decoration-color: #becce8;
    }
    
   
    tr.row-first td.article:nth-child(1){
        
        background-size:cover;
        background-position: center;
    
  
       
    }
    tr.row-first td.article:nth-child(1):hover{
        background-image: url(https://images.theconversation.com/files/150289/original/image-20161215-13663-1o37rfi.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop);
        background-size:cover;
        background-position: center;
        height: auto;
    }
    tr.row-first td.article:nth-child(2){
        background-size:cover;
        background-position: center;
          
    }
    tr.row-first td.article:nth-child(2):hover{
        background-image: url(https://images.squarespace-cdn.com/content/v1/58617a5946c3c49fd7aa0f94/1677611601683-9F59FRN6UIFMCRV7M1LO/Lysmata+amboinensis+1200px+x+1200px+png+comp.png?format=2500w);
        background-size:cover;
        background-position: center;
        height: auto;
    }
    tr.row-first td.article:nth-child(3){
        background-size:cover;
        background-position: center;
        
        
    }
    tr.row-first td.article:nth-child(3):hover{
        background-image: url(https://awsimages.detik.net.id/community/media/visual/2021/08/13/kerang-kima-1.jpeg?w=1200);
        background-size:cover;
        background-position: center;
        height: auto;
    }
    .article a{
      
        position: absolute;
        text-align: center;
        border-radius: 2pc;
        left: 37%;
        width:25%;
        padding: 2%;
        padding-top: 2%;
        height: 10%;
        box-shadow: 2px 2px 50% 2px black;
        transition: width height 200ms ease-in;
    }
    .article a::before {
      display: none;
    }
    .row-second {
        border-collapse: separate;
        display: flex;
        background-size: 125%;
        background-position: left;
        width: 100%;
    }
    .row-second img{
          visibility: hidden;
    }
    .article-long{
        padding: 4%;
        padding-left: 12%;
        text-align: justify;
    }
    .creativity-wrapper{
        left: 0;
        position: relative;
        width: 100%;
        animation:none; 
    }
    .creativity{
        margin-top: 10%;
        margin-bottom: 10%;
        width: 100%;
        overflow: hidden;
    }
    .mini-one{ 
        position:relative;
        left: 0;
        width: 100%;
        float: left;
    }
    .mini-two{
        position:relative;
        left: 0;
        width: 100%;
        float: left;
    }
    .mini-three{
        position:relative;
        left: 0;
        width: 100%;
        float: left;
     
    }
    .mini-four{
        position:relative;
        left: 0;
        width: 100%;
        float: left;
    }
    .mini-content{
        display: inline;
        float: left;
        width: 53%;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
        
    }
    
    .creativity h2{
        margin-top: 0;
    }
   
    .creativity-wrapper img{
    display: inline;
    float: left;
    width: 37%;
 
    
    
    }
    
    .footer-logo{
        margin-right: 0%;
        margin-left: 30%;
        margin-bottom: 5%;
        position: relative;
        right: 0;
        text-align: center;
        display: inline;
        float: left;
        width: 35%;
        font-size: smaller;
    }
    .footer-logo p{
        width: 100%;
    }
    .footer-form:hover{
        transform: none;
        }
    .footer-form{
        transform: skewY(0deg);
        transition: 0s;
        margin-left: 10%;
        display: inline-block;
        position: relative;
        width: 80%;
        background-color:#56ae91d8;
        margin-bottom: 5%;
    }
    .footer-credit{
        margin-right: 0%;
        margin-left: 60%;
        position:relative;
        display: inline;
        font-size: smaller;
    }
    .footer-credit h3:nth-child(1)::after{
        text-align: end;
    }
    .footer-credit h3:nth-child(2)::after{
        text-align: end; 
    }
    footer{
        display: flex;
        margin-top: 5%;
        position:relative;
        width: 100%;
        background-image: url(https://i.pinimg.com/originals/b4/b6/a7/b4b6a73a605112d9e07d3211fe7c0a47.png);
        background-size:cover;
        background-position:top;
        height:auto;
        flex-direction: column;
        justify-content: center;
        font-weight: bold;
    }
  
  
}