body{background: linear-gradient(90deg,rgb(22, 29, 49),rgb(0, 0, 0))}
div#main-website{animation: load 1s ease-in-out}
div#main-website2{animation:load 1s ease-in-out}
div#loading-screen{opacity:0;animation:loading-screen 2s ease-in-out}
h1{color:white;font-family:'Arial Rounded MT';font-size:60px;}
h2{color:rgb(255, 217, 135);font-family:'Arial Rounded MT';font-size:35px;margin:5px;}
#index-title{color:white;}
a{color:rgb(150, 192, 255)};a:visited{color:rgb(150, 192, 255)};
table#page-title{position:relative;top:30%;}
button{padding:0px;border:0px;background:none;cursor:grab}
div img{width:150px;height:150px;}
#hover-activated:hover{color:cornflowerblue;}
#dot{width:1px;height:1px;border-radius:100%;border:6px solid;}
img#spain-map{
    filter:grayscale(100);filter:brightness(100);
    width:auto;height:200px;
}
img#python-logo{
    margin:20px;
    float:left;
    animation:rotate-bubble 5s infinite ease-in-out;
}
p{
    color:white;
    font-family:"Arial Rounded MT";
    font-size:25px;
    line-height:37px;
}
blockquote{
    font-style: italic;font-size:20px;
    color:white;
    font-family:"Arial Rounded MT";
}
#description-aboutme{
    width:950px;
    height:fit-content;
    border:5px white solid;border-radius: 1%;
    position:relative;
    left:30%;
    margin-top: 100px;
    padding-left:5%;padding-right:5%;
}
div#image-about-me{
    border:solid 5px white;border-radius:50%;
    width:150px;
    height:150px;
    overflow:hidden;
    animation: unhover 0.25s ease-in-out;
}

div#image-about-me:hover{
    animation: hover 0.25s ease-in-out;
    animation-fill-mode:both;
}

div#about-me{
    position:absolute;
    top:18%;left:19%;
    animation:bubble-little 2s infinite ease-in-out
}

div#custom-music{
    position:absolute;
    top:18%;right:19%;
    animation:bubble-little 2s infinite ease-in-out
}



/*--- Animation for the objects ---*/
.profile-picture{width:250px;height:250px;}
div#profile-picture{
    overflow:hidden;
    border-radius:50%;
    border:solid rgb(203, 245, 255) 10px;
    position:absolute;
    top:35%;left:42%;
    animation:bubble 3s infinite ease-in-out, unhover-pfp 0.25s ease-in-out;
    animation-fill-mode: both;
}
div#profile-picture:hover{
    animation:bubble 3s infinite ease-in-out, hover-pfp 0.25s ease-in-out;
    animation-fill-mode: both;
}


td:nth-child(1),td:nth-child(11){animation:bubble-little 6s infinite ease-in-out;animation-delay:0.2s}
td:nth-child(2),td:nth-child(12){animation:bubble-little 6s infinite ease-in-out;animation-delay:0.4s}
td:nth-child(3),td:nth-child(13){animation:bubble-little 6s infinite ease-in-out;animation-delay:0.6s}
td:nth-child(4),td:nth-child(14){animation:bubble-little 6s infinite ease-in-out;animation-delay:0.8s}
td:nth-child(5),td:nth-child(15){animation:bubble-little 6s infinite ease-in-out;animation-delay:1s}
td:nth-child(6),td:nth-child(16){animation:bubble-little 6s infinite ease-in-out;animation-delay:1.2s}
td:nth-child(7),td:nth-child(17){animation:bubble-little 6s infinite ease-in-out;animation-delay:1.4s}
td:nth-child(8){animation:bubble-little 6s infinite ease-in-out;animation-delay:1.6s}
td:nth-child(9){animation:bubble-little 6s infinite ease-in-out;animation-delay:1.8s}
td:nth-child(10){animation:bubble-little 6s infinite ease-in-out;animation-delay:2s}

@keyframes bubble{0%,100%{transform:translateY(-15px);}50%{transform:translateY(15px);}}
@keyframes bubble-little{0%,100%{transform:translateY(-5px);}50%{transform:translateY(5px);}}
@keyframes hover{100%{border-color:blueviolet;}}@keyframes unhover{0%{border-color:blueviolet;}}
@keyframes hover-pfp{100%{border-color:rgb(191, 126, 221);}}@keyframes unhover-pfp{0%{border-color:rgb(191, 126, 221);}}

@keyframes rotate-bubble{0%,100%{transform:translateY(-5px)rotate(5deg);}50%{transform:translateY(5px)rotate(-5deg);}}

@keyframes loading{0%{opacity:0}66%{opacity:0}}
@keyframes load{0%{opacity:0}100%{opacity:100}}
@keyframes loading-screen{0%{opacity:100;}60%{opacity:100}100%{opacity:0}}

@keyframes fade-out{0%{opacity:100}}
/*--- End of Animation for the objects ---*/