index.css

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    background-color: #212121;
    color: white;
}

.theme-overlayer-master {
    display:flex;
}

.theme-overlayer-master .light-overlayer {
    background-color: white;
}

.theme-overlayer-master .dark-overlayer {
    background-color: #212121;
}
.theme-overlayer {
    flex:100;
    height:100vh;
    transition: flex .3s linear;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor: pointer;
}
.choose-theme-text {
    position:absolute;
    pointer-events: none;
    width:100vw;
    text-align: center;
    top:15%;
    transform: translate(-0%, -50%);
    font-size:100px;
    mix-blend-mode: difference;
}
.theme-text {
    /*visibility:hidden;*/
    font-size:100px;
    position:relative;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color:#505050;
    mix-blend-mode: difference;
}
.light-overlayer:hover .theme-text{
    color:#212121 !important;
    mix-blend-mode:normal;
}
.light-overlayer:hover {
    transition: flex .3s linear;
    flex:150;
}
.dark-overlayer:hover {
    transition: flex .3s linear;
    flex:150;
}

.dark-overlayer:hover .theme-text {
    color: white;
    mix-blend-mode:normal;
}

@media only screen and (max-width: 700px) {
    .theme-overlayer-master {
        flex-direction: column;
        height: 100vh;
    }
    .choose-theme-text {
        top:50px;
        font-size: 50px;
    }
    .theme-overlayer {
        height:50vh
    }
    .light-overlayer:hover {
        transition: flex .3s linear;
        flex:170;
    }
    .dark-overlayer:hover {
        transition: flex .3s linear;
        flex:170;
    }
  }

  @media only screen and (max-width: 360px) {
    .theme-text {
        font-size: 55px;
    }
    .choose-theme-text {
        transform: translate(0%, 0%);
        top: 10px;
        font-size: 35px;
    }
  }