@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Rubik+Dirt&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Zen+Dots&display=swap');

:root {

    --title-font-family: "Zen Dots", sans-serif;
    --title-font-family-first-letter: "Zen Dots", sans-serif;
    --title-font-weight: 400; /*100-900 available for Zen Dots*/
    --title-font-weight-bold: 400; /*400 available for Zen Dots*/
    --title-font-weight-first-letter: 400; /*400 available for Zen Dots*/
    --title-font-style: normal;
    --title-font-size: 1cm;
    --title-font-line-height: 2.6cm;
    --title-font-color-firstletter: /*#E97451*/ #2AAA8A ;
    --title-font-color: black;
    --title-font-letter-spacing: 0.2px;

    --title:  
        var(--title-font-style) 
        var(--title-font-weight) 
        var(--title-font-size)/
        var(--title-font-line-height) 
        var(--title-font-family);

    --hello-font-family: "Spectral", serif;
    --hello-font-weight: 800; /*2-800 available*/
    --hello-font-style: normal;
    --hello-font-size: 15vw;
    --hello-font-color: black;
    --hello-font-letter-spacing: 0.2px;

    --hello:  
        var(--hello-font-style) 
        var(--hello-font-weight) 
        var(--hello-font-size)
        var(--hello-font-family);

    --you-font-family: "Playfair Display", serif;
    --you-font-weight: 900; /*4-900 available*/
    --you-font-style: italic;
    --you-font-size: 15vw;
    --you-font-color: #2AAA8A;
    --you-font-letter-spacing: 0.2px;

    --you:  
        var(--you-font-style) 
        var(--you-font-weight) 
        var(--you-font-size)
        var(--you-font-family);

    --intro-font-family: "Parkinsans", serif; 
    --intro-font-weight: 400; /*3-800 available*/
    --intro-font-style: normal;
    --intro-font-size: 1.3vw;
    --intro-font-color: gray;
    --intro-font-letter-spacing: 0.2px;

    --intro:  
        var(--intro-font-style) 
        var(--intro-font-weight) 
        var(--intro-font-size)
        var(--intro-font-family);
}

* {
    box-sizing: border-box;
}

body {
    font-family: serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff;
    overflow: hidden;
}

.title {
    font: var(--title);
    color: var(--title-font-color);
    letter-spacing: var(--title-font-letter-spacing);
    display: inline-flex;
    line-height: 1cm;
    margin-bottom: -0.12cm;
}

.title.drive,
.title.cademy {
    background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(21,86,70,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

span.hello, span.you {
    line-height: 1;
}

span.hello {
    font: var(--hello);
    color: var(--hello-font-color);
    letter-spacing: var(--hello-font-letter-spacing);
    margin: 0;
    background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(21,86,70,1) 40%, rgba(21,86,70,1) 60%, rgba(2,0,36,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: left;
    display: inline-block !important;
    position:relative;
    clip-path: inset(3.1vw 0 2.6vw 0);
    border: 0px solid red;
    transition: background-position 0.6s cubic-bezier(0,0,0,0);
}

span.hello:hover {
    background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(21,86,70,1) 40%, rgba(21,86,70,1) 60%, rgba(2,0,36,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: right;
    display: inline-block !important;
    position:relative;
    z-index:2;
    transition: background-position 0.6s cubic-bezier(0,0,0,0);
}

span.hello:hover::after {
    font: var(--hello);
    color: rgba(0,0,0,0);
    background: rgba(255,0,0,0.0);
    display: inline-block !important;
    z-index:2;
    border: 0px solid red;
    content: 'Hello,';
    box-sizing: border-box;
    position:absolute;
    left:0;
}

span.you {
    font: var(--you);
    color: var(--you-font-color);
    letter-spacing: var(--you-font-letter-spacing);
    margin: 0;
    background: -webkit-linear-gradient(0deg, rgba(42,170,138,1) 0%, rgba(21,86,70,1) 40%, rgba(21,86,70,1) 60%, rgba(42,170,138,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: right;
    z-index:2;
    clip-path: inset(3.5vw 0 2.3vw 0);
    border: 0px solid green;
    transition: background-position 0.6s cubic-bezier(0,0,0,0);
}

span.you:hover {
    background: -webkit-linear-gradient(0deg, rgba(42,170,138,1) 0%, rgba(21,86,70,1) 40%, rgba(21,86,70,1) 60%, rgba(42,170,138,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: left;
    display: inline-block !important;
    position:relative;
    z-index:2;
    transition: background-position 0.6s cubic-bezier(0,0,0,0);
}

span.you:hover::after {
    font: var(--you);
    color: rgba(0,0,0,0);
    background: rgba(255,0,0,0.0);
    display: inline-block !important;
    z-index:2;
    border: 0px solid green;
    content: 'You.';
    box-sizing: border-box;
    position:absolute;
    left:0;
}

.intro {
    font: var(--intro);
    color: var(--intro-font-color);
    letter-spacing: var(--intro-font-letter-spacing);
}

.titleWrapper {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0.5cm;
    margin-top: 0.5cm;
    /*border: 1px solid red;*/
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    height: calc(0.98cm * 1.5);
    width: calc(3cm * 1.5);
    background-image: url("../img/drivecademy_logo.webp");
    background-size:cover;
    background-repeat: no-repeat;

}

.greetingWrapper {
    display: flex;
    width: 100vw;
    padding-left: 10vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.introWrapper {
    display: flex;
    width: 100vw;
    padding-left: 10vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.introWrapper strong {
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(42,170,138,1) 50%, rgba(0,0,0,1) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: left;
    border: 0px solid red;
    transition: background-position 0.6s cubic-bezier(.11,.68,.88,.61);
}

.introWrapper:hover strong {
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(42,170,138,1) 50%, rgba(0,0,0,1) 100%);
    background-clip: text;
    background-size: 200% 100%;
    background-position: right;
    -webkit-text-fill-color: transparent;
    border: 0px solid red;
    transition: background-position 0.6s cubic-bezier(.11,.68,.88,.61);
}