html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient(to bottom, #87CEEB, #FEEB8E);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

h1 {
    align-self: center;
    text-align: center;
    color: white;
    font-size: 50px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
}

img#sun {
    width: 200px;
    height: 200px;
    align-self: center;
    margin-bottom: 10px;
}

section.central {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  div.infos {
    display: flex;
  }
  
  div.info-bh,
  div.info-Oslo {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    color: white;
    margin: 10px;
    padding: 10px;
    background-color: rgba(48, 48, 48, 0.8);
    border-radius: 5px;
    width: 200px;
    height: 150px;
  }

p#mainWarning {
    align-self: center;
    text-align: center;
    color: black;
    background-color: #feeb8eb7;
    width: 600px;
    border-radius: 15px;
}

button {
    color: rgb(0, 0, 0);
    background-color: #87CEEB;
    align-self: center;
    width: fit-content;
    height: 40px;
    border-radius: 5px;
    border: 0px;
}

button:hover {
    box-shadow: 0 0 5px 2px black;
  }

img#moon {
    width: 200px;
    height: 200px;
    align-self: center;
    margin-bottom: 10px;
}

footer {
    color: rgb(0, 0, 0);
    margin-top: auto;
    align-self: center;
}

a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

p#timeBH,
p#timeOslo {
    color: rgb(141, 226, 3);
    margin-top: 0px;
}

p#weatherBH,
p#weatherOslo {
    color: #87CEEB;
    margin-bottom: 0px;
}

.snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 99.9%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 10s linear infinite;
  }
  
  .snow div {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 15s linear infinite;
  }
  
  @keyframes animatedBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0px 300px;
    }
  }

  .rain {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.rain-drop {
    width: 2px;
    height: 40px;
    background-color: rgba(148, 148, 148, 0.8);
    position: absolute;
    top: -40px;
    animation: raindrop 1.5s linear infinite;
}

@keyframes raindrop {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

p#timeuser {
    text-align: center;
}

.info-Oslo {
  background-image: url(../img/norway.png);
  background-repeat: no-repeat;
}

.info-bh {
  background-image: url(../img/brazil.png);
  background-position-x: 80%;
  background-repeat: no-repeat;
}