@import url(https://fonts.googleapis.com/css?family=Exo);
@import url(https://fonts.googleapis.com/css?family=Oswald);

:root {
    --primary: #A186D6;
    --primaryDark: #683DA7;
    --textColor: #888888;
    --titleFontSize: 100px;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: "Oswald";
    color: #888;
    font-size: 18px;
    text-align: center;
    background: #fff;
    overflow: hidden;
}

/* no select */
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

/* unvisited link */
a:link {
    color: black;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: black;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: black;
    text-decoration: none;
}

/* selected link */
a:active {
    color: black;
    text-decoration: none;
}

/* overlay scrollbar */
.os-scrollbar-handle {
    cursor: pointer;
    background-color: rgba(0,0,0,.65) !important;
}


/* TITLE */

.title-container {
    font-family: "Exo";
    font-size: 0px;
    font-weight: 600;
    margin-top: calc(40vh - (var(--titleFontSize) / 100 * 80));
}

.title {
    display: inline-block;
    color: var(--primary);
    font-size: var(--titleFontSize);
    
    position: relative;
    top: -50vh;
}
.title2 {
    display: inline-block;
    color: var(--primaryDark);
    font-size: var(--titleFontSize);
    
    transform: rotate(180deg);
    
    position: relative;
    top: -50vh;
    left: calc(var(--titleFontSize) / 100 * 1);
}
.title3 {
    display: inline-block;
    color: var(--primaryDark);
    font-size: var(--titleFontSize);
    position: relative;
    top: -50vh;
}

.subtitle {
    font-size: calc(var(--titleFontSize) / 120 * 40);
    margin-top: calc(var(--titleFontSize) / 100 * -30);
    color: var(--textColor);
    margin-left: calc(var(--titleFontSize) / 100 * -2);
    position: relative;
    left: -70vw;
}

.comingSoon {
    font-size: 24px; margin-top: 5vh; position: relative; bottom: -50vh;
}

.footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: right;
    padding: 40px 45px;
    color: #888;
}

.phone, .email {
    position: relative;
    right: -300px;
    cursor: pointer;
}

.phone:hover, .email:hover {
    color: var(--primaryDark);
}