@font-face {
    font-family: "Pixeloid Sans";
    src: url("../fonts/PixeloidSans.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Pixeloid Sans";
  src: url("../fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: bold;
}

body {
    font-family: "Pixeloid Sans";
}

h1{
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(24px, 4vw, 64px);
}

body{
    padding: 4vmax;
    font-family: 'Pixeloid Sans';
    
    button{
        display: flex;
        margin: auto;
        font-family: 'Pixeloid Sans';
        font-weight: bold;
        text-transform: uppercase;
        border: 0;
        background: none;
        line-height: 62px;
        font-size: 28px;
        
        
        &:before{
            content: '';
            display: block;
            width: 22px;
            background-image: url('../img/button-left.svg');
            background-size: 100% 100%;
        }
        
        & span{
            background-image: url('../img/button-body.svg');
            background-size: auto 100%;
        }
        
        &:after{
            content: '';
            display: block;
            width: 22px;
            background-image: url('../img/button-right.svg');
            background-size: 100% 100%;
        }
        
        &:active{
            
            &:before{
                background-image: url('../img/button-left-pressed.svg');
            }
            
            & span{
                background-image: url('../img/button-body-pressed.svg');
            }
            
            &:after{
                background-image: url('../img/button-right-pressed.svg');
            }
        }
    }
    
    & table{
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 2rem;
        
        & td, & th{
            text-align: left;
            padding: .5rem;
        }
        
        & th{
            font-weight: normal;
            color: #777;
            border-bottom: 2px solid #000;
        }
        
        & td{
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        
        & tbody{
            font-size: clamp(18px, 3vw, 42px);
            
            & tr:nth-child(odd){
                
                & td{                
                    background-color: #00000010;
                }
            }
        }
    }
}