new-tab/style.css

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Open+Sans|Roboto:400&display=swap&subset=cyrillic');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');

/* @import url('file:///home/ma/.cache/wal/colors.css'); /* uncomment if using pywal */

#reddit:hover {color: #ff4500;}

#youtube:hover {color: #ff0000;}

#twitter:hover {color: #1da1f2;}

#twitch:hover {color: #9146ff;}

#github:hover {color: #6f42c1;}

#class:hover {color: #28a745;}

#news:hover {color: #005cc5;}

#gmail:hover {color: #d73a49;}
:root {
    --roboto: 'Roboto', sans-serif;;
    --noto-sans: 'Noto Sans', sans-serif;;
    --open-sans: 'Open Sans', sans-serif;
    --background: #f8f8f8;
/*    --foreground: var(--color0);
    --second: var(--color2);
    --header: var(--color1); /* uncomment if using pywal or replace the lines below with these lines */
    --foreground: #333333;
    --second: #999999;
    --header: #3a7e99;
    --source: #bfbfbf;
    
}

[data-theme="dark"] {
    --roboto: 'Roboto', sans-serif;;
    --noto-sans: 'Noto Sans', sans-serif;;
    --open-sans: 'Open Sans', sans-serif;
/*    --background: var(--color0);
    --foreground: var(--color7);
    --second: var(--color2);
    --header: var(--color1); /* uncomment if using pywal or replace the lines below with these lines */
    --background: #1a1a1a;
    --foreground: #bfbfbf;
    --second: #999999;
    --header: #93C4D1;
    --source: #4d4d4d;
}

body {
    background: var(--background);
    transition: .4s;
}

.parent {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center; 
    justify-content: center; 
    overflow: auto;
	flex-direction: column;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	line-height: 35px;
    max-width: 450px;
}

.content {
    word-spacing: 10px;
}

.search {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.source {
    position: fixed;
    right: 20px;
    bottom: 15px;
}

.s {
    font-family: var(--roboto);
    font-size: 12px;
    font-weight: bold;
    color: var(--source);
    text-decoration: none;
    outline: none;    
}

n {
	display: inline-block;
    font-weight: normal;
    width: 50px;
    font-family: var(--roboto);
    font-size: 18px;
    color: var(--header);
    text-decoration: none;
    outline: none;
    transition: .2s;
	margin-right: 10px;
}

a {
    font-family: var(--roboto);
    font-size: 18px;
    color: var(--foreground);
    text-decoration: none;
    outline: none;
    transition: .2s;
}

a:hover {
    font-family: var(--roboto);
    color: var(--header);
}

input {
    font-family: var(--roboto);
    font-size: 18px;
    color: var(--foreground);
    background-color: transparent;
    border: none;
	text-align: center;
}

input:focus{
    outline: none;
}

.checkbox_position {
    position: absolute;
    top: 20px;
    right: 20px;
}

.check_box {
    display: none;
}

.check_box + label {
    background: url('https://api.iconify.design/ion:moon.svg?color=%23bfbfbf') no-repeat center center / contain;
    height: 22px;
    width: 22px;
    display:inline-block;
    transition: .2s;
    cursor: pointer;
}

.check_box:hover + label {
    background: url('https://api.iconify.design/ion:moon.svg?color=%23f0dd18') no-repeat center center / contain;
    height: 22px;
    width: 22px;
    display:inline-block;
}

.check_box:checked + label {
    background: url('https://api.iconify.design/ion:sunny.svg?color=%23bfbfbf') no-repeat center center / contain;
    height: 22px;
    width: 22px;
    display: inline-block;
}

.check_box:checked:hover + label {
    background: url('https://api.iconify.design/ion:sunny.svg?color=%23ffc914') no-repeat center center / contain;
    height: 22px;
    width: 22px;
    display: inline-block;
}