html{
    box-sizing: border-box;
    font-size: 62%;
}
body{
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
}
/*NAVBAR*/
.navbar{
    display: flex;
    flex-direction: column;
    background-color: #724e4e;
    height: 100%;
    width: 7rem;
    position: fixed;
    color: #b0bc53;
    justify-content: space-between;
    align-content: center;
    z-index: 5;
}
.icon-navbar{
    padding-left: 2rem;
    padding-top: 2.5rem;
    cursor: pointer;
}
.icon-line{
    background-color:#b0bc53;
    width: 2.5rem;
    height: .3rem;
    margin-bottom: .5rem;
    border-radius: 10px;
    transition: .5s;
    
}
.line1, .line3{
    width: 1.7rem;
}
.icon-navbar:hover .icon-line{
    width: 2.5rem;
}
.nav-year{
    font-size: 1.7rem;
    text-align: center;   
}

.social-icons-list{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*first you gotta make the list bigger and then use space evenly so the items can get a distance between eachother*/
    height: 30rem;
    justify-content: space-evenly;
    
}
.social-icon-links{
    color: #b0bc53;
    font-size: 2rem;   
    transition: .2s; 
}
.social-icon-links:hover{
    color: whitesmoke;
}
.navigation{
    left: -32rem;
    display: flex;
    flex-direction: column;
    width: 32rem;
    height: 100%;
    position: fixed;
    margin-left: 7rem;
    text-align: center;
    background: linear-gradient(to top, rgba(34, 32, 41, 1),  rgba(34, 32, 41, .6)), url(../IMG/back.jpg) right no-repeat ;
    justify-content:space-evenly;
    transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav-heading{
    margin: 0;
    font-size: 4rem;
    color: #b0bc53;
}
.nav-list{
    display: flex;
    flex-direction: column;
    list-style: none;
    height: 20rem;
    font-size: 2.2rem;
    padding-left: 0;
    color: #b0bc53;
    margin-bottom: 10rem;
    
}
.nav-parag{
    font-size: 1.3rem;
    color: white;
}
.nav-button{
    background-color: transparent;
    color: #b0bc53;
    position: absolute;
    bottom: .7rem;
    outline: none;
    border: none;
    width: 3rem;
    left: 26.8rem;    
    font-size: 2rem;
    cursor: pointer;
}
.nav-search{
    height: 3rem;
    width: 28rem;
    outline: none;
    border:.5rem solid #b0bc53;
    border-radius: 25px;
    color: #b0bc53;
    font-size: 1.8rem;
    letter-spacing: .2rem;
    background-color: #ba3d3d;
    transition: .4s;
}
.nav-search:focus{
    background-color: #724e4e;
}
/*this is how you fix your placeholder*/
::placeholder{
    color: #b0bc53;
    padding-left: .7rem;
}
.nav-form{
    position: relative;
}
.nav-links{
    text-decoration: none;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    transition: .2s;
}
.nav-links:hover{
    color: #d3e54b;
}
.nav-list-items{
    margin-bottom: 3.5rem;
    margin-left: 0;
}
/*here we are makig the navigation appear*/
.checkbox:checked ~ .navigation{
    left: 0rem;
    /*this means that the navigation section moves to the position 0*/
}
/*here you have to make sure that you are using the right divisions of html*/
/*since you are using ~ you have to use the division that includes all the sidebar and then the line you want to move*/
/*right in this order....*/
.checkbox:checked ~ .navbar .line1{/*like this*/
    
    transform: rotate(-405deg) translate(-10.5px, 6px);
    width: 2.5rem;
}
.checkbox:checked ~ .navbar .line2{
    display: none;
}

.checkbox:checked ~ .navbar .line3{
    transform: rotate(405deg) translate(0px, 5px);
    width: 2.5rem;
}
/*NAVBAR*/

/*HEADER*/
/*VERY IMPORTANT!*/
/*you have to check the layers of your html because if you try to place the 'banner-heading', for example, in a 
specific grid of 'container' which is the general layer it wont work because there's a sub layer before that one (header)
that is not set up with grid positions */
.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, fit-content);
    
}
.header{
    display: grid;
    grid-template-columns: 1fr minmax(60rem, 1fr) 1fr;
    grid-template-rows: 20rem minmax(min-content, 1fr) 20rem;
    margin-left: 7rem;
    /*without this you wouldnt even be able to stretch the picture further than the first block of the grid*/
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    background: url(../IMG/gg2.jpg) center no-repeat;
    background-size: cover;
    height: 100vh;
}

.banner-heading{
    color: white;
    font-size: 8rem;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    text-align: center;
    padding-bottom: 2rem;
    margin-bottom: 10rem;
    margin-top: 0;
}
.banner-subheading{
    color: white;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: end;
    font-size: 4rem;
    margin-bottom: 8rem;
}
.logo{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
    margin-left: 5rem;
    padding-bottom: 12rem;
}
.banner-button{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    height: 4rem;
    width: 25rem;
    margin-left: 9rem;
    background:linear-gradient(to right, goldenrod, gold);
    border-radius: 25px;
    font-size: 2rem;
    justify-self: center;
    margin-right: 10rem;
}
.banner-button:hover{
    background:linear-gradient(to right, gold, goldenrod);
}
/*active means when you maintain the click*/
.banner-button:active{
    transform: translateY(.2rem);
}

/*HEADER*/
/*NEWS*/
.news{
    margin-left: 7rem;
    display: grid;
    grid-template-columns: 15rem 1fr 15rem;
    grid-template-rows: min-content repeat(3, 35rem) min-content;
    background-color: #71859E;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    grid-gap: 3rem 3rem;
    padding-bottom: 5rem;
    width: auto;
}
.news-card1{
    width: 80rem;
    height: 30rem;
    display: flex;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #EEEEEE;
    justify-self: center;
    align-self: center;
    text-align: justify;
    align-items: center;  
    box-shadow: /*x axis*/3rem /*y axis*/ 3rem /*blurriness*/3rem black; 
    
}
.news-card2{
    width: 80rem;
    height: 30rem;
    display: flex;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: #EEEEEE;
    justify-self: center;
    text-align: justify;
    align-self: center;
    align-items: center;
    box-shadow: /*x axis*/3rem /*y axis*/ 3rem /*blurriness*/3rem black; 
}
.news-card3{
    width: 80rem;
    height: 30rem;
    display: flex;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background-color: #EEEEEE;
    justify-self: center;
    text-align: justify;
    align-self: center;
    align-items: center;
    box-shadow: /*x axis*/3rem /*y axis*/ 3rem /*blurriness*/3rem black; 
}
.n-img{
    display: flex;
    width: 25rem;
    height: 15rem;
    object-fit: cover;
    margin-left: -4rem;
    padding-right: 2rem;    
}
.news-parag{
    font-size: 1.5rem;
    padding: 2rem;
}
.news-heading{
    font-size: 2rem;
    color: #ba3d3d;
}
.news-button{
    width: 20rem;
    height: 4rem;
    border-radius: 25px;
    border: .3rem solid #ba3d3d;
    color: #ba3d3d;
    transition: .2s;
}
.news-button:hover{
    background-color: #ba3d3d;
    color: white;
}
.title{
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title-heading{
    font-size: 4rem;
    color: #101047;
}
.t-line1{
    height: .2rem;
    width: 12rem;
    background-color: #101047;
    position: relative;
    bottom: 2rem;
}
.t-line2{
    height: .2rem;
    width: 20rem;
    background-color: #101047;
    position: relative;
    bottom: 1rem;
}
.end-section-btn{
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    width: 20rem;
    height: 4rem;
    background-color: #71859E;
    border: .4rem solid #101047;
    color: #101047;
    justify-self: center;
    margin-top: 5rem;
}
.ii{
    transition: .2s;
    padding-left: 1rem;
    color: #101047;
}
.end-section-btn:hover .ii{
    transform: translateX(2rem);
}
/*NEWS*/
/*FOOTER*/
.footer{
    margin-left: 7rem;
    padding-left: 3rem;
    background-color: #1c1c1c;
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
}
.footer-heading{
    color: goldenrod;
    font-size: 3rem;
}
.footer-list{
    list-style: none;
    color: white;
    padding-left: 0;
    font-size: 1.5rem;
}
.footer-list-link{
    text-decoration: none;
    color: white;
}
.sign-up-text{
    font-size: 2rem;
}
/*this is how you make the form look nice*/
.footer-form{
    display: flex;
}
.footer-button{
    background-color: goldenrod;
    padding: 1rem;    
    border: none;
}
.footer-input{
    outline: none;
    height: 2.3rem;
    width: 25rem;
    padding: 1rem;
    font-size: 1.8rem;
}
.footer-list-wrapper1{
    justify-self: center;
    padding-right: 10rem;
}
/*FOOTER*/

/*RESPONSIVE*/
@media(max-width: 1200px){
    .banner-heading{
        font-size: 6rem;
    }
    .banner-subheading{
        font-size: 3rem;
    }
    .logo{
        margin-left: 9rem;
    }
    .banner-button{
        transform: translateY(-5rem);
    }
    .news{
        grid-template-rows: 20rem 60rem 60rem 60rem;
        
    }
    .news-card1{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-bottom: 20rem;
        margin-top: 7rem;
        padding: 2rem;
        
    }
    .news-card2{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-top: 10rem;
        padding: 2rem;
        margin-bottom: 7rem;
    }
    .news-card3{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-top: 10rem;
        padding: 2rem;
        margin-bottom: 7rem;
    }
    .footer-list{
        font-size: 1.2rem;
    }
    .footer-button{
        padding: .5rem;
        font-size: 1rem;
    }
    .footer-input{
        padding: .5rem;
    }
    .footer-heading{
        font-size: 2rem;
    }
}
@media(max-width:750px){
    .banner-heading{
        font-size: 5rem;
        
    }
    .banner-subheading{
        transform: translateY(2rem);
        font-size: 2.5rem;
    }
    .logo{
        margin-left: 11rem;
        width: 8rem;
    }
    .banner-button{
        transform: translateY(-4rem);
        width: 20rem;
        font-size: 1.5rem;
    }
    .news{
        grid-template-rows: 20rem 60rem 60rem 60rem;
        grid-column: 1 / 2;
        
    }
    .news-card1{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-bottom: 20rem;
        margin-top: 7rem;
        padding: 2rem;
        
    }
    .news-card2{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-top: 10rem;
        padding: 2rem;
        margin-bottom: 7rem;
    }
    .news-card3{
        width: 50rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: fit-content;
        margin-top: 10rem;
        padding: 2rem;
        margin-bottom: 7rem;
    }
    .n-img{
        margin-left: 0;
    }
    .footer-list{
        font-size: 1.2rem;
    }
    .footer-form{
        display: block;
    }
    .footer-button{
        padding: 1rem;
        font-size: 1rem;
        width: 7rem;
    }
    .footer-input{
        padding: .5rem;
        width: 15rem;
    }
    .footer-heading{
        font-size: 2rem;
    }
}
/*RESPONSIVE*/