/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
https://www.chromewatchparty.com/copyright
=========================================================================
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/

@keyframes circleFloat {
  0% {
    top: -12.5rem;
    left: -12.5rem;
  }
  25% {
    top: -14rem;
    left: -13rem;
  }
  50% {
    left: -11rem;
  }
  75% {
    top: -11rem;
  }
  100% {
    top: -12.5rem;
    left: -12.5rem;
  }
}

* {
  margin: 0em;
  padding: 0em;
  user-select: none;
}

html {
  font-size: 10px;
}

body {
  font-size: 10px;
  background-color: var(--primary);
  overflow-x: hidden;
}

.landing {
  padding-top: 12.5rem;
  padding-left: 10rem;
}

.logo-circle {
  border-radius: 100%;
  width: 60rem;
  height: 60rem;
  position: absolute;
  top: -12.5rem;
  left: -12.5rem;
  z-index: -1 !important;
  background-color: var(--primary-light);
  animation: circleFloat 3s ease-in-out 0s infinite;
}
.logo-circle:nth-of-type(2) {
  animation-delay: 0.5s;
}
.logo-circle:nth-of-type(3) {
  animation-delay: 1.5s;
}

.logo {
  color: var(--cta);
  font-size: 7.2rem;
  letter-spacing: 2.2rem;
}

.logo-tag {
  color: var(--primary-text);
  font-size: 3.2rem;
  letter-spacing: 1.375rem;
  margin: 6rem 0;
  line-height: 6.4rem;
}

.title {
  font-size: 3rem;
  color: var(--primary-text);
  letter-spacing: 0.75rem;
  margin: 3rem 0;
  display: inline-block;
  line-height: 6rem;
}

.subtitle {
  color: var(--primary-text);
  font-size: 2.5rem;
}

.supported-logo {
  display: inline-block;
  padding: 10rem;
  margin: 2.5rem;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: all ease-in-out 0.2s;
}

.link-button {
  display: table;
  text-decoration: none;
  padding: 3rem 7.5rem;
  color: var(--primary);
  background-color: var(--cta);
  font-size: 4rem;
  border-radius: 7.5rem;
}

.features {
  margin: 6rem 0;
  padding-left: 10rem;
}

.features .title {
  display: block;
  margin-top: 10rem;
}

.feature-card {
  background-color: var(--primary-light);
  padding: 6rem 7.5rem;
  margin: 10rem 0;
}

.feature-icon {
  padding: 5rem;
  background-position: left !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: black;
  margin: 2.5rem 0;
  display: table;
  width: fit-content;
  border-radius: 100%;
}

.feature-text {
  color: var(--primary-text);
  font-size: 2.8rem;
  text-align: left;
}

footer {
  background-color: var(--primary-medium);
  padding: 6rem 10rem;
}

footer .title {
  width: 100%;
}

.built-with a {
  color: var(--cta);
  text-decoration: none;
  border-bottom: 1px solid var(--cta);
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

footer .link-button {
  margin: 3rem 0;
  position: relative;
  width: calc(100% - 15rem);
  text-align: center;
}

.copyright .landing {
  flex: 1;
  text-transform: uppercase;
}

.welcome .logo,
.copyright .logo {
  line-height: 1.5;
}

.welcome .logo a,
.copyright .logo a {
  color: var(--cta);
  text-decoration: none;
  padding-bottom: 0.5rem;
  line-height: 125%;
  border-bottom: 1px solid;
}

.welcome .landing video {
  display: block;
  max-width: 85%;
  height: auto;
  border-radius: 7rem;
  border: 2px solid var(--cta);
  margin: 10rem 0;
  box-shadow: 0px 0px 50px #c0f30054;
}

.welcome .landing .title.subtitle {
  display: table;
  text-transform: uppercase;
}

.welcome .landing#tips .tip {
  padding: 3rem 0;
  border-bottom: 0.5px solid var(--primary-medium);
  padding-right: 3rem;
}

.welcome .landing#tips .tip:last-of-type {
  border-bottom: none;
}

.welcome .landing#tips .link-button {
  margin-bottom: 7rem;
}

.welcome .landing#tips .tip h6 {
  color: var(--primary-text);
  font-size: 3rem;
  letter-spacing: 0.5rem;
}

.welcome .landing#tips .tip p {
  color: var(--primary-text);
  font-size: 3rem;
  margin: 1.5rem 0;
  letter-spacing: 0.25rem;
}

.landing .supported .supported-logo {
  position: relative;
  border-bottom: 2px solid var(--cta);
}
.landing .supported .supported-logo[data-full-support]::before,
.landing .supported .supported-logo[data-beta-support]::before,
.landing .supported .supported-logo[data-upcoming-support]::before {
  content: 'FULLY SUPPORTED';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2rem;
  left: 0;
  opacity: 1;
  transition: all ease-out 0.3s;
  font-size: 0.8rem;
  text-align: center;
  color: var(--primary);
  font-family: 'GlacialBold';
  background-color: var(--cta);
  padding: 1rem 0;
}

.landing .supported .supported-logo[data-beta-support]::before {
  content: 'BETA SUPPORT';
}

.landing .supported .supported-logo[data-upcoming-support]::before {
  content: attr(data-upcoming-support);
  text-transform: uppercase;
}