:root {
    --var-textcolor: #fefefe;
    --var-highlight: red;
    --var-background: #3e3e3e;
    --var-font-family: "Raleway"
}

body {
    margin: 0;
}

body,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: var(--var-font-family); */
    font-family: var(--var-font-family);
}

.main {
    font-family: var(--var-font-family);
    color: var(--var-textcolor);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.background-image {
    background-color: var(--var-background);
    position: fixed;
    left: 0;
    right: 0;
    z-index: -11;
    display: block;
    background-image: url("assets/background.jpg");
    transform: translate(-25%, -25%);
    width: 150%;
    height: 150%;
    filter: grayscale(70%) brightness(.6);
    ;
}

.container {
    transform: translateY(20vh);
}

.strip {
    background-color: #daa103;
    text-align: center;
    margin: 0;
    margin-bottom: 100px;
    padding: 2%;
    width: 120%;
    transform: rotate(-3deg) translateX(-10%);
    box-shadow: black 0 30px 20px;

    h1 {
        margin: 0;
        font-family: "Inter";
        font-size: 8vw;
        letter-spacing: -1px;
        font-weight: 800;
    }
}


.center {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.icons {
    font-size: 28px;
    display: flex;
    gap: 18px;
    flex-direction: row;

    .icon {
        width: 28px;
        height: 28px;
        text-align: center;
        color: var(--var-textcolor);
        cursor: pointer;
        padding: 20px;
        border: var(--var-textcolor) solid 2px;
        border-radius: 50%;
        opacity: 0.3;
    }

    .icon:hover {
        opacity: 1;
        transition: linear 200ms;
    }
}