@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
#raisedH {
    animation: raiseHand 1s linear;
    animation-iteration-count: 1;
    animation-delay: 1s;
    transform-origin: left;
}

@keyframes raiseHand {
    from {
        transform: rotate3d(1, 0, 1, 2deg);
    }
    to {
        transform: rotate3d(1, 0, 1, -2deg);
    }
}

#onH {
    animation: onHA 1s linear;
    animation-delay: 1s;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes onHA {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(20deg);
    }
}

#gmailDiv {
    cursor: pointer;
}

#copyID {
    cursor: pointer;
}

.ruleDiv {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
}

.ruleImgDiv {
    position: relative;
    transition: all 0.5s;
}

#ruleImg {
    width: 150px;
    cursor: pointer;
}

#ruleDivText {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0px;
    right: 30px;
    width: 400px;
    border-style: none;
    padding: 20px;
    border-radius: 10px;
    background: white;
    background: linear-gradient( to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(2rem);
    box-shadow: 10px 10px 100px rgb(161, 161, 161);
    transition: all 0.3s;
    font-family: "Manrope", sans-serif;
}

#ruleDivText h1 {
    text-align: center;
}

#ruleDivText h1:hover {
    text-decoration: underline;
}

#ruleDivText p {
    font-family: "Roboto", sans-serif;
    text-align: justify;
    font-size: 0.8rem;
    margin-top: 12px;
}

.ruleImgDiv:hover>#ruleDivText {
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width: 520px) {
    #ruleDivText {
        width: 350px;
        right: 20px;
    }
}

@media only screen and (max-width: 460px) {
    #ruleDivText {
        width: 320px;
    }
}

@media only screen and (max-width: 420px) {
    #ruleDivText {
        width: 300px;
    }
}

@media only screen and (max-width: 400px) {
    #ruleDivText {
        width: 250px;
    }
}

@media only screen and (max-width: 350px) {
    #ruleDivText {
        width: 200px;
    }
}