@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #254f81;
}

.bg {
    /*background-image: url("./img/landing-page-strip.png");
    background-size: cover;
    background-repeat: no-repeat;*/  
    /** 
    * background-position: value;
    * 
    * Set the starting position of the background image.
    * Reference: https://www.w3schools.com/cssref/pr_background-position.asp
    * 
    * In this case using the values "center bottom" helps to show the bottom part of
    * the image that contains the droids legs and terrain.
    *
    * TODO: Review which property value(s) to use and check the problem with the announcement
    * text positioning.
    */
    /*background-position: center;*/
    /*background-position: center bottom;
    height: 100%;
    position: relative;*/
}

.announcement {
    margin: 0;
    /*font-family: 'Gantari', sans-serif;*/
    font-family: 'Comic Neue', cursive;
    font-weight: 700;
    text-align: center;
    color: white;
    padding: 4vh 5vw;
    font-size: 4vw;
}

.image {
    background-image: url("./img/landing-page-strip.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    width: 100vw;
    height: 80vh;
    position: relative;
}

.copyright {
    margin: 0;
    padding: 0.75em;
    height: 4vh;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    text-align: center;
    background-color: #262626;
    color: #595959;
}

@media screen and (max-width: 1000px) {
    .announcement{
        padding: 10vh 5vw;
        font-size: 8vw;
    }
    
        .copyright {
        font-size: 3vw;
        /*text-align: center;*/
    }
}