* {

margin: 0;

padding: 0;

box-sizing: border-box;

list-style: none;

}

@font-face {

font-family: "sans";

src: url(font/sans.ttf);

}

body {

font-family: "sans";

}

body.dark-mode {

background-color: #111;

color: #eee;

}

body.dark-mode a {

color: #111;

}

body.dark-mode button {

background-color: #eee;

color: #111;

}

body.dark-mode h4 {

color: #eee;

}

body.dark-mode svg {

fill: #fff;

color: #151513;

}

body.dark-mode input {

color: white;

}

body.light-mode input {

color: #111;

}

body.light-mode {

background-color: #eee;

color: #111;

}

body.light-mode a {

color: #111;

}

body.light-mode button {

background-color: #111;

color: #eee;

}

body.light-mode h4 {

color: #111;

}

body.light-mode svg {

fill: #151513;

color: #fff;

}

.github-corner:hover .octo-arm {

animation: octocat-wave 560ms ease-in-out;

}

@keyframes octocat-wave {

0%,

100% {

transform: rotate(0);

}

20%,

60% {

transform: rotate(-25deg);

}

40%,

80% {

transform: rotate(10deg);

}

}

@media (max-width: 500px) {

.github-corner:hover .octo-arm {

animation: none;

}

.github-corner .octo-arm {

animation: octocat-wave 560ms ease-in-out;

}

}

.toggleButton {

position: absolute;

top: 0;

margin: 10px 3px 3px 10px;

padding: 3px;

border: none;

border-radius: 50%;

font-size: 30px;

left: 0;

}

html.transition,

html.transition *,

html.transition *:before,

html.transition *:after {

transition: all 750ms !important;

transition-delay: 0 !important;

}

h1 {

text-align: center;

font-size: 3.5rem;

padding: 5vh 7vw;

}

@media only screen and (max-width: 658px) {

h1 {

font-size: 1.8em;

padding: 32px 40px;

}

}

h4 {

padding: 2%;

}

img {

width: 100%;

border-radius: 10px 10px 0 0;

}

a {

color: inherit;

}

a:visited {

color: inherit;

}

.container {

display: flex;

flex-direction: row;

font-size: 30px;

text-align: center;

}

.item {

flex: 50%;

width: 90%;

height: 100%;

background-color: rgba(0, 0, 0, 0.4);

box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

border-radius: 10px;

transition: transform .3s ease-in-out 0s;

}

.item:hover {

transform: scale3d(1.05, 1.05, 1);

/* border: 1px solid #ffffff; */

filter: drop-shadow(10px);

filter: contrast(110%);

}

.item h4 {

font-size: 1.3rem;

text-align: center;

}

.main {

width: 90vw;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

grid-gap: 24px;

row-gap: 24px;

margin: auto;

}

.main a {

text-decoration: none;

}

footer {

background-color: #19172e;

text-align: center;

color: white;

font-size: 1rem;

left: 0;

right: 0;

bottom: 0;

margin-bottom: 0;

padding: 10px;

line-height: 3vh;

margin-top: 30px;

}

footer a:visited {

color: white;

}

@media (max-width: 800px) {

.container {

flex-direction: column;

}

}

.scrollToTop {

position: fixed;

right: 10px;

bottom: 10px;

cursor: pointer;

width: 40px;

height: 40px;

background-color: #5520b6;

border-radius: 50%;

}

.scrollToTop span {

position: absolute;

top: 50%;

left: 50%;

margin-left: -8px;

margin-top: -12px;

border: 8px solid transparent;

border-bottom-color: white;

}

.scrollToTop:hover {

background-color: #5836D8;

}

input {

border-radius: 3rem;

padding: 10px;

width: 15%;

position: absolute;

top: 6.5%;

right: 7%;

background: transparent;

}

@media(max-width:1000px) {

input {

position: relative;

align-items: center;

margin-bottom: 3%;

left: 35%;

width: 25%

}

}