:root{
    --titleFont: 'major';
    --textFont: 'pixel';
    --mainBg: black;
    --textWhite: white;
    --textOrange: #FD7E00;
    --logoSize: 24px;
    --titleSize:96px;
    --textSize: 32px;
    --btnBorder: #FD7E00 3px solid;
    --cursor: .15em solid #FD7E00;
}

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'pixel';
    src: url(Fonts/pixel\ font-7.ttf);
}

@font-face {
    font-family: 'major';
    src: url(Fonts/MajorMinus.ttf);
}

@keyframes revealing1 {
  from {
    transform: translateX(100vw);
    filter: blur(50px);
    opacity: 0.5;
  }
  to {
    transform: translateX(40vw);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes revealing2 {
  from {
    transform: translateX(100vw);
    filter: blur(50px);
    opacity: 0.5;
  }
  to {
    transform: translateX(28vw);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes revealing3 {
  from {
    transform: translateX(100vw);
    filter: blur(50px);
    opacity: 0.5;
  }
  to {
    transform: translateX(16vw);
    filter: blur(0px);
    opacity: 1;
  }
}

html, body{
    font-family: var(--textFont);
    background: var(--mainBg);
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
}

header{
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
}

.logo{
    font-family: var(--titleFont);
    color: var(--textWhite);
    font-size: var(--logoSize);
}

nav{
    display: flex;
    gap: 50px;
}

a{
    color: var(--textOrange);
    text-decoration: none;
    font-size: var(--logoSize);
}

.hero{
    width: 100%;
    height: 90vh;
    background-image: url(Images/Hero.png);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.heroText{
    font-family: var(--titleFont);
    font-size: var(--titleSize);
    color: var(--textWhite);
}

.heroCTA{
    padding: 10px 30px;
    border: var(--btnBorder);
    margin-top: 20px;
}

.heroCTA:hover{
    background-color: var(--textOrange);
    color: black;
}

#plot{
    padding: 50px 100px;
    position: relative;
}

.secTitle{
    font-size: var(--titleSize);
    font-family: var(--titleFont);
    color: var(--textWhite);
    position: relative;
    z-index: 2;
}

.secTitle2{
    font-size: var(--titleSize);
    font-family: var(--titleFont);
    color: var(--textWhite);
    position: relative;
    z-index: 2;
    text-align: center;
    
}

.monitor{
    width: 712px;
    height: 768px;
    background-image: url(Images/Monitor.png);
    position: relative;
    padding: 88px 139px 455px 151px;
    box-sizing: border-box;
}

.slidingImages{
    display: flex;
    height: 953px;
    top: 0;
    right: 0;
    position: absolute;
}

.angled1{
    animation: revealing1 800ms ease forwards;
    animation-play-state: paused;
}

.angled2{
    animation: revealing2 800ms 1s ease both;
    animation-play-state: paused;
}

.angled3{
    animation: revealing3 800ms 2s ease both;
    animation-play-state: paused;
}

#plot:hover .angled1{
    animation-play-state: running;
}

#plot:hover .angled2{
    animation-play-state: running;
}

#plot:hover .angled3{
    animation-play-state: running;
}

.monitorText{
    color: var(--textOrange);
    font-size: var(--logoSize);
    animation: typing 3.5s steps(47, end);
    overflow: hidden;
    height: 216px;
    animation-play-state: paused;
}

#plot:hover .monitorText{
    animation-play-state: running;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

#char{
    padding: 50px 100px;
    position: relative;
}

.charContent{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    gap: 100px;
}

.charContent2{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    gap: 100px;
}

.charImgs{
    width: 824px;
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
}

.charName{
    font-size: var(--titleSize);
    font-family: var(--titleFont);
    color: var(--textOrange);
}

.charDesc{
    font-size: var(--textSize);
    color: var(--textWhite);
    margin-top: 40px;
}

#world{
    padding: 50px 100px;
    position: relative;
}

.worldVideo{
    margin-left: -100px;
    margin-top: -50px;
    position: relative;
}
.wDesc1{
    font-size: var(--textSize);
    color: var(--textWhite);
    text-align: center;
    
}

.wDesc2{
    font-size: var(--textSize);
    color: var(--textWhite);
    text-align: center;
    margin-top: 60px;
}

#watch{
    margin-top: 80px;
    padding: 50px 100px;
}

.ytEmbed{
    width: 100%;
    height: 90vh;
    box-sizing: border-box;
}

.muteBtnContainer{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 90vh;
    right: 100px;
}

#muteBtn{
    background-color: var(--textOrange);
    padding: 23px 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999;
    cursor: pointer;
}