:root {
    --crt-red: rgb(218, 49, 49);
    --crt-green: rgb(112, 159, 115);
    --crt-blue: rgb(40, 129, 206);
    --pale-orange: #E8D8C1;
    --pale-red: #CE6D62;
    --dark-moss-green: #5B6747;
    --dark-aquamarine-green: #389372;
    --light-aquamarine-green: #7ADEC5;

    --dark-beach-green: #03695e;
    --light-beach-green: #6daf5f;
    --dark-beach-blue: #239dca;
    --light-sky-blue: #a5c6db;
    --light-beach-cream: #e7e9d8;

    --black: #000;
    --white: #ffff;
    --transparent-white: rgba(255, 255, 255, 0.5);

    --main-color: var(--dark-beach-blue);
    --background-color: var(--white);
    --contrast-color: var(--light-beach-green);
    --hover-color: var(--dark-beach-green)
}

@font-face {
    font-family: 'emoji';
    src: url('assets/fonts/EmojiFont.ttf');
}

@font-face {
    font-family: 'Retro Gaming';
    src: url('assets/fonts/Retro Gaming.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VCR OSD Mono';
    src: url('assets/fonts/VCR_OSD_MONO_1.001.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    background: url("assets/imgs/philipp-a-urlich-cpncept220.jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    display: block;
    overflow: auto;
    font-family: "VCR OSD Mono", serif;
    color: black;
    text-shadow: 0 0 0.2em currentColor, 1px 1px rgba(255, 0, 255, 0.3),
    -1px -1px rgba(0, 255, 255, 0.3);
    position: relative;

    &:before,
    &:after {
        content: "";
        transform: translateZ(0);
        pointer-events: none;
    / / opacity: 0.5;
        mix-blend-mode: overlay;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1;
    }

    &:before {
        background: repeating-linear-gradient(
                var(--crt-red) 0px,
                var(--crt-green) 2px,
                var(--crt-blue) 4px
        );
    }

    &:after {
        background: repeating-linear-gradient(
                90deg,
                var(--crt-red) 0px,
                var(--crt-green) 1px,
                var(--crt-blue) 2px
        );
    }
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
}

header{
    display: flex;
    align-items: center;
    justify-content: center;
}

footer{
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    color: white;
}

h1{
    background: var(--main-color);
    background: linear-gradient(80deg, var(--main-color) 60%, var(--transparent-white) 98%);
    color: white;
}


.header-img{
    width: 900px;
}

.central-block{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 900px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
}

.left-main-col{
    border: 6px solid transparent;
    border-image: url("assets/imgs/border-test.png") 4 stretch;
    border-radius: 12px;
    width: 80%;
}

.right-main-col{
    text-align: center;
    width: 20%;
}

.emoji{
    font-family: "emoji", "Segoe UI Emoji";
}