@font-face {
    font-family: Gaegu;
    src: url(../font/Gaegu-Regular.ttf);
}
body{        
    font-family: Gaegu;
    font-size: 30px;
    }

 pre{
    font-size: 20px;
    }


    .btn:hover{
        border-color: orange;
        color: white;
        box-shadow: 0 0.5em 0.5em -0.4em yellow;
        transform: translateY(-10px);
        border: 1px solid;
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #427388;
    
    }
    button{
        font-weight: 700;
        position: relative;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 8px 16px;
        
        min-width: 8em;
        text-align: center;
        color: #fff;
        background-image: linear-gradient(to bottom, #f12828, #a00332, #9f0f31), linear-gradient(to bottom, #ae0034, #6f094c);
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), inset 0 -1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
        transition-property: transform, filter;
        transition-duration: 0.2s;
        will-change: transform;
        resize: both;
        
    }
    button::after{
        --overflow-x: 4px;
        --snow-image: url("https://assets.codepen.io/4175254/snow-cap-test-2.png");
        content: "";
        position: absolute;
        top: -6px;
        left: calc(var(--overflow-x) * -1);
        border-image-source: var(--snow-image);
        border-image-slice: calc(6 * 56 / 20) fill;
        border-image-width: calc(28px / 3);
        border-image-repeat: round;
        width: calc(100% + var(--overflow-x) * 2);
        height: 28px;
        filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
        opacity: 1;
        -webkit-animation: fade-in 2s;
                animation: fade-in 2s;
    }
    h1{
        font-size: 50px;
        margin-top: 50px;
    }
    h3{
        margin-top: 20px;
    }

    body::after{
        --overflow-x: 4px;
        --snow-image: url("https://assets.codepen.io/4175254/snow-cap-test-2.png");
        content: "";
        position: absolute;
        top: -5px;
        left: calc(var(--overflow-x) * -1);
        border-image-source: var(--snow-image);
        border-image-slice: calc(6 * 56 / 20) fill;
        border-image-width: calc(28px / 3);
        border-image-repeat: round;
        width: calc(100% + var(--overflow-x) * 2);
        height: 28px;
        filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
        opacity: 1;
        -webkit-animation: fade-in 2s;
                animation: fade-in 2s;
    }
    button{
       cursor: pointer;
    }
    span{
        color: red;
        font-size: 20px;
    }
    a{
        cursor: pointer;
    }
    form{
        margin-bottom: 30px;
    }