@import url('https://rangerbot.hu/css/fonts/nasalization.css');

.link-sr {
    color: #ea9c01;
    text-decoration: none;
    position: relative;
    font-weight: bold;
}
.link-sr::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease-in-out;
}
.link-sr:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.animtext {
    position: relative;
}
.animtext::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease-in-out;
}
.animtext:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.link-rb {
    color: #0087ff;
    text-decoration: none;
    position: relative;
    font-weight: bold;
}
.link-rb::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: right;
    transition: transform 500ms ease-in-out;
}
.link-rb:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.sr_ty_base:hover .sr_ty {
    opacity: 1;
}
.sr_ty {
    line-height: 10px;
    color: #ffffffcc;
    opacity: 0;
    transition: 500ms ease-in-out;
}
/*
.sr_ty_base {
    position: relative;
}
.sr_ty_base:hover .sr_ty::after {
    bottom: 0px;
}
.sr_ty {
    color: white;

    position: relative;
}
.sr_ty::after {
    content: 'Köszönjük!';
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 15px;
    color: darkblue;

    transition: 500ms ease-in;
}
.sr_ty:hover::after {
    bottom: 0px;
}
*/

.easteregg-chin {
    width: 60px;
    height: 60px;

    opacity: 1%;

    margin-inline: 44%;
    margin-top: 30px;
    margin-bottom: -15px;
    
    transition: 350ms ease-in-out;
}
.easteregg-chin:hover {
    width: 119px;
    height: 119px;

    opacity: 75%;

    margin-inline: 40%;
    margin-top: 0px;
    margin-bottom: -25px;
}

.copyHover {
    padding-left:7%;
}

html {
    scroll-behavior: smooth;
}

.copy {
    opacity: 0;

    cursor: pointer;
    
    background-color: rgba(0, 0, 0, 0.4);

    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;

    transition: 350ms ease-in-out;
}

.copyHover:hover .copy {
    opacity: 75%;
}

.copyHoverImg:hover .copy {
    opacity: 75%;
}

.copy:hover {
    opacity: 99% !important;
}

.back {
    opacity: 75%;

    cursor: pointer;
    
    background-color: rgba(0, 135, 255, 0.5);
    color: white;

    font-size: 25px;

    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 9px;
    padding-right: 8px;
    border-radius: 25px;

    transition: 350ms ease-in-out;
}

.back:hover {
    opacity: 100% !important;
}

.spoticard-font {
    font-weight: 100;
    font-size: 55%;
    color: #fff;
}
.spoticard-font-top {
    font-weight: bold;
    font-size: 150%;
    color: #fff;
}.spoticard-font-alt {
    font-weight: 300;
    font-size: 55%;
    color: #fff;
}
.spoticard-font-name {
    font-weight: 500;
}

.spoticard-quote-left {
    font-weight: 100;
    font-size: 100%;
    color: #fff;
    text-align: left;
    display: block;
    margin-left: 20%;
}
.spoticard-quote-right {
    font-weight: 100;
    font-size: 100%;
    color: #fff;
    text-align: right;
    display: block;
    margin-right: 20%;
}
.spoticard-quote {
    font-weight: 300;
    font-size: 100%;
    color: #fff;
    display: block;
}
.spoticard-quote-alt {
    font-weight: 100;
    font-size: 100%;
    color: #fff;
}
.spoticard-quote-line {
    width: 70%;
}
.spoticard-quote-line-long {
    width: 90%;
    margin-block: 35px;
}

.spoticard-go {
    font-size: 25;
    color: #d1aaaa;
    top: 2px;
    left: 60%;
    text-align: right;
    display: inline-block !important;

    opacity: 50%;

    transition: 350ms ease-in-out;
}
.spoticard-go:hover {
    opacity: 100%;
    cursor: pointer;
}

.me-img {
    opacity: 80%;
    border-radius: 50px;
}

.the-count span {
    transition: 1000ms ease-in-out;
}