@import url(variables.css);

@font-face {
    font-family: Anita Semi Square;
    src: url(../fonts/Anita\ semi\ square.ttf);
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0px;
    margin: 0px;
    color: white;
    text-decoration: none;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    font-family: Anita Semi Square, Verdana, Calibri, Tahoma, Arial, sans-serif;
}

.content-link, p, li, span, strong, td {
    font-family: Verdana, Calibri, Tahoma, Arial, sans-serif;
    font-size: large;
}

.green-text {
    color: var(--xcits-green);
}

#background {
    height: 100%;
    width: 100%;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/xcITs_Background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

a:not(.unformatted-link) {
    text-decoration: none;
    color: var(--xcits-green);
    display: inline-block;
    position: relative;
    width: fit-content;
}

a:not(.unformatted-link):after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--xcits-green);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

a:not(.unformatted-link):hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.unformatted-link {
    text-decoration: none;
    color: white;
}

.content-container-width-limited {
    padding: 1.5rem;
    min-height: 80vh;
    max-width: 1200px;
    margin: 0px auto;
}

td {
    vertical-align: top;
}