@font-face {
    font-family: Jedi;
    src: url(fonts/jedi.otf);
}

@font-face {
    font-family: Jedi-Italic;
    src: url(fonts/jedi-italic.otf);
}

body{
    background-image: url('imgs/stars.jpg');
    color:white;
}

.container {
    display: flex;
    width: 100%;
    background:rgba(0,0,0,.5);
}

.joke-wrapper {
    margin: auto;
}

.joke {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 15px!important;
    font-family: 'Helvetica';
    font-size: 1.5em;
}

.image {
    
    width: 300px;
    height: 300px;
    margin: 20px;
}

#og .image {
    background: url("./imgs/comedian.jpg");
    background-repeat: no-repeat!important;
    background-size: cover!important;
    flex-shrink:0;
}

#og .text{
    font-family: 'Helvetica';
    font-size: 2rem;
    font-weight:bold;
}


#yoda .image {
    background: url("./imgs/yoda.jpg");
    background-repeat: no-repeat!important;
    background-size: cover!important;
    flex-shrink:0;
}

#yoda .text {
    font-family: 'Jedi';
    font-size: 2rem;
    max-width:700px;
}

h3{
    font-family: 'Jedi';
    color:#ffe81f;
}

#title, #subtitle{
    transform: perspective(300px) rotateX(25deg);
        
}

#title{
    font-size:10em;
    transform-origin: 50% 100%;
}

h3#subtitle{
    font-size:2.5rem;
}

@media only screen and (min-width: 600px){
    h3{
        font-size:2rem;
    }
    #yoda .text {
        font-size: 1.75rem;
        max-width:700px;
    }

    #og .text{
        font-size: 2rem;
    }
    .image {
        width: 200px;
        height: 200px;
        margin: 20px;
    }

    .joke{
        font-size: 1.5em;
    }
    #title{
        font-size:12rem;
    } 
    h3#subtitle{
        font-size: 2em;
    }
    
}