@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');

.module {
    cursor: url('path-to-image.png'), auto;
}

body {
    /*cursor: none;*/
    background-color: #2e2e2e;
    margin: 0;
    transition: all 200ms;
    will-change: background;
}

.clear {
    clear: both;
}

.main {
    padding-top: 5em;
    padding-left: 10em;
}

.main h1 {
    position: relative;
    top: 5%;
    left: 5%;
    color: white;
    font-family: 'Noto Sans', sans-serif;
    font-size: 7em;
    padding-right: 1em;
    /* Animation */
    background: linear-gradient(to right, #ffffff 10%, #777777 50%, #ffffff 60%);
    background-clip: border-box;
    background-size: 200% auto;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 5s linear infinite;
}

.main h2 {
    position: absolute;
    top: 45%;
    left: 25%;
    color: white;
    font-family: 'Noto Sans', sans-serif;
    font-size: 2em;
    padding-right: 2em;
    background: linear-gradient(to right, #ffffff 10%, #777777 50%, #ffffff 60%);
    background-clip: border-box;
    background-size: 200% auto;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 5s linear infinite;
}

.main p{
    position: relative;
    margin-top: 10%;
    left: 0;
    color: white;
    font-family: "Open Sans", sans-serif;
    font-size: 1.4em;
    padding-right: 3em;
    width: 50%;
}

.cit {
    color: #777;
    position: relative;
    font-family: 'Lexend Mega', sans-serif;
    font-size: 2em;
    width: 40%;
    margin-top: -12%;
    left: 45%;
    text-align: right;
}

#particle-slider {
    position: relative;
    float: right;
    width: 80%;
    height: 60%;
    visibility: visible;
    display: inline;
}


.logo {
    position: relative;
    display: inline-block;
    float: left;
    width: 20%;
    z-index: 2;
    /*animation: spin 5s linear infinite;*/
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@keyframes spin {
    0%{
        transform: rotateY(270deg);
    }
    100%{
        transform: rotateY(450deg);
    }
}

/* 3D Hover Effect image */
#tilt {
    display: block;
    height: auto;
    width: 20%;
    margin: 0 auto;
    transition: box-shadow 0.1s, transform 0.1s;
}

#tilt:hover {
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
}

.socials{
    position: absolute;
    top: 65%;
    margin-left: 20em;
}

.socials a {
    position: relative;
    height: 2.6em;
    margin-left: 5px;
    font-size: 2em;
    border-radius: 20%;
}

.social {
    display: inline-block;
    height: 4em;
    transition: box-shadow 0.1s, transform 0.1s;
    float: left;
}

.social:nth-child(1){
    color: #3f729b;
}
.social:hover:nth-child(1){
    box-shadow: 0px 0px 30px #3f729b;
    color: white;
}
.social:nth-child(2){
    color: #cb2027;
}
.social:hover:nth-child(2){
    box-shadow: 0px 0px 30px #cb2027;
    color: white;
}
.social:nth-child(3){
    color: #00aced;
}
.social:hover:nth-child(3){
    box-shadow: 0px 0px 30px #00aced;
    color: white;
}
.social:nth-child(4){
    color:  #ea4c89;
}
.social:hover:nth-child(4){
    box-shadow: 0px 0px 30px #ea4c89;
    color: white;
}
.social:nth-child(5){
    color:  #41bf08;
}
.social:hover:nth-child(5){
    box-shadow: 0px 0px 30px #41bf08;
    color: white;
}


/* Icon settings */
.fa {
    padding: 20px;
    font-size: 35px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}
/* Hackerrank icons */
.fab {
    padding: 20px;
    font-size: 40px;
    text-align: center;
    text-decoration: none;
}

.fas {
    padding: 20px;
    font-size: 40px;
    text-align: center;
    text-decoration: none;
}

/* Main buttons */
.buttons{
    position: absolute;
    top:60%;
    margin-left: 55em;
    width: 40%;
}

.buttons a {
    display: inline-block;
    font-family: 'Noto Sans', sans-serif;
    color: white;
    position: relative;
    height: 2em;
    width: 40%;
    margin-left: 1em;
    margin-bottom: 1em;
    font-size: 2em;
    /*cursor: none;*/
    text-align: center;
    text-decoration: none;
}

.btn {
    display: inline-block;
    transition: box-shadow 0.1s, transform 0.1s;
}
.btn:nth-child(1){
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    color: white;
}
.btn:hover:nth-child(1){
    box-shadow: 0px 0px 30px limegreen;
    color: white
}
.btn:nth-child(2){
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    color: white
}
.btn:hover:nth-child(2){
    box-shadow: 0px 0px 30px deepskyblue;
    color: white
}
.btn:nth-child(3){
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    color: white;
}
.btn:hover:nth-child(3){
    box-shadow: 0px 0px 30px orangered;
    color: white
}
.btn:nth-child(4){
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    color: white
}
.btn:hover:nth-child(4){
    box-shadow: 0px 0px 30px mediumpurple;
    color: white
}

/* Temporary popup */
#mydiv{
    position: relative;
    left: 1em;
    top:5%;
    width: 10%;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
}

/* Hiding mobile version element */
#nome {
    visibility: hidden;
    display: none;
}

.mobile{
    visibility: hidden;
    display: none;
}
/*####################################################################################################*/
/*########################################## MOBILE VERSION ##########################################*/
/*####################################################################################################*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #particle-slider {
        display: none;
        visibility: hidden;
    }
    #nome {
        visibility: visible;
        display: block;
        position: relative;
        font-size: 2em;
        float: right;
        width: 100%;
        margin: 0;
    }

    .mobile{
        display: block;
        visibility: visible;
    }

    .desktop{
        display: none;
        visibility: hidden;
    }

    #profilo{
        width: 80%;
    }

    .main {
        padding-top: 3em;
        padding-left: 2em;
    }


    .main h2 {
        position: relative;
        margin-top: 25%;
        color: white;
        font-family: 'Noto Sans', sans-serif;
        font-size: 1.2em;
        left: 5%;
    }

    .main p{
        position: relative;
        margin-top: 10%;
        left: 0;
        color: white;
        font-family: "Open Sans", sans-serif;
        font-size: 1.4em;
        padding-right: 3em;
        width: 50%;
    }

    .cit {
        color: #777;
        position: relative;
        font-family: 'Lexend Mega', sans-serif;
        font-size: 2em;
        width: 40%;
        margin-top: -12%;
        left: 35%;
        visibility: hidden;
    }

    .logo {
        display: none;
        visibility: hidden;
    }

    #descrizione{
        text-align: center;
    }

    .socials{
        position: relative;
        margin-left: 1em;
        top: 0%;
    }

    .socials a {
        position: relative;
        height: 3.5em;
        margin-left: 0;
        font-size: 2em;
        /*cursor: none;*/
        width: 20%;
    }

    .social {
        display: inline-block;
        height: 4em;
        float: left;
    }

    /* Main buttons */
    .buttons{
        position: relative;
        margin-left: 5%;
        width: 80%;
        top: 0;
    }

    .buttons a {
        position: relative;
        height: 2em;
        width: 100%;
        margin-left: 1em;
        font-size: 2em;
    }

    /* Temporary popup */
    #mydiv{
        display: none;
        visibility: hidden;
    }
}


/* Macbook  ----------- */
@media only screen  and (min-width : 1224px) {
}

/* Notebook  ----------- */
@media only screen and (min-width: 768px) and (max-width: 1224px)  {

    .main {
        padding-top: 4em;
        padding-left: 3em;
    }

    .main h1 {

    }

    .main h2 {
        font-size: 1em;
    }

    #particle-slider {
        position: relative;
        float: right;
        width: 80%;
        height: 60%;
        visibility: visible;
        display: inline;
        top: -4em;
    }

    .draw{
        width: 80%;
    }

    .main p{
        position: relative;
        margin-top: 10%;
        left: 0;
        color: white;
        font-family: "Open Sans", sans-serif;
        font-size: 1.2em;
        padding-right: 3em;
        width: 50%;
    }

    .cit {
        color: #777;
        position: relative;
        font-family: 'Lexend Mega', sans-serif;
        font-size: 2em;
        width: 40%;
        margin-top: -20%;
        left: 45%;
        text-align: right;
    }


    .logo{
        position: relative;
        width: 1em;
    }

    /* Social Tags */
    .socials a {

        position: relative;
        height: 2.7em;
        margin-left: 5px;
        font-size: 1.5em;
        left: -50%;
    }

    .social {
        display: inline-block;
        height: 1.5em;
        float: left;
    }

    /* Icon settings */
    .fa {
        padding: 20px;
        font-size: 15px;
        text-align: center;
        text-decoration: none;
        margin: auto 2px;
    }
    /* Hackerrank icons */
    .fab {
        padding: 20px;
        font-size: 25px;
        text-align: center;
        text-decoration: none;
    }

    .fas {
        padding: 15px;
        font-size: 10px;
        text-align: center;
        text-decoration: none;
    }

    /* Main buttons */
    .buttons{
        position: relative;
        top:0;
        margin-left: 50%;
        width: 40%;
    }

    .buttons a {
        display: inline-block;
        font-family: 'Noto Sans', sans-serif;
        color: white;
        position: relative;
        height: 2em;
        width: 40%;
        margin-left: 1em;
        margin-bottom: 1em;
        font-size: 1.4em;
        /*cursor: none;*/
        text-align: center;
        text-decoration: none;
    }

    /* Temporary popup */
    #mydiv{
        position: absolute;
        left: 1em;
        top:5%;
        width: 10%;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        font-family: 'Noto Sans', sans-serif;
    }
}