@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@1,300&display=swap');

@media (max-width:1200px) and (min-width:350px) {

#allBugs button{
        width: 30px;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;        
    }
}
.gradient {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(334deg, #6b97f7, #7525e2, #f7137e);
	background-size: 180% 180%;
	animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

html,body{
    overflow-x: clip;
}

body{
    font-family: 'Bai Jamjuree', sans-serif;
    box-sizing: border-box;
    margin: 0px;
    border: 0px;
    text-align: center;
    cursor: url('imagesPortfolio/spray.cur'), auto;
}

#logo {
    width: 70px;
    height: 60px;
    cursor: pointer;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#topHeader{
    display: block;
    margin: 0%;
}
#message{
    margin-bottom: 10%;
    display: block;
}
#countBugs{
    font-size: 40px;
    color: #efb3b6;
    margin-bottom: -1%;
}
button{
    cursor: url('imagesPortfolio/spray.cur'), auto;
}
#checkBtn{
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    box-sizing: content-box;
    padding: 50px;
}

#ptext{
    margin-bottom: -2%;
}
.bugSize{
    width: 50px;
    height: 50px;

}
/* ------------- bug motion -------------*/

@keyframes lgmotion {
    100%{
    transform: rotate(360deg);
}
    0.5% {
    transform: rotate3d(12deg,60deg,55deg);

}
}


/* ------   bug1  ----- */
@keyframes move1  {
    0%      {left:10vw; top:5vh;}
    25%     {left:20vh; top:10vh;}
    50%     {left:30vw; top:15vh}
    75%     {left:40vh; top:25vh;}
    100%    {left:20vw; top:20vh;}
}
#btn1Move{
    position: relative;
    animation-name: move1;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
}
#btn1{
    animation-name: lgmotion;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}


/* --------bug 2  --------  */

@keyframes move2  {
    0%      {left: 5vw; top: 5vh;}
    25%     {left: 10vw; top: 12vh;}
    50%     {left: 25vw; top: 2vh;}
    75%     {left: 10vw; top: 25vh;}
    100%    {left: 5vw; top: 20vh;}
}

#btn2Move{
    position: relative;
    animation-name: move2;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn2{animation-name: lgmotion;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    width: 70px;
    height: 70px;
}

/*  ------  bug 3 ---------- */

@keyframes move3  {
    0% {left: 15vw; top: 15vh;}
    25% {left: 20vw; top: 12vh;}
    50% {left: 30vw; top: 21vh;}
    75% {left: 40vw; top: 25vh;}
    100% {left: 52vw; top: 20vh;}
}

#btn3Move{
    position: relative;
    animation-name: move3;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn3{animation-name: lgmotion;
    animation-duration: 40s;
    animation-iteration-count: infinite;

}
/* ------------  bug 4 --------- */
@keyframes move4  {
    0% {left: 15vw; top: 15vh;}
    25% {left: 20vw; top: 12vh;}
    50% {left: 30vw; top: 1vh;}
    75% {left: 40vw; top: 5vh;}
    100% {left: 52vw; top: 10vh;}
}

#btn4Move{
    position: relative;
    animation-name: move4;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}

#btn4{animation-name: lgmotion;
    animation-duration: 11s;
    animation-iteration-count: infinite;
}

/* ------------  bug 5 --------- */
@keyframes move5  {
    0% {left: 0vw; top: 0vh;}
    25% {left: 21vw; top: 30vh;}
    50% {left: 75vw; top: -10vh;}
    75% {left: 46vw; top: 40vh;}
    100% {left: 50vw; top: 45vh;}
}

#btn5Move{
    position: relative;
    animation-name: move5;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 0.1s ease-in-out;
    
}

#btn5{animation-name: lgmotion;
    animation-duration: 18s;
    animation-iteration-count: infinite;
}
/* ------------  bug 6 --------- */
@keyframes move6  {
    0% {left: 5vw; top: 5vh;}
    25% {left: 20vw; top: 1vh;}
    50% {left: 10vw; top: 15vh;}
    75% {left: 0vw; top: 20vh;}
    100% {left: 2vw; top: 0vh;}
}

#btn6Move{
    position: relative;
    animation-name: move6;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn6{animation-name: lgmotion;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

/* ------------  bug 7 --------- */
@keyframes move7  {
    0% {left: 15vw; top: 0vh;}
    25% {left: 20vw; top: 5vh;}
    50% {left: 30vw; top: 11vh;}
    75% {left: 40vw; top: 15vh;}
    100% {left: 52vw; top: -2vh;}
}

#btn7Move{
    position: relative;
    animation-name: move7;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn7{animation-name: lgmotion;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}

/* ------------  bug 8 --------- */
@keyframes move8  {
    0% {left: 5vw; top: 35vh;}
    25% {left: 22vw; top: 14vh;}
    50% {left: 30vw; top: 21vh;}
    75% {left: 4vw; top: 25vh;}
    100% {left: 2vw; top: 20vh;}
}

#btn8Move{
    position: relative;
    animation-name: move8;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn8{animation-name: lgmotion;
    animation-duration: 17s;
    animation-iteration-count: infinite;
}

/* ------------  bug 9 --------- */
@keyframes move9  {
    0% {left: 15vw; top: 15vh;}
    25% {left: 20vw; top: 12vh;}
    50% {left: 30vw; top: 21vh;}
    75% {left: 40vw; top: -5vh;}
    100% {left: 52vw; top: -1vh;}
}

#btn9Move{
    position: relative;
    animation-name: move9;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn9{animation-name: lgmotion;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    width: 70px;
    height: 70px;

}

/* ------------  bug 10 --------- */
@keyframes move10  {
    0% {left: -15vw; top: 15vh;}
    25% {left: 0vw; top: 12vh;}
    50% {left: -20vw; top: -1vh;}
    75% {left: 0vw; top: 15vh;}
    100% {left: 2vw; top: 2vh;}
}

#btn10Move{
    position: relative;
    animation-name: move10;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn10{animation-name: lgmotion;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    width: 70px;
    height: 70px;

}

/* ------------  bug 11 --------- */
@keyframes move11  {
    0% {left: 5vw; top: 1vh;}
    25% {left: 0vw; top: 21vh;}
    50% {left: 3vw; top: -1vh;}
    75% {left: 12vw; top: 25vh;}
    100% {left: 2vw; top: 12vh;}
}

#btn11Move{
    position: relative;
    animation-name: move11;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn11{animation-name: lgmotion;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    width: 70px;
    height: 70px;

}

/* ------------  bug 12 --------- */
@keyframes move12  {
    0% {left: 15vw; top: 15vh;}
    25% {left: 10vw; top: 2vh;}
    50% {left: 12vw; top: 21vh;}
    75% {left: 4vw; top: 7vh;}
    100% {left: 12vw; top: 10vh;}
}

#btn12Move{
    position: relative;
    animation-name: move12;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    transition: 1s ease-in-out;
    
}
#btn12{animation-name: lgmotion;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    width: 70px;
    height: 70px;

}

/* --------------------Footer!!--------------- */
#bottomBar{
    width: 100%;
    position: fixed;
    bottom: 1vh;

}
#cname {
    width: 220px;
    left:10px;
}

#footerLogos {
    float: right;
    width: 120px;
}

h6{
    margin-bottom: -24px;
}

#logoGithub {
    width: 24px;
    height: 24px;
}

#logoLinkedIn {
    width: 24px;
    height: 24px;
}