:root {
    --content-color-main: white;
    --content-color-secondary: red;
    --content-color-outline: rgb(48, 48, 48);
    --content-color-text: black;

    --transition-duration-short: 0.2s;
    --transition-duration-long: 2s;
    --transition-duration-medium: 1s;
}

@font-face {
	font-family: "poppins-light";
	font-weight: normal;
    src: url("../fonts/Poppins-Light.ttf");
}

@font-face {
    font-family: "poppins-extra-light";
    font-weight: normal;
    src: url("../fonts/Poppins-ExtraLight.ttf");
}

html {
    height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body {
    position: relative;
    font-family: poppins;
    width: 1280px;
    margin: 0px auto 0px auto;
    color: var(--content-color-text);
}

a {
    color: var(--content-color-text);
    text-decoration: none;
}

@media (hover: hover) {
    a {
        transition-duration: var(--transition-duration-short);
    }

    a:hover {
        color: var(--content-color-secondary);
    }
}

@media screen and (max-width: 1280px) {
    body {
        width: 100%;
    }
}