@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;400;900&display=swap');

/*Universal*/
*{
    box-sizing: border-box;
}
:root{
    --cobalt: hsl(194, 48%, 26%);
    --sky: hsl(191, 74%, 46%);
    --grass: hsl(134, 41%, 51%);
    --sun: hsl(44, 100%, 65%);
    --sunset: hsl(340, 76%, 63%);
}
.hidden{
    display:none;
}
body{
    margin:0;
    padding:0;
}

/*Header*/
header{
    background-image: url("images/solar.jpg");
    background-position:70% 15%;
    width:100%;
    margin:0;
    display:flex;
}
header div{
    position:relative;
}
header div:first-of-type{
    background-image:linear-gradient(to right, hsl(194, 48%, 26%), hsla(194, 48%, 26%, 97%), hsla(194, 48%, 26%, 96%), hsla(194, 48%, 26%, 95%), hsla(194, 48%, 26%, 94%), hsla(194, 48%, 26%, 0%));
    padding:2rem 20rem 2rem 8rem;
    flex:3.8;
}
header div h1{
    margin:0;
    margin-bottom:3rem;
    /* text-align:center; */
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:400;
    font-size:4.9rem;
    color:white;
}
header div p{
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:100;
    font-size:2.4rem;
    color:white;
}
header div:last-of-type{
    flex:1;
}
header div img{
    position:absolute;
    right:30%;
    top:10%;
}

/*Countdown*/
.countdown{
    background-color:hsla(191, 74%, 46%, 40%);
    color:var(--cobalt);
    margin:0;
    padding:5rem 3rem 3rem 3rem;
}
h2{
    margin-top:0;
    margin-bottom:1.5rem;
    text-align:center;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:400;
    font-size:4rem;
}
.timer{
    display:flex;
    margin:0 auto;
    margin-bottom:4rem;
    width:1000px;
}
.timer div{
    flex:1;
    text-align:center;
}
.timer div .label{
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-size:1.5rem;
    margin-bottom:0;
}
.timer div .count{
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:900;
    font-size:7rem;
    margin:0;
}

/*Accordion*/
.accordionButton{
    border:none;
    border-radius:0;
    width:100%;
    margin:0;
    padding:2rem;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-size:3rem;
    text-align:center;
    color:white;
    background-color: var(--grass);
}
.accordionButton:hover{
    cursor:pointer;
    background-color: hsl(134, 41%, 40%);
}

/*Articles*/
article{
    background-color:hsla(44, 100%, 65%, 20%);
    padding-top:3rem;
}
article h3{
    text-align:center;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:400;
    font-size:3rem;
    margin:0;
}
article h4{
    text-align:center;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-weight:400;
    font-size:2.5rem;
    color:hsl(44, 100%, 30%);
    margin-top:0;
    margin-bottom:1rem;
}
article div{
    display: flex;
    padding: 0 4rem;
    padding-bottom:4rem;
}
article div img{
    flex:1;
}
article div p{
    flex:2;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-size:1.5rem;
    font-weight:100;
    color:hsl(44, 100%, 30%);
    padding-top:1rem;
    padding-left:2rem;
}

/*Carousel*/
.carousel{
    position:relative;
}
.carouselButton{
    border:none;
    border-radius:50%;
    width:50px;
    height:50px;
    position:absolute;
    top:35%;
    background-color:var(--sun);
    color:hsl(44, 100%, 30%);
    font-size:2rem;
}
.carouselButton:hover{
    cursor: pointer;
    background-color:hsl(44, 100%, 50%);
}
#back{
    left:0;
}
#next{
    right:0;    
}

/*Modal windows*/
.modal{
    position:fixed;
    z-index:999;
    right:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.4);
    display:none;
}
.modal-content{
    background-color:white;
    margin:1rem auto;
    padding:1rem;
    border-radius:20px;
    width:1080px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
    position:relative;
    display:flex;
}
.modal-content span{
    font-size:4rem;
    font-weight:bold;
    position:absolute;
    top:30px;
    right:50px;
}
#closeModal1{
    color:black;
}
#closeModal2{
    color:white;
}
.modal-content span:hover{
    cursor:pointer;
}
.modal-content img{
    flex:1;
    align-items:center;
    justify-content: space-between;
}

/*Footer*/
footer{
    background-color:var(--cobalt);
    color:white;
    font-family:Outfit, Verdana, Geneva, sans-serif;
    font-size:1.2rem;
    font-weight:100;
    padding:1rem 0 4rem 0;
}
footer h5{
    font-size:2rem;
    font-weight:400;
    text-align:center;
    margin:1rem 0 2rem 0;
}
.footer-div{
    display:flex;
    flex-direction: row;
    margin:0 20rem;
}
.footer-div div{
    flex:1;
    text-align:center;
}
.footer-div div:first-of-type{
    border-right:1px solid white;
}
.footer-div div a{
    display:block;
    margin-bottom:0.5rem;
    text-decoration:none;
    color:white;
}
.footer-div div a:hover{
    font-weight:400;
}
footer .copyright{
    display:flex;
    width:800px;
    margin:0 auto;
    margin-top:5rem;
}
footer .copyright div{
    flex:1;
    text-align:right;
    padding-right:1rem;
}
footer .copyright small{
    flex:1;
    padding-left:1rem;
    padding-top:1rem;
}