uccser/cs-field-guide

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

#firewall-sorting {
    font-family: monospace;
    
    :root {
        --my-start-width: 100%;
        --my-end-width: 95%;
    }

    img{
        width: 100%;
        max-height: 100%;
    }

    #firewall-header {
        text-align: center;
        overflow: hidden;
        width: 90vw;
        margin: auto;
    }

    #yourIP {
        background-color: #6610f2;
        text-align: center;
        color: white;
        width: 100%;
        float: left;
        vertical-align: top;
        font-size: 200%;
    }

    #healthBarContainer {
        background-color: black;
        text-align: center;
        overflow: hidden;
        width: 90vw;
        color: white;
        margin: auto;
        
    }
    
    #healthBarLabel {
        font-size: 200%;
    }

    #healthBar {
        text-align: center;
        overflow: hidden;
        margin: auto;
        float: left;
        min-height: 3vh;
        display: block;
        background-color: lime;
        width: 100%;
    }

    #firewall-body {
        overflow: hidden;
        width: 90vw;
        margin: auto;
    }

    #contentContainer {
        background: linear-gradient(black, white, black);
        text-align: center;
        overflow: hidden;
        width: 75%;
        height: 59vh;
        float: left;
        position: relative;
    }

    #portrait {
        height: 80%;
        width: 80%;
        position: relative;
        overflow: hidden;
        display: block;
    }

    #buttons {
        height: 100%;
    }

    .firewall-button {
        position: relative;
        color: white;
        padding: 1%;
        border: 0.5% solid #000000;
        z-index:10;
        border-radius: 15px;
        -moz-border-radius: 15px;
    }

    #accept {
        background-color: green;
        float: left;
        width: 15%;
        height: 20%;
    }

    #deny {
        background-color: red;
        float: right;
        width: 15%;
        height: 20%;
    }
    
    #restart {
        background-color: #6610f2;
        width: 100%;
    }

    #rules {
        position:relative;
        float: left;
        background-color: black;
        width: 25%;
        height: 59vh;
    }

    #rulesText {
        position: absolute;
        color: lime;
        background-color: black;
    }
    
    #rulesHeading {
        font-size: 300%;
        margin-left: 1rem;
    }
    
    #rulesContent {
        line-height: 110%;
    }
    
    #rulesContent > div {
        margin: 1rem;
    }

    #packageTagText {
        color: black;
        text-align: left;
        background-color: white;
        padding: 1%;
        border: 0.1vw outset black;
        margin: 0 auto;
        position: absolute;
        bottom: 10%;
        left: 3%;
        top: 15%;
        right: 22%;
        line-height: 150%;
    }


    #warningText {
        position: relative;
        color: red;
        text-align: center;
    }

    .packageEntrance {
        animation-name: entrance;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .packageAccept {
        animation-name: accept;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .packageDeny {
        animation-name: deny;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .healthAlter {
        animation-name: change;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .rulesFade {
        animation-name: fadeIn;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes entrance {
        0% {left: -100%;}
        100% {left: 10%;}
    }

    @keyframes accept {
        0% {left: 10%;}
        100% {left: 100%;}
    }

    @keyframes deny {
        0% {left: 10%;}
        100% {left: -100%;}
    }

    @keyframes change {
        0% { width: var(--my-start-width); }
        100% { width: var(--my-end-width); }
    }

    @keyframes fadeIn {
        0% {opacity:0;}
        100% {opacity:1;}
    }
    
    #packageTagText {
        font-size: .6rem;
    }
    @include media-breakpoint-up(md) {
        #packageTagText {
            font-size: 1rem;
        }
        #rulesContent {
            font-size: 1rem
        }
        .firewall-button {
            font-size: 1rem
        }
        #warningText {
            font-size: 1.2rem
        }
    }
    @include media-breakpoint-up(lg) {
        #packageTagText {
            font-size: 1.2rem;
        }
        #rulesContent {
            font-size: 1.2rem
        }
        .firewall-button {
            font-size: 1.2rem
        }
        #warningText {
            font-size: 1.7rem
        }
    }
    @include media-breakpoint-up(xl) {
        #packageTagText {
            font-size: 1.7rem;
        }
        #rulesContent {
            font-size: 1.4rem
        }
        #warningText {
            font-size: 2rem
        }
        .firewall-button {
            font-size: 1.7rem
        }
    }
}