@font-face {
    font-family: 'Source Code Pro';
    src: url("SourceCodePro-Regular.ttf") format("truetype");
}

* {
    box-sizing: content-box;
    font-family: 'Source Code Pro', monospace;
    line-height: 1.4;
    scroll-behavior: smooth;
}

:root{
    --p: #40C70F;
    --hl: #55F76A;
    --drk: #100810;
    --lgh: #b4b4b4;
}

body {
    background: linear-gradient(to left, #76102b, #340834);
    background-repeat: repeat-y;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0;
}

p, pre {
    color: var(--p);
    font-size: 17px;
    margin: 10px 10%;
}

li {color: var(--p); font-size: 17px;}
b {color: var(--hl)}

a {
    color: cornflowerblue; 
    font-size: 17px; 
    text-decoration: none;
}

a:visited {color: plum;}
a:hover, a:active {color: #eee;}

h1, h2 {
    text-shadow: 3px 3px 2px var(--drk);
    color: var(--hl);
    font-style: italic;
    margin-bottom: 5px;
    padding: 0.5rem;
}

h3 {
    color: var(--drk);
    font-weight: bold;
}

ul {
    list-style-type: none; 
}

ol {
    list-style-position: inside;
    text-align: left;
    margin-left: 10%;
}

input {
    width: 90%;
    max-width: 550px;
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--lgh);
}

input:hover, input:active {
    cursor: text;
}

textarea {
    height: 140px;
    width: 90%;
    max-width: 550px;
    padding-top: 15px;
    padding-inline: 5px;
    border-radius: 8px;
    resize: none;
    background: var(--lgh);
}

button {
    background-color: var(--p);
    color: var(--drk);
    font-size: 17px;
    border: 2px solid var(--p);
    border-radius: 8px;
    height: 40px;
    padding: 0 10px;
    position: relative;
}

button:hover, button:active {
    background: var(--lgh);
    color: var(--drk);
    cursor: pointer;
}

img {
    margin: 0 10px;
}

video {
    border: 5px solid var(--drk);
    border-radius: 8px;
    width: 90%;
    max-width: 470px;
    margin: 5px;
}      

header, footer {
    background: var(--drk);
    color: var(--hl);
}

th {
    color: var(--hl);
}

/* Classes and IDs */

.log {
    background: rgb(34, 77, 40, 0.50);
    border: 4px solid var(--drk);
    border-radius: 8px;
    margin: 0 10%;
    padding-right: 5%;
    li {
        color: var(--hl);
    }
}

.platform {
    border: 4px solid var(--lgh);
    border-radius: 8px;
    padding: 1%;
}

.platform-d {
    background: var(--drk);
    color: var(--hl);
    border: 4px solid var(--hl);
    border-radius: 8px;
    padding: 1%;
}

.platform-d:hover, .platform-d:active {
    color: #eee;
}

.platform-n {
    background: #bf8417;
    color: var(--drk);
    border: 4px solid var(--drk);
    border-radius: 8px;
    padding: 1%;
}

.platform-n:hover, .platform-n:active {
    color: #eee;
}

.platform-i {
    background: yellow;
    color: var(--drk);
    border: 4px solid var(--drk);
    border-radius: 8px;
    padding: 1%;
}

.platform-i:hover, .platform-i:active {
    color: #eee;
}

.platform-w {
    background: ghostwhite;
    color: #3831ce;
    text-decoration: underline;
    border: 4px solid var(--lgh);
    border-radius: 8px;
    padding: 1%;
}

.platform-w:hover, .platform-w:active {
    color: #eee;
}