@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');
@import url('https://css.gg/add-r.css');
body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
}
*{
    font-family: 'Outfit', sans-serif;
    color: white;
    background-color: rgb(61, 61, 83);
    text-shadow: whitesmoke 1px 0 10px;
}

.side {
    width: 25%;
    height: 100vh;
    background-color: rgb(115, 76, 206);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3em;
}

::placeholder {
    color:rgb(191, 212, 245);
}

.sh {
    margin-bottom: 7%;
    text-shadow:  whitesmoke 1px 0 10px;
    background: rgb(115, 76, 206);
}

.i {
    transition: all 0.5s;
    border-radius: 5px;
    padding: 5px;
    width: 75%;
    margin-bottom: 6%;
    border: none;
    background-color:   rgb(119,68,236);
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
    box-shadow:  rgb(48, 20, 119) 1px 0 10px;
}

.b {
    transition: all 0.5s;
    border-radius: 50px;
    padding: 5px;
    width: 40%;
    margin-bottom: 3%;
    border: none;
    background-color: rgb(119,68,236);
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
    box-shadow:  rgb(48, 20, 119) 1px 0 10px;

}

.i:hover {
    
    background-color: rgb(65, 45, 196);
    box-shadow: rgb(119,68,236) 1px 0 10px;

}
.b:hover {
    box-shadow: rgb(119,68,236) 1px 0 10px;
    
}


.b:active {
    background-color: rgb(48, 20, 119);
    box-shadow: rgb(119,68,236) 1px 0 10px;
}

.i:active {
    background-color: rgb(48, 20, 119);
    box-shadow: rgb(119,68,236) 1px 0 10px;
}

.rest {
    height: 100vh;
    width: calc(100% - 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.x {
    display: flex;
    flex-direction: row;
}

.headx{
    transition-duration: 0.5s;
    font-size: 200px;
    text-shadow: whitesmoke 0.5px 0 10px;}

.headx:hover {
    transform: scale(1.1);
    transition: all 0.5s;
}

.headxx {
    font-size: 50px;
    font-family: 'Gloria Hallelujah', cursive;
    margin-bottom: 5%;
    text-shadow: whitesmoke 1px 0 10px;
    text-align: center;
}

.headxx:hover {
    transform: scale(1.05);
    transition: all 0.5s;
}

.signup {
    transition:    all  0.5s;
    padding: 10px;
    background-color: rgb(119,68,236);
    border: none;
    border-radius: 6px;
    
   
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
    box-shadow: rgb(119,68,236) 1px 0 10px;
}

.signup:hover {

    background-color: rgb(65, 45, 196);

}

.signup:active {

    box-shadow: rgb(119,68,236) 1px 0 10px;

}