* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

@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.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;

}

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;

}