@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght@400;500;600;700;900&family=Poppins&family=Raleway&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

html, body {
    margin: 0;
    padding: 0;
    background: url('sql.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

h1, h2, h3, h4, h5, p, span {
    padding: 0; margin: 0;
}


#loading {
    background-color: #000;
    font-family: 'Raleway';
    font-weight: 700;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    opacity: 1;
    transition: 0.35s ease-in-out opacity;
    color: #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: max(6vw, 6vh);
}

#grid {
    display: grid;
    grid-template-columns: 10fr 3.15fr;
    width: 100vw;
    height: 100vh;
    color: #e1e1e1;
    background: rgba(5, 87, 165, 0.555);
    backdrop-filter: blur(max(0.6vw, 0.6vh));
}

#left {
    display: grid;
    grid-template-rows: 2fr 15fr 3fr;
    background-color: #00000022;
}


#lesson {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: max(2.3vw, 2.3vh);
    font-family: 'Montserrat', sans-serif;
    flex-direction: row;
    text-shadow: 0 0 0.13em #000;
    gap: 1vw;
}

#news {
    font-size: 2.5vw;
    word-wrap: break-word;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-shadow: 0 0 0.2em #000;
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

#news > * {
    box-sizing: border-box;
}

.double, .single {
    display: flex;
    /* gap: 1vw; */
    flex-direction: row;
}

#news .text > h1 {
    font-size: 3vw !important;
    text-align: center;
}

#news .text {
    display: flex;
    flex-direction: column;
    flex:1;
}

.single .text {
    align-self: center;
}

.nr1, .nr2 {
    flex: 1;
    /* align-self: center; */
    align-self: stretch;
    display:flex;
    align-items: baseline;
    padding: 2%;
    box-sizing: border-box;
}
.nr1 {
    border-right: 1px solid #fff;
}

.nr2 {
    border-left: 1px solid #fff;
}
/* 
#news img {
    box-sizing: border-box;
    display: block;
    margin: 0;
    max-height: 70vh;
    max-width: 100%;
    border-radius: max(1vw, 1vh);
} */


#news img {
    /* height: calc(100vh - 12vw); */
    /* height: 65vh; */
    height: 75vh;
    /* width: 76vw; */
    width: 100%;
    object-fit: contain;
    /* border: solid 0px;
    border-radius: 2vw; */
    box-sizing: border-box;
    display: block;
    margin: 0;
    max-height: 75vh;
    max-width: 100%;
    border-radius: max(1vw, 1vh);
    /* border-radius: 200px; */
    overflow: hidden;
}

#news iframe {
    box-sizing: border-box;
    display: block;
    margin: 0;
    height: 70vh;
    width: 100%;
    border-radius: max(1vw, 1vh);
    overflow: hidden;
}

.news-box {
    grid-area: 1 / 1 / 2 / 2;
}

.test {
    font-size: 2.5vw;
    grid-area: 1 / 1 / 1 / 1;
    box-sizing: border-box;
    padding: 3%;
    /* max-height: 85vh; */
}

.red {
    color: #ee5555de;
    font-weight: 700;
    /* font-size: max(2vw, 2vh); */
}

#right {
    background-color: #00000067;
    display: grid;
    grid-template-rows: 3fr 9fr 3fr;
    max-width: 30vw;
}

#datetime {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    background-color: #00000047;
}

#time {
    font-family: 'Montserrat', sans-serif;
}

#time-hm {
    font-weight: 700;
    font-size: max(5vw, 5vh);
}

#time-s {
    font-weight: 400;
    color: #e1e1e1da;
    font-size: max(4vw, 4vh);
}

#date {
    /* font-size: max(1.6vw, 1.6vh); */
    font-size: max(2vw, 2vh);
}

#weather {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: max(1.6vw, 1.6vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10vh;
    align-items: center;
    
}


#weather span {
    display: block;
}

#tempinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.3vh;
    /* flex: 0 0 100%;
    width: 100%; */
}

span#temperature {
    display: flex;
    flex-direction: row;
    margin-top: max(-3.7vw, -3.7vh);
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

#wicontest {
    font-size: max(5vw, 5vh);
}

span#temperatureValue {
    font-weight: 700;
    font-size: max(4vw, 4vh);
    text-shadow: 0 0 0.1em #000;
}

span#description {
    text-shadow: 0 0 0.18em #000;
    font-weight: 500;
    display:table-caption;
    width: 17.5vw !important;
    text-align: center;
    font-size: max(2vw, 2vh);
}

img.weather-icon {
    width: max(10vw, 10vh);
}

#airinfo {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}

#air {
    display: flex !important;
    gap: 3%;
    align-items: center;
    font-weight: 700;
    flex-direction: row;
    justify-content: center;
}

#airtitle {
    font-family: 'Poppins', sans-serif;
    font-size: max(2.4vw, 2.4vh);
    text-shadow: 0 0 0.18em #000;
}

#air-icon {
    font-size: max(2.7vw, 2.7vh);
    text-shadow: 0 0 0.18em #000;
}

#airquality {
    text-shadow: 0 0 0.13em #000;
    flex: 0 0 auto;
    font-size: max(2.5vw, 2.5vh);
}

div#logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

img#logo {
    width: max(14vw, 14vh);
    -webkit-filter: drop-shadow(0 0 0.2em black);
    filter: drop-shadow(0 0 0.2em black);
}

#vacation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: max(1.8vw, 1.8vh);
    font-family: 'Montserrat', sans-serif;
    flex-direction: row;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,0.5382528011204482) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.5382528011204482) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0.5382528011204482) 0%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    text-shadow: 0 0 0.13em #000;
    gap: 1vw;
}

#vacation-radius {
    min-width: 42vw;
    font-size: max(2.4vw, 2.4vh);
}

.all-radius {
    text-align: center;
    /* padding: 1.4% 0.7%;
    margin-top: -0.8%; */
    background-color: #0000004b;
    border-radius: max(2vw, 2vh);
    padding: 1vh 2vw;
}

#lesson-radius {
    min-width: 35vw;
}


#contents {
    transition: 0.5s ease-in-out opacity;
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    /* padding: 4vh 4vw 10vh 4vw; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.news-padding {
    display: flex;
    flex-direction: column;
    gap: 4vh;
    padding: 3vh 3vw;
    box-sizing: border-box;
}

.news-title {
    display: block;
    font-size: 3.3vw !important;
    text-align: center;
}

.news-text {
    display: block;
}

#news-page {
    /* height: 6vh; */
    background-color: #0000004b;
    margin: 0;
    box-sizing: border-box;
    /* padding: 0 2.5vw; */
    /* position: absolute; */
    /* font-size: 1.8vw !important; */
    /* bottom: 1.5vh; */
    /* left: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* transform: translateX(-50%); */
    border-radius: max(2vw, 2vh);
    padding: 1vh 2vw;

}