Notifsytledark.css

body {
    background-color: rgb(105, 90, 90);
    overflow-x: hidden;
    overflow-y: hidden;
    position: auto;
}
.settings-notifs {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.bottom {
    position: absolute;
    top: 35vh;
}
/* this is for the blue border */
.outer-frame {
    position: relative;
    width: 95vw;
    height: 80vh;
    background-color: #3A7FD0;
    border: 0.40vw solid;
    border-top-left-radius: 2.5vw;
    border-top-right-radius: 2.5vw;
    border-color: #2867C6;
}

.inner-frame {
    position: absolute;
    width: 91vw;
    height: 57.5vh;
    top: 3vh;
    left: 1.75vw;
    background-color: #E2D8D8;
    border: 0.3vw solid;
    border-radius: 1.5vw;
    border-color: #656161;
}

.top-text {
    position: absolute;
    width: 30vw;
    height: 6.67vh;
    top: 3vh;
    left: 2vw;
}

.notifTitle {
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: #000000;
    font-size: 2.15vw;
}

.line {
    height: 0.2vh;
    width: 70vh;
    bottom: 1vh;
    background-color: #4b4949;
}

.desc {
    position: absolute;
    height: 50vh;
    top: 3vh;
    font-family: "Darker Grotesque", serif;
    font-weight: 100;
    color: #3d3c3c;
    font-size: 1.4vw;
}

.notifs{
    position: absolute;
    width: 55vw;
    height: 38vh;
    top: 15vh;
    left: 2vw;
    background-color: #80B4F0;
    border-radius: 1.5vh;
    border: .15vw;
    overflow-y: scroll;
}
.sample {
    position: relative;
    background-color: #4b4949;
    height: 5vh;
    width: 50vw;
    left: 2vw;
    border: .15vw;
    border-radius: 1.2vh;
    margin-top: 3vh;
    font-size: 1.8vw;
    font-family: "consolas", "Droid Sans";
    font-weight: 400;
    color: white;
    text-align: center;
}
.top {
    position: absolute;
    width: 100vw;
    height: 32.5vh;
    top: 0vh;
    left: 0vw;
    box-shadow: 0 1.5vh 1.5vh #00000040;
}


.t-leftFrame {
    position: absolute;
    width: 15vw;
    height: 32.5vh;
    background-color: #2867C6;
    align-content: center;
}

.settingsText {
    position: absolute;
    width: 60vw;
    height: 20vh;
    top: 20.5vh;
    left: 3.5vh;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: #000000;
    font-size: 2.5vw;
}

.usericon {
    position: absolute;
    width: 8.5vw;
    height: 17.5vh;
    left: 2.25vw;
    top: 2vh;
}


.t-rightFrame {
    position: absolute;
    width: 87vw;
    height: 32.5vh;
    left: 13vw;
    background-color: #373737;
}

.dashboardButton {
    position: absolute;
    display: table;
    background-color: #ffffff;
    left: 61vw;
    top: 21.25vh;
    height: 7vh;
    width: 23vw;
    border: .2vw solid;
    border-radius: 1vw;
    border-color: #2867C6;
    box-shadow: 0 0.5vh 1.5vh black;
    text-align: center;
}

.dashboardTxt {
    font-size: 2.1vw;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 600;
    color: rgb(0, 0, 0);
    vertical-align: middle;
    display: table-cell
}

.dashboardTxt:before {
    content: '';
    position: absolute;
    top: 5.5vh;
    height: 0.4vh;
    background: #044394;
    width: 0;
    transition: all 1.0s ease;
}
.dashboardTxt:hover:before {
    width: 93%;
    color: #2867C6;
}


.buttonFrame {
    position: absolute;
    background-color: #80b3f0;
    left: 16vw;
    top: 20vh;
    height: 9.5vh;
    width: 55vw;
    border: .15vw solid;
    border-radius: 3vh;
    box-shadow: 0 0.5vh 1.5vh black;
}

.newTxt {
    position: absolute;
    top: 2.25vh;
    width: 5.85vw;
    left: 46.5vw;
    font-size: 2.25vw;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: rgb(0, 0, 0);
    line-height: normal;
}
.newTxt:before {
    content: '';
    position: absolute;
    top: 5vh;
    height: 0.5vh;
    background: #044394;
    width: 0;
    transition: all 1.0s ease;
}
.newTxt:hover:before{
    width:100%;
}

.appearTxt {
    position: absolute;
    top: 2.25vh;
    width: 12.925vw;
    left: 47vw;
    font-size: 2.25vw;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: rgb(0, 0, 0);
    line-height: normal;
}

.appearTxt:before{
    content: '';
    position: absolute;
    top: 5.5vh;
    height: 0.4vh;
    background: #044394;
    width: 0;
    transition: all 1.0s ease;
}
.appearTxt:hover:before{
    width: 100%;
}

.notifTxt {
    position: absolute;
    top: 2.25vh;
    width: 12.75vw;
    left: 28vw;
    font-size: 2.25vw;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: rgb(0, 0, 0);
}

.notifTxt:before {
    content: '';
    position: absolute;
    top: 5vh;
    height: 0.5vh;
    background: #044394;
    width: 0;
    transition: all 1.0s ease;
}
.notifTxt:hover:before {
    width: 107%;
}

.accinfoTxt {
    position: absolute;
    top: 2.25vh;
    width: 25vw;
    left: 1.5vw;
    font-size: 2.25vw;
    font-family: "Darker Grotesque-Bold", Helvetica, serif;
    font-weight: 700;
    color: #000000;
}
.accinfoTxt:before {
    content: '';
    position: absolute;
    top: 5vh;
    height: 0.5vh;
    background: #044394;
    width: 0;
    transition: all 1.0s ease;
}
.accinfoTxt:hover:before {
    width: 88%;
}
@media only screen and (max-width: 1400px){
    body {overflow-y: scroll;}
}
@media only screen  and (max-width: 980px){
    body{
        width: 100vw;
        overflow-x: scroll;
    }
    .top{
        width: 170vw;
        height: 25.5vh;
        box-shadow: 0 1.5vh 1.5vh #00000040;
    }
    .t-leftFrame {
        position: absolute;
        width: 40vw;
        height:25.5vh;
    }
    .t-rightFrame{
        position: absolute;
        width: 140vw;
        height:25.5vh;
        left: 40vw;
    }
    .usericon {
        width: 34.5vw;
        height: 16.5vh;
        left: 2.25vw;
        top: 2vh;
    }
    .settingsText {
        left: 3.6vh;
        font-size: 6vw;
    }
    .buttonFrame {
        left: 45vw;
        top: 14vh;
        height: 8vh;
        width: 125vw;
        border: .15vw solid;
        border-radius: 3vh;
        box-shadow: 0 0.5vh 1.5vh black;
    }
    .newTxt {
        top: 2.75vh;
        width: 5.85vw;
        left: 102.5vw;
        font-size: 4.55vw;
    }
    .newTxt:before {
        content: '';
        top: 2.5vh;
        height: 0.3vh;
        background: #044394;
        width: 0;
        transition: all .5s ease;
    }
    .newTxt:hover:before{
        width:200%;
    }

    .notifTxt {
        position: absolute;
        top: 2.75vh;
        width: 5.85vw;
        left: 60.75vw;
        font-size: 4.55vw;
    }

    .notifTxt:before {
        content: '';
        position: absolute;
        top: 2.5vh;
        height: 0.3vh;
        background: #044394;
        width: 0;
        transition: all .5s ease;
    }
    .notifTxt:hover:before {
        width: 475%;
    }
    .accinfoTxt {
        position: absolute;
        top: 2.75vh;
        width: 45vw;
        left: 2.7vw;
        font-size: 4.55vw;
    }
    .accinfoTxt:before {
        content: '';
        position: absolute;
        top: 2.5vh;
        height: 0.3vh;
        background: #044394;
        width: 0;
        transition: all .5s ease;
    }
    .accinfoTxt:hover:before {
        width: 100%;
    }
    .dashboardButton {
        background-color: #ffffff;
        left: 7vw;
        top: 2vh;
        height: 5vh;
        width: 50vw;
        border: .2vw solid;
        border-radius: 8vw;
        border-color: #2867C6;
        box-shadow: 0 0.5vh 1.5vh black;
        text-align: center;
    }
 
    .dashboardTxt {
        font-size: 4.45vw;
        font-family: "Darker Grotesque-Bold", Helvetica, serif;
        font-weight: 600;
        color: rgb(0, 0, 0);
        vertical-align: middle;
        display: table-cell
    }

    .dashboardTxt:before {
        content: '';
        position: absolute;
        top: 3.5vh;
        height: 0.4vh;
        background: #044394;
        width: 0;
        transition: all .5s ease;
    }
    .dashboardTxt:hover:before {
        width: 90%;
        color: #2867C6;
    }
    .bottom {
        position: absolute;
        top: 27.5vh;
    }
    .outer-frame {
        position: absolute;
        width: 170vw;
        height: 110vh;
        left: -47.5vw;
        border-radius: 2.0vh;
    }
    .inner-frame {
        width: 165.5vw;
        height: 107.5vh;
        top: 1vh;
        left: 2vw;
        border-radius: 2vh;
    }
    .top-text {
        position: absolute;
        width: 30vw;
        height: 6.67vh;
        top: 1.5vh;
        left: 2vw;
    }


    .line {
        position: relative;
        height: .3vh;
        width: 100vw;
        top: .15vh;
        background-color: #4b4949;
    }

    .desc {
        position: absolute;
        width: 140vw;
        top: 3vh;
        font-family: "Darker Grotesque", serif;
        font-weight: 100;
        color: #3d3c3c;
        font-size: 5vw;
    }

    .accInfoUser{
        position: absolute;
        top: 2vh;
        left: 3.5vw;
        font-size: 8vw;
    }
    .notifTitle {
        font-size: 5.5vw;
    }
    .notifs{
        position: absolute;
        width: 125vw;
        height: 38vh;
        top: 15vh;
        left: 20vw;
        background-color: #80B4F0;
        border-radius: 1.5vh;
        border: .15vw;
        overflow-y: scroll;
    }
    .sample {
        position: relative;
        background-color: #4b4949;
        height: 5vh;
        width: 100vw;
        left: 10vw;
        border: .15vw;
        border-radius: 1.2vh;
        margin-top: 3vh;
        font-size: 5.5vw;
        font-family: "consolas", "Droid Sans";
        font-weight: 400;
        color: white;
        text-align: center;
    }
}
body {
    background-color: #1a1a1a; /* Dark background color */
}

.settings-notifs {
    /* No changes here */
}

.outer-frame {
    background-color: #1a1a1a; /* Dark background color */
    border-color: #000; /* Dark border color */
}

.inner-frame {
    background-color: #333; /* Dark background color */
    border-color: #000; /* Dark border color */
}

.notifTitle {
    color: #fff; /* White text color */
}

.line {
    background-color: #444; /* Darker line color */
}

.desc {
    color: #ccc; /* Lighter text color */
}

.notifs {
    background-color: #333; /* Dark background color */
}

.sample {
    background-color: #444; /* Darker background color */
    color: #fff; /* White text color */
}

.top {
    box-shadow: 0 1.5vh 1.5vh #000; /* Dark box shadow */
}

.t-leftFrame {
    background-color: #2867C6; /* Blue background color */
}

.settingsText,
.dashboardTxt,
.newTxt,
.notifTxt,
.accinfoTxt,
.accInfoUser{
    color: #000000; /* White text color */
}
.notifTitle{
    color:#ffffff
}
.buttonFrame {
    background-color: #2867C6; /* Blue background color */
    border-color: #000; /* Dark border color */
    box-shadow: 0 0.5vh 1.5vh #000; /* Dark box shadow */
}

.dashboardButton {
    background-color: #2867C6; /* Blue background color */
    border-color: #000; /* Dark border color */
    box-shadow: 0 0.5vh 1.5vh #000; /* Dark box shadow */
}

.dashboardTxt:hover:before,
.newTxt:hover:before,
.notifTxt:hover:before,
.accinfoTxt:hover:before {
    background: #fff; /* White hover effect */
}

body {
    background-color: #1A1A1A;
}

.outer-frame {
    background-color: #1A1A1A;
    border-color: #121212;
}

.inner-frame {
    background-color: #353535;
    border-color: #282828;
}

.AccInfoTitle {
    color: #FFFFFF;
}

.line {
    background-color: #2C2C2C;
}

.desc {
    color: #CCCCCC;
}

.username,
.accInfoUser,
.password {
    color: #FFFFFF;
}

.username-display,
.password-display {
    background-color: #2C2C2C;
    border-color: #121212;
}

.filteredPass,
.changePassTxt,
.confirmPassTxt,
.closePopupTxt {
    color: #FFFFFF;
}

.changePassButton,
.confirmPassButton,
.closePopup {
    background-color: #2C2C2C;
    border-color: #121212;
}

.changePassButton:hover,
.confirmPassButton:hover,
.closePopup:hover {
    background-color: #1A1A1A;
}

.dashboardButton {
    background-color: #2C2C2C;
    border-color: #121212;
}

.dashboardTxt {
    color: #FFFFFF;
}

.dashboardTxt:hover:before {
    background: #1A1A1A;
}

.buttonFrame {
    background-color: #4F4F4F;
    border-color: #333333;
}

.newTxt,
.appearTxt,
.notifTxt,
.accinfoTxt {
    color: #FFFFFF;
}

.newTxt:hover:before,
.appearTxt:hover:before,
.notifTxt:hover:before,
.accinfoTxt:hover:before {
    background: #1A1A1A;
}

.changePassPopup {
    background-color: #4F4F4F;
    border-color: #333333;
}

.popupTxt {
    color: #FFFFFF;
}

.inputText,
.inputText1,
.inputText2 {
    background-color: #353535;
    border-color: #282828;
    color: #CCCCCC;
}

.closePopup,
.confirmPassButton {
    background-color: #2C2C2C;
    border-color: #121212;
}

.confirmPassButton:hover,
.closePopup:hover {
    background-color: #1A1A1A;
}

.closePopupTxt {
    color: #FFFFFF;
}