index.css

.body {
    font-family: sans-serif;
    font-size: 40px;
    width: 100%;
    min-height: 100vh;
    display: flex;
    margin: 0 auto;
    background: #E5E5E5;
}

.perentWrap {
    margin: 0 auto;
    width: 700px;
    height: 510px;
    background: #E5E5E5;
    padding-top: 20px;
    padding-left: 50px;
}

.perent {
    width: 650px;
    height: 470px;
    margin: 0 auto;
    position: absolute;
    display: flex;
    background-color: #E5E5E5;
    ;
}

.wrapper {
    margin: 0 auto;
    height: 452px;
    width: 612px;
    padding-top: 14px;
    padding-left: 12px;
    background-color: #FFFFFF;
    grid-auto-flow: column;
}

.window {
    width: 600px;
    height: 435px;
    border: 1px solid #000000;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 3fr;
    grid-template-rows: 45px 45px 4fr 45px
}

.header {
    grid-column: 1/5;
    border: 1px solid #000000;
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.nowBtn {
    text-decoration: none;
    color: #000;
    display: grid;
    grid-column: 1/2;
    grid-row: 4/5;
    border: 1px solid #000000;
    padding: 12px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    background-color: #FFFFFF;
    justify-content: center
}

.detailsBtn {
    text-decoration: none;
    color: #000;
    display: grid;
    grid-column: 2/3;
    grid-row: 4/5;
    border: 1px solid #000000;
    padding: 12px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    background-color: #FFFFFF;
    justify-content: center
}

.forecastBtn {
    text-decoration: none;
    color: #000;
    display: grid;
    grid-column: 3/4;
    grid-row: 4/5;
    border: 1px solid #000000;
    padding: 12px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    background-color: #FFFFFF;
    justify-content: center
}

.forecastBtn .yt-icon-button:focus {
    vertical-align: middle;
    color: #000;
}

.aktiv_btn {
    background-color: #000;
    color: #FFFFFF;
}

.addLocation {
    border: 1px solid #000000;
    display: grid;
    grid-column: 4/5;
    grid-row: 2/3;
    align-items: flex-end;
    padding-left: 18px;
    padding-bottom: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
}

.list {
    display: grid;
    grid-row: 3/6;
    grid-column: 4/5;
    border: 1px solid #000000;
    align-items: flex-start;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 43px;
    overflow: scroll;
    height: auto;
}

.list::-webkit-scrollbar {
    width: 0;
}

.inputWindow {
    height: 25px;
    width: 530px;
    font-size: 18px;
    border-color: #020202;
    border-radius: 5px;
    margin-left: 13px;
    grid-column: 1/4;
}

.inputButton {
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    margin-right: 20px;
    grid-column: 4;
}

.listLocation {
    list-style: none;
    padding: 18px;
    align-items: center;
    grid-row: 4/5;
}

.enterCity {
    display: grid;
    width: 245px;
    height: 40px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 43px;
    justify-items: start;
    border: none;
    background-color: #FFFFFF;
}

.infoWeatherNow {
    display: grid;
    grid-column: 1/4;
    grid-row: 2/5;
    border: 1px solid #000000;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-auto-flow: column;
    align-items: center;
    justify-items: start;
}

.temperature {
    margin-left: 13px;
    grid-column: 1/4;
    grid-row: 1/3;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 70px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(5, 18px);
    grid-template-rows: repeat(5, 16px);
    padding-top: 20px;
}

.atmosfere {
    grid-column: 2/8;
    grid-row: 3/8;
    height: 170px;
    width: 170px;
    margin-left: 30px;
}

.city {
    display: grid;
    margin-left: 18px;
    grid-column: 1/5;
    grid-row: 8/9;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    justify-items: baseline;
}

.heart {
    margin-left: 25px;
    grid-column: 7/9;
    grid-row: 8/9;
    align-items: center;
    justify-items: center;
}

.celc {
    grid-column: 5/6;
    grid-row: 2/3;
}

.infoWeatherDetails {
    grid-column: 1/4;
    grid-row: 2/5;
    list-style: none;
    display: grid;
    grid-template-rows: 45px 50px repeat(5, 43px);
    border: 1px solid #000000;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    padding-left: 18px;
}

.cityName {
    grid-row: 1/3;
    margin-top: 13px;
}

.infoWeatherForecast {
    display: grid;
    grid-column: 1/4;
    grid-row: 2/5;
    list-style: none;
    padding-left: 18px;
    display: grid;
    grid-template-columns: 265px;
    grid-template-rows: 45px 295px;
    border: 1px solid #000000;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
}

.lastCityName {
    grid-row: 1/2;
    margin-top: 13px;
}

.forecast {
    width: 265x;
    height: 295px;
    display: grid;
    list-style: none;
    grid-gap: 9px;
    overflow: scroll;
}

.forecast::-webkit-scrollbar {
    width: 0;
}

.forecastWindow {
    display: grid;
    grid-template-columns: 140px 110px;
    grid-template-rows: repeat(6, 20px);
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    border: 1px solid #000000;
    padding-top: 6px;
    padding-left: 8px;
}

.img {
    width: 60px;
    height: 50px;
}

.time {
    display: grid;
    justify-items: center;
}

.date {
    grid-row: 1/3;
}

.temper {
    grid-row: 4;
}

.feelsLike {
    grid-row: 5/7;
}

.weatherconditions {
    grid-row: 2/7;
    grid-column: 2;
    display: grid;
    grid-template-rows: 21px 31px;
    align-content: center;
    justify-content: center;
    justify-items: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
}

.infoWeatherPassiv {
    display: none;
}

.infoWeatherAktiv {
    display: grid;
}

.location {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between
}

.deleteButton {
    width: 20px;
    height: 20px;
    border: none;
    background-color: #E5E5E5;
    background-image: url("delete.png");
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
}

.location:hover .deleteButton {
    visibility: visible;
}