* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --clr-low: #7ed957;
    --clr-medium: #38b6ff;
    --clr-high: #fade3f;
    --clr-extreme: #ff3131;
    --clr-primary: white;
    --clr-dark: black;
    --clr-light: white;
}

body {
    background-color: var(--clr-light);
    font-family:  sans-serif;
    margin: 10px;
    padding: 10px;
}

h1 {
    color: var(--clr-dark);
}

p {
    margin: 5px;
    color: var(--clr-dark);
    font-weight: bold;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.sun {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.header__sun {
    width: 300px;
    height: 300px;

}
.uv__container {
    z-index: 1;
    position: fixed;
}

.header__uv {
    font-size: x-large;
}

.indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.indicator__low {
    background-color: var(--clr-low);
    margin: 0.5rem;
    padding: 0.2rem;
    border-radius: 0.2rem;
    width: 7rem;
    height: 2rem;
    text-align: center;
    align-content: center;
    font-weight: bold;
    

}
.indicator__medium {
    background-color: var(--clr-medium);
    margin: 0.5rem;
    padding: 0.2rem;
    border-radius: 0.2rem;
    width: 7rem;
    height: 2rem;
    text-align: center;
    align-content: center;
    font-weight: bold;
    

}
.indicator__high {
    background-color: var(--clr-high);
    margin: 0.5rem;
    padding: 0.2rem;
    border-radius: 0.2rem;
    width: 7rem;
    height: 2rem;
    text-align: center;
    align-content: center;
    font-weight: bold;
    

}
.indicator__extreme {
    background-color: var(--clr-extreme);
    margin: 0.5rem;
    padding: 0.2rem;
    border-radius: 0.2rem;
    width: 7rem;
    height: 2rem;
    text-align: center;
    align-content: center;
    font-weight: bold;
    

}