.bevel {
    width: 100%;
    height: 100%;
}

#home {
    .bevel {
        padding: 20px;
        border-top: .5vmin solid #E9E9E9;
        border-left: .5vmin solid #E9E9E9;
        border-right: .5vmin solid #727272;
        border-bottom: .5vmin solid #727272;
    }

    .resume .bevel {
        padding: 20px;
        border-top: .5vmin solid #C16FFF;
        border-left: .5vmin solid #BF70FD;
        border-right: .5vmin solid #5523C0;
        border-bottom: .5vmin solid #5623C0;
    }

    .settings-btn:hover .bevel, .discover-btn:hover .bevel { 
        border-top-color: #00E800;
        border-left-color: #01E900;
        border-right-color: #115C09;
        border-bottom-color: #0E5B0B;
    }

    .resume:hover .bevel {
        border-top-color: #321E7D;
        border-left-color: #312179;
        border-right-color: #CA74FF;
        border-bottom-color: #CE73FE;
    }
}

#settings {
    button .bevel {
        display: flex;
        align-items: center;
        padding: 2.5%;
        border-top: .5vmin solid #E8E8E8;
        border-left: .5vmin solid #E8E8E8;
        border-right: .5vmin solid #737373;
        border-bottom: .5vmin solid #737174;
    }

    .selected .bevel {
        border-top: .5vmin solid #666666;
        border-left: .5vmin solid #666666;
        border-right: .5vmin solid #E2E2E2;
        border-bottom: .5vmin solid #E2E2E2;
    }

    button:hover .bevel {
        border-top-color: #34C431;
        border-left-color: #1DD616;
        border-right-color: #0F5E0F;
        border-bottom-color: #0F5C0C;
    }

    .selected:hover .bevel {
        border-top-color: #0A5E06;
        border-left-color: #105A0B;
        border-right-color: #00E700;
        border-bottom-color: #00E600;
    }
}

#networks {
    .visual .bevel {
        padding: 1.25%;
        display: flex;
        align-items: center;
        border-top: .5vmin solid #666769;
        border-left: .5vmin solid #616264;
        border-right: .5vmin solid #404143;
        border-bottom: .5vmin solid #404042;
    }

    .visual:hover .bevel {
        border-top-color: #777779;
        border-left-color: #767678;
        border-right-color: #4A4A4A;
        border-bottom-color: #49494A;
    }
}

#discover nav {
    button .bevel {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2%;
        border-top: .5vmin solid #7B7B7B;
        border-left: .5vmin solid #7C7C7E;
        border-right: .5vmin solid #666769;
        border-bottom: .5vmin solid #666769;
    }

    .selected button .bevel {
        position: relative;
        border-top: .5vmin solid #656668;
        border-left: .5vmin solid #7C7C7E;
        border-right: .5vmin solid #656766;
        border-bottom: .5vmin solid #525252;
    }

    .selected button .bevel::after {
        content: "";
        position: absolute;
        width: 10vmin;
        top: 100%;
        border-bottom: .5vmin solid #E9EBEA;
    }

    a:not(.selected) button:hover .bevel {
        background-color: #646466;
        border-top-color: #888888;
        border-right-color: #8A8A8C;
        border-left-color: #767678;
        border-bottom-color: #777779;
    } 
}

#portfolio #introduction {
    .dl-resume .bevel {
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: .5vmin solid #BD6FFF;
        border-left: .5vmin solid #BB75F2;
        border-right: .5vmin solid #A256EE;
        border-bottom: .5vmin solid #A652FF;
    }

    .dl-resume:hover .bevel {
        border-top-color: #CD75FF;
        border-right-color: #A849FD;
        border-left-color: #C975FF;
        border-bottom-color: #AD4AFF;
    }
}

#portfolio #educations {
    .content .bevel {
        border-top: .5vmin solid #7A7B7D;
        border-left: .5vmin solid #7A7A7A;
        border-right: .5vmin solid #666868;
        border-bottom: .5vmin solid #666769;
        padding: 3%;
    }
}

#portfolio #skills {
    .content .bevel { 
        padding: 2%; 
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .content .hard-skills > .bevel {
        overflow-y: scroll;
        border-top: .5vmin solid #6650A5;
        border-left: .5vmin solid #645598;
        border-right: .5vmin solid #6650A2;
        border-bottom: .5vmin solid #61539E;

        a .bevel {
            justify-content: center;
            flex-direction: row;
            border-top: .5vmin solid #BE6EFF;
            border-left: .5vmin solid #C26FFD;
            border-right: .5vmin solid #A851FF;
            border-bottom: .5vmin solid #A357F2;
        }
    }

    .content .soft-skills > .bevel {
        border-top: .5vmin solid #8F378D;
        border-left: .5vmin solid #893988;
        border-right: .5vmin solid #843D89;
        border-bottom: .5vmin solid #8C388D;
    }

    .content .hard-skills > .bevel::-webkit-scrollbar {
                width: 12px;
            }

    .content .hard-skills > .bevel::-webkit-scrollbar-track-piece {
        border: 3.6px solid transparent;
        box-shadow: inset 7.2px 7.2px #646464;
    }

    .content .hard-skills > .bevel::-webkit-scrollbar-thumb {
        border: 2.4px solid black;
        background-color: #E1E5E8;
        box-shadow: inset 0 -4.8px #646464;
        cursor: grab;
    }
}

#portfolio #contact {
    .content [type="reset"] .bevel {
        border-bottom: 1vmin solid #646466;
    }

    .content [type="submit"] .bevel {
        border-bottom: 1vmin solid #295D1F;
    }
}