:root{--primary-color: #676cb1}body{background-color:var(--primary-color);text-align:center;min-height:100lvh}body:before,body:after{content:"";display:block;width:100%;height:50%;position:fixed;left:0;z-index:-1}body:before{top:0;background-color:var(--primary-color)}body:after{bottom:0;background-color:var(--primary-color)}.tab-container{display:flex;border-bottom:2px solid #ccc}.tab-button{background-color:transparent;border:none;width:50%;padding:10px 20px;cursor:pointer;font-size:16px;color:#fff;outline:none;position:relative;transition:color .3s}.tab-button:hover{color:#e8e8e8}.tab-button:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:transparent;transition:background-color .3s,height .3s}.tab-button.active{color:#fff}.tab-button.active:after{background-color:#fff;height:4px}img{-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}