/* 
Retro Shadow Buttons written by Amanbeer Khanduja.
The default font used here is Roboto Mono, feel free to change it to whatever you like.
(I recommend monospaced fonts to match the vibe.)
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap');

.retro{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    padding: 0.375rem 0.75rem;

    line-height: 1.5;
    background: #28cb02;
    color: #1b1a17;
    font-family: 'Press Start 2P', cursive;
    font-weight: 400;
    text-align: left;
    border: 3px solid #1b1a17!important;
    border-radius: 0;
    box-shadow: 3px 3px black, 5px 5px white;
    padding-right: 5%;
    margin-top: 20px;
}
.retro2{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    padding: 0.375rem 0.75rem;

    line-height: 1.5;
    background: #1b1a17;
    color: #28cb02;
    font-family: 'Press Start 2P', cursive;
    font-weight: 400;
    text-align: left;
    border: 3px solid #28cb02!important;
    border-radius: 0;
    box-shadow: 3px 3px #28cb02, 5px 5px black;
    padding-right: 5%;
    margin-top: 20px;
    cursor: pointer;
}

.retro2:hover{
    color: #1b1a17;
    background: #28cb02;
}

.retro2:active{
    background-color: #1b1a17!important;
    color: #28cb02!important;
    box-shadow: 0px 0px black;
    transform: translateX(5px) translateY(3px);
}

.retro:hover{
    color: #28cb02;
    background: #1b1a17;
}

.retro:active{
    background-color: #28cb02!important;
    color: #1b1a17!important;
    box-shadow: 0px 0px white;
    transform: translateX(5px) translateY(2px); 
}

.rbtn-small{
    box-shadow: 2px 2px black, 4px 4px #28cb02;
    padding:10px;
}

.rbtn-big{
    box-shadow: 2px 2px black, 3px 3px white;
    padding: 20px;
}

.retro-img{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    font-size: 1rem;
    background: white;
    color: black;
    font-size: 20px;
    font-family: 'Roboto Mono', sans-serif;
    font-weight: 400;
    text-align: center;
    border-radius: 0;
    box-shadow: 3px 3px black, 5px 5px white;
}

.retro-img:active{
    background-color: white!important;
    color: black!important;
    box-shadow: 0px 0px white;
    transform: translateX(5px) translateY(2px); 
}