/* ===========================
KAELLYNXEN TOS
=========================== */

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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body{

    background:#000;

    color:#b5b5b5;

    font-family:"VT323", monospace;

    font-size:22px;

    overflow-x:hidden;

}



.container{

    width:1000px;

    max-width:90%;

    margin:30px auto;

}



/* ===========================
HEADER
=========================== */


.tos-header{

    background:#000;

    border:2px solid #32145c;

    border-radius:14px;

    padding:25px;

    margin-bottom:25px;


    box-shadow:

        0 0 5px rgba(80,255,120,.45),

        0 0 15px rgba(80,255,120,.25),

        0 0 35px rgba(80,255,120,.12);

}



.tos-header h1{

    text-align:center;

    color:#c9b6eb;

    font-size:60px;

    font-weight:normal;

    letter-spacing:6px;

}



/* ===========================
FIXED GIF
=========================== */


.tos-gif{

    position:fixed;

    right:35px;

    bottom:35px;

    width:140px;

    z-index:50;

    image-rendering:pixelated;

    pointer-events:none;

}



/* ===========================
MAIN TOS BOX
=========================== */


.tos-box{

    background:#000;

    border:2px solid #32145c;

    border-radius:14px;

    padding:30px;

    margin-bottom:25px;


    box-shadow:

        0 0 5px rgba(80,255,120,.45),

        0 0 15px rgba(80,255,120,.25),

        0 0 35px rgba(80,255,120,.12);

}



.tos-box h2{

    text-align:center;

    color:#c9b6eb;

    font-size:38px;

    font-weight:normal;

    letter-spacing:3px;

    margin-bottom:25px;

}

/* ===========================
TOS CONTENT
=========================== */


.tos-content{

    color:#b5b5b5;

    font-size:25px;

    line-height:1.5;

    letter-spacing:1px;

}



.tos-content h3{

    color:#7ab84a;

    font-size:32px;

    font-weight:normal;

    letter-spacing:3px;

    margin-top:25px;

    margin-bottom:10px;

}



.tos-content p{

    margin-bottom:15px;

}



.tos-content strong{

    color:#c9b6eb;

    font-weight:normal;

}



.tos-content a{

    color:#7ab84a;

    text-decoration:none;

}



.tos-content a:hover{

    color:#c9b6eb;

}



/* ===========================
FOOTER
=========================== */


.tos-footer{

    text-align:center;

    color:#b5b5b5;

    padding:25px;

    font-size:22px;

}



.tos-footer p{

    margin:8px;

}



/* ===========================
HOVER DETAILS
=========================== */


.tos-box:hover{

    border-color:#6640a3;

    box-shadow:

        0 0 6px rgba(80,255,120,.55),

        0 0 18px rgba(80,255,120,.30),

        0 0 40px rgba(80,255,120,.15);

}



.tos-gif{

    transition:.25s;

}



.tos-gif:hover{

    transform:translateY(-8px);

}



/* ===========================
MOBILE
=========================== */


@media(max-width:700px){


    .container{

        max-width:95%;

    }


    .tos-header h1{

        font-size:45px;

    }


    .tos-box{

        padding:18px;

    }


    .tos-box h2{

        font-size:30px;

    }


    .tos-content{

        font-size:21px;

    }


    .tos-gif{

        width:90px;

        right:15px;

        bottom:15px;

    }


}