:root {
    --black: #0E0E0E;
    --slight-black: #333;
    --close-to-black: #212121;
    --white: #FFF;
    --transparent: rgba(0, 0, 0, 0.2);
    --transparent-p: rgba(255,255,255, 0.2);
    --main-yellow: #FFBC00;
    --slight-black-heading: #333;
    --slight-gray-paragraph: #969696;
    --contact-box-background: none;
    --contact-box-background-icons: #e9e9e9;
    --contact-box-background-icons-text: #333;

    --margin-width: 80%;
    --transition: .3s;
    --box-shadow: 4px 4px 12px rgba(255, 255, 255, 0.5);
    --main-border-radius: 16px;
    --border: 1px solid hsla(0, 0%, 100%, .14);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    transition: var(--transition);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: var(--main-yellow);
}

::-webkit-scrollbar-thumb:hover {
    background: #c38f01;
}

body {
    position: relative;
    background: var(--black);
    overflow-x: hidden;
}

ul, ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

form * {
    outline: 0;
}

button {
    border: none;
    cursor: pointer;
}

@media(max-width: 500px) {
    :root {
        --margin-width: 85%;
    }
}