#home{height:100vh;background:#6c89eb;}
.home-overlay{position:fixed;bottom:8px;left:8px;z-index:2;background: #1EFF1A;
    background: linear-gradient(0deg,var(--primary) 0%, rgba(255, 255, 255, 0) 100%);height:200px;width:calc(100vw - 16px);}
.home-port-box{border:3px solid white;text-align:left;background-color:black;}
.home-project-stats li{margin-bottom:20px;}

#services{height:100vh;background:#000000;}

#portfolio{height:100vh;background:#6c89eb;}

#information{height:100vh;background:#000000;}

#contact{height:100vh;background:#6c89eb;}

.contact-form-wrapper {
    width: 100%;
    background-color: #000;
    border: 4px solid var(--primary);
    box-shadow: 0 0 0 4px #313638, 0 0 0 8px var(--light);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--primary);
}

.input-box {
    width: 100%;
    padding: 10px;
    background-color: #222034;
    border: 3px solid var(--secondary);
    color: #f4f4f4;
    font-family: 'VT323', monospace;
    font-size: 20px;
    transition: all 0.3s;
    outline: none;
}

.input-box:focus {
    border-color: var(--light);
    box-shadow: 0 0 8px var(--light);
}

.error-message {
    color: #ff004d;
    font-size: 16px;
    margin-top: 5px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.input-error {
    border-color: #ff004d;
    animation: shake 0.5s;
}
.success-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 32, 52, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    z-index: 100;
    padding: 20px;
}

.success-message.show {
    opacity: 1;
    visibility: visible;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: #00e436;
    margin-bottom: 20px;
    position: relative;
    animation: successPulse 1s infinite;
}

.success-icon:before, .success-icon:after {
    content: '';
    position: absolute;
    background-color: #00e436;
}

.success-icon:before {
    width: 30px;
    height: 15px;
    transform: rotate(45deg);
    bottom: 25px;
    left: 15px;
}

.success-icon:after {
    width: 60px;
    height: 15px;
    transform: rotate(-45deg);
    bottom: 30px;
    right: 5px;
}

.success-title {
    font-size: 32px;
    color: #00e436;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 2px 2px 0 #222034;
}

.success-text {
    font-size: 22px;
    color: #f4f4f4;
    text-align: center;
    margin-bottom: 25px;
}

.pixel-container{}

.rabbit-footer{display:block;position:absolute;bottom:0;right:20px;text-align:right;z-index:3;}

.bottom-block{height:200px;}

.mr-project-view{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;overflow-x:hidden;overflow-y:scroll;background:var(--primary);z-index:99999;}
.mr-project-close{padding:20px 20px 20px 30px;position:relative;top:0;left:0;text-align:left;}
.mr-project-close a{font-weight:bold;font-family: var(--sub-title);color:white;text-decoration: none;font-size:50px;transition: 1s;}
.mr-project-close a:hover{font-weight:bold;font-family: var(--sub-title);color:#111111;text-decoration: none;font-size:50px;}
.mr-project-close a:visited{font-weight:bold;font-family: var(--sub-title);color:white;text-decoration: none;font-size:50px;}
#mr-project-header-image{width:100%;height:400px;object-fit: cover;}
#mr-project-description{font-weight:bold;font-family: var(--sub-title);color:white;font-size:22px;}

@media(max-width:600px){
    .home-overlay{position:fixed;bottom:8px;left:8px;z-index:2;background: #1EFF1A;
        background: linear-gradient(0deg,var(--primary) 0%, rgba(255, 255, 255, 0) 100%);height:100px;width:calc(100vw - 16px);}

    .rabbit-footer{display:none;}
}

@media (prefers-reduced-motion: no-preference) {
    .square-animation {
        animation: wipe-enter 1s 1;
    }

    .hidden {
        animation: wipe-leave 1s 1;
    }
}

@keyframes wipe-enter {
    0% {transform: scale(0, .025);}
    50% {transform: scale(1, .025);}
}

@keyframes wipe-leave {
    0% {transform: scale(1);}
    50% {transform: scale(0);}
    100% {transform: scale(0);display:none;}
}