@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&family=Spline+Sans+Mono:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&family=Roboto:wght@300;400&family=Spline+Sans+Mono:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Francois+One&family=Passion+One&family=Quicksand:wght@500&family=Roboto:wght@300;400&family=Spline+Sans+Mono:wght@700&display=swap');



body {

    color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
    font-size: 50px;

    overflow-x: hidden;
    height: auto;
    width: auto;
    background: linear-gradient(100deg, rgb(100, 100, 100) 50%, rgb(0, 0, 0) 100%);
    animation: gradient 6s infinite linear;
    background-size: 500%;
}

a {

    color: white;
    text-decoration: none;
    transition: 1s;
}

a:hover {

    color: gray;
}

.logo {
    font-family: 'Spline Sans Mono', monospace;
    display: inline-block;
}

#black {

    animation: ani 2.5s forwards;
    font-size: 200px;
    font-family: 'Spline Sans Mono', monospace;
    text-shadow: 
        0 0 10px rgba(207, 207, 207, 0.85),
        0 0 15px rgba(179, 179, 179, 0.85),
        0 0 30px rgba(169, 169, 169, 0.85),
        0 0 48px rgba(143, 143, 143, 0.85),
        0 0 62px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 98px rgba(60, 60, 60, 0.85);
    
    max-width: 100%;
    transition: 1s;
}

@keyframes ani {

    0% {opacity: 0;}
    100% {opacity: 1;}
}


#black:hover {

    text-shadow: 
        0 0 20px rgba(207, 207, 207, 0.85),
        0 0 35px rgba(179, 179, 179, 0.85),
        0 0 40px rgba(169, 169, 169, 0.85),
        0 0 50px rgba(143, 143, 143, 0.85),
        0 0 65px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 100px rgba(60, 60, 60, 0.85);

    transition: 1s;
}


#prog {

    animation: ani 4.5s forwards;

    font-size: 80px;
    font-family: 'Spline Sans Mono', monospace;
    margin-right: -50%;
    text-decoration: underline;

}

@keyframes ani {

    0% {opacity: 0;}
    100% {opacity: 1;}
}

.d{

    font-size: 50px;
    background: linear-gradient(120deg, rgb(180, 180, 180) 10%, rgb(0, 0, 0) 100%);
    padding: 5px;
    border: 5px solid white;
    margin-left: 8%;
    margin-right: 8%;
    border-radius: 10px;
    transition: all 0.3s ease;


}

.d:hover{

    background: linear-gradient(120deg, rgb(180, 180, 180) 20%, rgb(0, 0, 0) 100%);
    animation: gradient 5s infinite linear;
    background-size: 500%;
    transform: scale(1.1);
}


.dbutton {

    font-family: 'Francois One', sans-serif;
}

#guids {

    animation: ani 2.5s forwards;

    font-size: 200px;
    font-family: 'Spline Sans Mono', monospace;
    text-shadow: 
        0 0 10px rgba(207, 207, 207, 0.85),
        0 0 15px rgba(179, 179, 179, 0.85),
        0 0 30px rgba(169, 169, 169, 0.85),
        0 0 48px rgba(143, 143, 143, 0.85),
        0 0 62px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 98px rgba(60, 60, 60, 0.85);
    transition: 1s;

}

@keyframes ani {

    0% {opacity: 0;}
    100% {opacity: 1;}
}


#guids:hover {

    text-shadow: 
        0 0 20px rgba(207, 207, 207, 0.85),
        0 0 35px rgba(179, 179, 179, 0.85),
        0 0 40px rgba(169, 169, 169, 0.85),
        0 0 50px rgba(143, 143, 143, 0.85),
        0 0 65px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 100px rgba(60, 60, 60, 0.85);

    transition: 1s;
}

.help {
    justify-content: center;
    border: 5px solid white;
    margin-right: 5%;
    margin-left: 5%;
    background: linear-gradient(80deg, rgb(174, 174, 174) 20%, rgb(0, 0, 0) 100%);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.help:hover {

    background: linear-gradient(80deg, rgb(162, 162, 162) 50%, rgba(0, 0, 0) 100%);
    animation: gradient 10s infinite linear;
    background-size: 200%;
    transform: scale(1.1);
}

@keyframes gradient {

    0% {
        background-position: 80% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 80% 0%;
    }
}

#copyds {

    color: white;
    transition: 1s;
}

#copyds:hover {

    color: gray;
    transition: 1s;
}

#copyemail {

    color: white;
    transition: 1s;
}

#copyemail:hover {

    color: gray;
    transition: 1s;
}

img {

    max-width: 80%;
    border-radius: 20px;
    box-shadow: 10px, 10px, 50px black;
    height: auto;
    transition: all 0.3s ease;
}

img:hover {

    transform: scale(1.2);
}

#rec {

    animation: ani 2.5s forwards;

    font-size: 200px;
    font-family: 'Spline Sans Mono', monospace;
    text-shadow: 
        0 0 10px rgba(207, 207, 207, 0.85),
        0 0 15px rgba(179, 179, 179, 0.85),
        0 0 30px rgba(169, 169, 169, 0.85),
        0 0 48px rgba(143, 143, 143, 0.85),
        0 0 62px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 98px rgba(60, 60, 60, 0.85);
    transition: 1s;

}

#rec:hover {

    text-shadow: 
        0 0 20px rgba(207, 207, 207, 0.85),
        0 0 35px rgba(179, 179, 179, 0.85),
        0 0 40px rgba(169, 169, 169, 0.85),
        0 0 50px rgba(143, 143, 143, 0.85),
        0 0 65px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 100px rgba(60, 60, 60, 0.85);

    transition: 1s;
}

#er {

    animation: ani 2.5s forwards;

    font-size: 300px;
    font-family: 'Spline Sans Mono', monospace;
    text-shadow: 
        0 0 10px rgba(207, 207, 207, 0.85),
        0 0 15px rgba(179, 179, 179, 0.85),
        0 0 30px rgba(169, 169, 169, 0.85),
        0 0 48px rgba(143, 143, 143, 0.85),
        0 0 62px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 98px rgba(60, 60, 60, 0.85);
    transition: 1s;

}

#er:hover {

    text-shadow: 
        0 0 20px rgba(207, 207, 207, 0.85),
        0 0 35px rgba(179, 179, 179, 0.85),
        0 0 40px rgba(169, 169, 169, 0.85),
        0 0 50px rgba(143, 143, 143, 0.85),
        0 0 65px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 100px rgba(60, 60, 60, 0.85);

    transition: 1s;
}

#nf {

    animation: ani 2.5s forwards;

    font-size: 100px;
    font-family: 'Spline Sans Mono', monospace;
    text-shadow: 
        0 0 10px rgba(207, 207, 207, 0.85),
        0 0 15px rgba(179, 179, 179, 0.85),
        0 0 30px rgba(169, 169, 169, 0.85),
        0 0 48px rgba(143, 143, 143, 0.85),
        0 0 62px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 98px rgba(60, 60, 60, 0.85);
    transition: 1s;

}

#nf:hover {

    text-shadow: 
        0 0 20px rgba(207, 207, 207, 0.85),
        0 0 35px rgba(179, 179, 179, 0.85),
        0 0 40px rgba(169, 169, 169, 0.85),
        0 0 50px rgba(143, 143, 143, 0.85),
        0 0 65px rgba(123, 123, 123, 0.85),
        0 0 80px rgba(84, 84, 84, 0.85),
        0 0 100px rgba(60, 60, 60, 0.85);

    transition: 1s;
}