body {
    background-color: #0D1821;
    background-image: url("../Bilder/jcaq7gsamypc1.png");
    background-position:top;
    background-size:auto;
   margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#container {
    display: flex;
    grid-row: 16/20;
    grid-column: 2/20;
    gap: 15px;
    margin: 10px;
    box-sizing: border-box;
}


.Day {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12.7px);
    -webkit-backdrop-filter: blur(12.7px);
    border: 1px solid rgba(255, 255, 255, 0.37);
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
    width: 14vw;
    height: 20vh;
    transition: 0.5s;
}
.Day:hover{
    transform:scale(1.1);
    z-index:10;
    
}
#grid {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(20,1fr);
    grid-template-rows: repeat(20,1fr);
}
.dayname {
    grid-column: 1/11;
    grid-row: 1/3;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 1.6vw;
    font-family: "Lilita One", sans-serif;
}
.high {
    grid-column: 4/11;
    grid-row: 1/8;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.4vw;
    color: orangered;
}
.low {
    grid-column: 1/8;
    justify-content: center;
    grid-row: 1/8;
    align-items: center;
    display: flex;
    font-size: 1.4vw;
    color: deepskyblue;
}
.Day1 {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12.7px);
    -webkit-backdrop-filter: blur(12.7px);
    border: 1px solid rgba(255, 255, 255, 0.37);
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
  
    
    transition: 0.5s;
    grid-row:4/15;
    grid-column:9/13;
    margin: 0 2vh 0 2vh
}
.daynamecurrent {
    grid-column: 1/11;
    grid-row: 1/3;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 2.3vw;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    text-align:center;
}
.current {
    grid-column: 2/12;
    grid-row: 1/10;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 3vw;
    text-align:center;
}
.highcurrent {
    grid-column: 8/11;
    grid-row: 1/10;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 2vw;
    text-align: center;
    color: orangered;
}
.lowcurrent {
    grid-column: 1/5;
    grid-row: 1/10;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 2vw;
    text-align: center;
    color: deepskyblue;
}
#bot {
    background: rgba(255, 255, 255, 0.29);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.2px);
    -webkit-backdrop-filter: blur(6.2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    grid-row: 8/11;
    grid-column: 1/11;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
    display:grid;
}
#sunrisepic {
    background-image: url("../Bilder/SUNUPYELLOW.png");
    background-size: cover;
    grid-column: 2/5;
    grid-row: 2/5;
    width: 2.5vw;
    height: 2.5vw;
}
#sunsetpic {
    background-image: url("../Bilder/SUNDOWNYELLOW.png");
    background-size: cover;
    grid-column: 2/5;
    grid-row: 6/9;
    width: 2.5vw;
    height: 2.5vw;
}
#sunrisetimecurrent {
    grid-column: 4/6;
    grid-row: 2/5;
    font-size: 1.3vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sunsettimecurrent {
    grid-column: 4/6;
    grid-row: 6/9;
    font-size: 1.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#bot2 {
    background: rgba(255, 255, 255, 0.29);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.2px);
    -webkit-backdrop-filter: blur(6.2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    grid-row: 6/11;
    grid-column: 1/11;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
    display: grid;
}

#sunrisetime {
    grid-column: 4/5;
    grid-row: 1/6;
    font-size: 1vw;
    display:flex;
    align-items:center;
}
#sunsettime {
    grid-column: 4/5;
    grid-row: 6/10;
    font-size: 1vw;
    display: flex;
    align-items: center;
}
#sunrisepic2 {
    background-image: url("../Bilder/SUNUPYELLOW.png");
    background-size: cover;
    grid-column: 2/5;
    grid-row: 2/5;
    width: 1.8vw;
    height: 1.8vw;
}

#sunsetpic2 {
    background-image: url("../Bilder/SUNDOWNYELLOW.png");
    background-size: cover;
    grid-column: 2/5;
    grid-row: 6/10;
    width: 1.8vw;
    height: 1.8vw;
}
#title {
    color: white;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    text-align: center;
    grid-column: 1/21;
    display: flex;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    font-size:2.5vw;
    grid-row:1/6;
    align-items:center,
}