body {
    background: linear-gradient(to right, #0083fe, #00fff0);
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: rgba(0, 0, 0, 0.3);
    width: 150vw;
    height: 65vh;
    border-radius: 30px;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    grid-template-rows: repeat(30, minmax(0, 1fr));
    position: fixed;
}

.d1 {
    grid-column: 2 / 23;
    grid-row: 2 / 20;
    
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: repeat(15,minmax(0, 1fr));
    grid-template-rows: repeat(15,minmax(0, 1fr));
}


.d2 {
    grid-column: 2/ 30;
    grid-row: 24 / 29;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.dd1 {
    display: inline-block;
    color: white;
    font-weight: 700;
}

.molnet{
    height: 20px;
    width: 20px;
}

.d3 {
    background-color: rgba(0, 0, 0, 0.3);
    grid-column: 25 / 30;
    grid-row: 2/20;
    
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}



.sunny {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.loc {
    position: absolute;
    color: white;
    z-index: 2;
    margin: 0;
    font-size: 50px;
    grid-row: 2/3;
    grid-column: 2 / auto;
    font-weight:600;
}

.date {
    position: absolute;
    color: white;
    z-index: 2;
    margin: 0;
    grid-row: 4/5;
    grid-column: 2 / auto;
    font-size: 30px;
    font-weight: 500;
}

.vader {
    font-size:55px;
    z-index: 2;
    position: absolute;
    grid-column: 5 / auto;
    grid-row: 6/7;
    
}


 




.deg {
    font-size: 75px;
    position: absolute;
    z-index: 2;
    color: white;
    grid-column: 2/auto;
    grid-row: 6/8;
    margin:0;
    align-self: center;
}


.info {
    background-color: rgba(0, 0, 0, 0.5);
    grid-column: 11/15;
    grid-row: 3/ 14;
    
    z-index: 13;
    border-radius: 30px;
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tips {
    
    color: white;
    font-weight: 700;
}

.dagen {
   
    color: white;
    font-weight: 500;
}



.rain{
    color:white;
    font-weight: 700;
    margin:0;
}

.wind {
    color: white;
    font-weight: 700;
    margin:0;
}

@media (max-width: 1400px) and (min-width: 720px) {

    .container {
        width: 90vw;
        height: 65vh;
    }

    .loc {
        font-size: 4vw;
    }

    .date {
        font-size: 2vw;
    }

    .vader {
        font-size: 4vw;
    }

    .deg {
        font-size: 5vw;
    }

    .tips {
        font-size: 1.4vw;
    }

    .dagen {
        font-size: 1.2vw;
    }

    .wind,
    .rain {
        font-size: 1.1vw;
    }

    .dd1 {
        font-size: 1.1vw;
    }
}