Show sourcecode
The following files exists in this folder. Click to view.
css_index.css
css_index.sync-conflict-20250925-184045-H7ZHIM2.css
css_index.css
265 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
/* Importing Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Libre+Barcode+128+Text&family=Maven+Pro&family=Oswald&family=Shadows+Into+Light&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
/* Setting root variables */
:root {
color-scheme: dark;
}
html, body {
margin: 0;
padding: 0;
background-color: black;
}
html {
overflow-y: scroll;
}
/* Styling the body */
body {
text-align: center;
background-color: black;
scrollbar-width: thin; /* Firefox */
scrollbar-color: transparent transparent; /* Firefox */
}
/* Footer */
footer {
display: none;
position: relative;
background-color: transparent;
bottom: 0;
height: 2.5rem; /* Footer height */
}
/* Scrollbar */
::-webkit-scrollbar {
width: 12px; /* Set the width of the scrollbar */
}
::-webkit-scrollbar-thumb {
background-color: white; /* Handle part of the scrollbar */
background-repeat: repeat-y;
background-position: center;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
/* Responsive design for screens with a max-width of 1000px */
@media only screen and (max-width: 1000px) {
.tabcontent {
margin-right: 1%;
margin-left: 1%;
padding: 0;
}
.tab {
margin-left: 1%;
margin-right: 1%;
}
.aboutme {
font-size: 12px;
margin-left: 1%;
margin-right: 1%;
}
.kattgif {
display: none;
}
}
.terry {
width: 25%;
}
/* Tabs */
.tabContent {
display: none;
animation: fadeEffect 1s ease-in-out; /* Fading effect takes 1 second */
}
.aboutme {
margin-left: 25%;
margin-right: 25%;
}
.ovningar {
display: block;
font-family: Arial, Helvetica, sans-serif;
color: black;
background-color: black;
border-radius: 5px;
padding: 5px;
}
/* Styling hyperlinks within the "ovningar" class */
.ovningar a {
font-family: "Courier New", Courier, monospace;
color: white;
border-radius: 5px;
}
/* Styling the main heading */
h1 {
font-family: "Libre Barcode 128 Text", system-ui;
font-weight: 400;
font-style: normal;
text-align: center;
color: white;
font-size: 64px;
cursor: pointer;
}
/* Styling buttons */
button {
background-color: inherit;
font-family: "Courier New", Courier, monospace;
border: 1px white;
outline: none;
cursor: pointer;
color: white;
padding: 10px 16px;
transition: 0.3s;
}
button:hover {
background-color: #171717;
}
.tab button.active {
background-color: white;
color: black;
font-weight: bold;
}
/* Styling the cat gif images */
.kattgif {
width: 5cm;
height: 5cm;
border-radius: 10px;
}
/* Hyperlinks */
a {
font-family: 'Courier New', Courier, monospace;
color: lightblue;
}
/* Texts */
h3 {
font-family: Doto, sans-serif;
font-size: 2em;
color: white;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
h3 a {
font-family: inherit;
color: inherit;
text-decoration: none;
}
p {
font-family: "Courier New", Courier, monospace;
color: white;
}
/* Additional styling for paragraphs with the class "courier" */
.courier {
font-family: "Courier New", Courier, monospace;
color: white;
}
/* Tab buttons */
.tab {
overflow: hidden;
background-color: transparent;
margin-left: 15%;
margin-right: 15%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tab button {
background-color: inherit;
font-family: "Courier New", Courier, monospace;
border: none;
outline: none;
cursor: pointer;
color: white;
padding: 10px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #171717;
}
.tab button.active {
background-color: white;
color: black;
font-weight: bold;
}
/* Fading effect */
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Styling for a grid container */
.container {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
}
.box{
background-color: transparent;
width: 99%;
height: 150%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
#projectContainer {
margin-left: 5%;
text-align: center;
width: 90%;
height: auto;
border: 1px solid white;
display: flex;
}
.projectCard {
width: 25%;
margin: 1em;
padding: 1em;
border: 1px solid white;
transition: 0.3s;
}
.projectCard:hover {
transform: scale(1.1);
cursor: pointer;
}
.projectCard iframe {
width: 100%;
zoom: .5;
transform: none;
}