:root{
    --black: #1f2d3d;
    --dark-muted: #98a6bd;
    --muted: #8492a6;
    --white: #eeeeee;
    --red: #ec3750;
    --yelow: #f1c40f;
    --green: #33d6a6;
    --cyan: #5bc0de;
    --blue: #338eda;
    --purple: #a633d6;
    --cf-primary-blue: #53bfffff;
    --cf-primary-orange: #ffa23c;
    --cf-secondary-navy: #384fbc;
    --cf-secondary-green: #52cb77;
    --cf-secondary-brown: #ad684f;
    --cf-secondary-teal: #9be8fe;
    --cf-secondary-tortoise: #57ecd6;
}

@font-face {
    font-family: 'Dream Planner';
    src: url('./fonts/dream-planner-font-duo/dreamplanner.otf') format('opentype');
}

@font-face{
    font-family: 'Ember Fire';
    src: url('./fonts/ember-fire-font/ember-fire.otf') format('opentype');
}

#title{
    font-family: 'Dream Planner', sans-serif;
    color: var(--cf-secondary-brown);
    position: relative;
    z-index: 1;
}

#title h1{
    font-size: 7rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    rotate: -3deg
}

#title h3{
    font-size: 3rem;
    margin-top: -3rem;
    margin-left: 10rem;
    rotate: 1deg
}

#container{
    position: relative;
    margin-top: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40rem;
}

#bg-map{
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    object-fit: contain;
    z-index: -1;
}

#join-container {
    align-items: center;
}

#video-container{
    width: 100%;
    height: 45rem;
}

body{
    background: var(--cf-primary-blue) linear-gradient(37deg, var(--cf-primary-blue) 0%, var(--cf-secondary-navy) 100%);
    text-align: center;
    font-family: "Ember Fire", sans-serif;
    font-size: 2rem;
}

input{
    appearance: none;
    border: none;
    height: 2.5rem;
    background-color: var(--cf-secondary-brown);
    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
    padding: 0.2rem 0.1rem 0 1rem;
    font-size: 1.5rem;
    width: 10rem;
    font-family: 'Ember Fire', sans-serif;
    color: var(--white);
}

button{
    appearance: none;
    border: 5px solid var(--cf-secondary-brown);
    border-radius: 1rem;
    font-size: 1.5rem;
    padding: 0.5rem 1rem 0.1rem 1rem;
    font-family: 'Ember Fire', sans-serif;
    background-color: var(--cf-primary-orange);
    color: #7f4b38;
    font-weight: bold;
    cursor: pointer;
}

button[disabled]{
    cursor: not-allowed;
    background-color: var(--dark-muted);
    color: var(--muted);
    border-color: var(--muted);
}

#bg-grass{
    position:fixed;
    bottom: 0;
    z-index: -5;
    width: 100%;
    left: 0;
    height: 45rem;
}

#bg-white-cloud, #bg-orange-cloud{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

}

#bg-white-cloud{
    z-index: -7;
    height: 70rem;
    opacity: 80%
}
#bg-orange-cloud{
    z-index: -6;
    height: 70rem;
    opacity: 90%
}

#events{
    height: 20rem;
    overflow-y: scroll;
}

#lobby-container{
    margin-top: -3rem;
}

#lobby-container h3{
    margin-bottom: 1rem;
    color: var(--cf-secondary-brown);
}

#leave{
    z-index: 5;
    margin-top: 1rem;
    font-size: 3rem;
}

#video-container-container{
    display: none;
    text-align: center;
    align-items: center;
}