/*Colors*/
:root {
    --wp_bg: #050028;
    --wp_txt: #fdfdfd;
    --mp_bg: #050028;
    --mp_tb: #fdfdfd;
    --ee_bg: #050028;
    --ee_tb: #fdfdfd;
    --btn_ttl: #fdfdfd;
    --btn_bg: #21dbfc;
    --btn_brdr: #53e3fd;
    --sq_btn: #21dbfc;
    --btn_txt: #050028;
    --pic_brdr: #53e3fd;
    --hov_btn_bg: #fd6d53;
    --hov_btn_brdr: #21dbfc;
    --hov_sq_btn: #fd6d53;
    --hov_btn_txt: #53e3fd;
    --hov_pic_brdr: #21dbfc;
}

/*Default Size*/
.welcome-page {
    background-color: var(--wp_bg);
    color: var(--wp_txt);
}

.main-page {
    background-color: var(--mp_bg);
}

.text-banner {
    color: var(--mp_tb);
}

.easter-egg-page {
    background-color: var(--ee_bg);
}

.ee-text-banner {
    color: var(--ee_tb);
}

.btn-title {
    color: var(--btn_ttl);
}

.btn {
    background-color: var(--btn_bg);
    border: 10px solid var(--btn_brdr);
    color: var(--btn_txt);
}

.btn:hover {
    background-color: var(--hov_btn_bg);
    border: 10px solid var(--hov_btn_brdr);
    color: var(--hov_btn_txt);
}

.sq-btn {
    background-color: var(--sq_btn);
    border: 10px solid var(--sq_btn);
    color: var(--btn_txt);
}

.sq-btn:hover {
    border: 10px solid var(--hov_sq_btn);
}

.pic-link {
    border: 10px solid var(--pic_brdr);
}

.pic-link:hover {
    border: 10px solid var(--hov_pic_brdr);
}

/*Screen Sizes*/

/*Mobile First*/
/* xxs */
@media (min-width: 320px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 5px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 5px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 5px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 5px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 5px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 5px solid var(--hov_pic_brdr);
    }
}

/* xs */
@media (min-width: 375px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 5px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 5px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 5px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 5px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 5px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 5px solid var(--hov_pic_brdr);
    }
}

/* sm */
@media (min-width: 425px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 5px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 5px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 5px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 5px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 5px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 5px solid var(--hov_pic_brdr);
    }
}

/* md */
@media (min-width: 768px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 10px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 10px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 10px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 10px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 10px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 10px solid var(--hov_pic_brdr);
    }
}

/* lg */
@media (min-width: 1024px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 10px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 10px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 10px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 10px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 10px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 10px solid var(--hov_pic_brdr);
    }
}

/* xl */
@media (min-width: 1440px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 10px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 10px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 10px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 10px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 10px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 10px solid var(--hov_pic_brdr);
    }
}

/* 2xl */
@media (min-width: 2560px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 20px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 20px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 20px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 20px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 20px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 20px solid var(--hov_pic_brdr);
    }
}

/* 3xl */
@media (min-width: 5120px) {
    .welcome-page {
        background-color: var(--wp_bg);
        color: var(--wp_txt);
    }

    .main-page {
        background-color: var(--mp_bg);
    }

    .text-banner {
        color: var(--mp_tb);
    }

    .easter-egg-page {
        background-color: var(--ee_bg);
    }

    .ee-text-banner {
        color: var(--ee_tb);
    }

    .btn-title {
        color: var(--btn_ttl);
    }

    .btn {
        background-color: var(--btn_bg);
        border: 40px solid var(--btn_brdr);
        color: var(--btn_txt);
    }

    .btn:hover {
        background-color: var(--hov_btn_bg);
        border: 40px solid var(--hov_btn_brdr);
        color: var(--hov_btn_txt);
    }

    .sq-btn {
        background-color: var(--sq_btn);
        border: 40px solid var(--sq_btn);
        color: var(--btn_txt);
    }

    .sq-btn:hover {
        border: 40px solid var(--hov_sq_btn);
    }

    .pic-link {
        border: 40px solid var(--pic_brdr);
    }

    .pic-link:hover {
        border: 40px solid var(--hov_pic_brdr);
    }
}