*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

@font-face {
    font-family: 'MyFont';
    src: url('./fonts/JosefinSans-Thin.ttf');
}

@font-face {
    font-family: 'MyFont2';
    src: url('./fonts/Alata-Regular.ttf');
}

.container{
    margin-inline: auto;
}

body{
    font-family: Myfont, sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight:bold;
    padding: 0;
    margin-block: 0%;
    margin-inline: 8%;
}

header{
    display: block;
    color: hsl(0, 0%, 100%);
    margin-inline: -10.5%;
    margin-block-start: -10px;
    padding-block-start: 50px;
    overflow: hidden;
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.25), hsl(0, 0%, 0%, 0.25)), url(images/mobile/image-hero.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;    

    @media(width > 720px){
        background-image: linear-gradient(hsla(0, 0%, 0%, 0.35), hsl(0, 0%, 0%, 0.35)), url(images/desktop/image-hero.jpg);
        padding-block-start: 0px;
        
    } 
}

#hamb{
    position: absolute;
    inline-size: 20px;
    block-size: 15px;
    object-fit: cover;
    inset-inline-end: 0%;
    margin-inline-end: 8%;
}

#close{
    position: absolute;
    inset-inline-end: 0%;
    margin-inline-end: 8%;
    inline-size: 20px;
    block-size: 20px;
    z-index: 99;
    display: none;
}

#logo{
    position: absolute;
    inline-size: 8rem;
    display: block;
    inset-inline-start: 0%;
    margin-inline-start: 8%;
    z-index: 99;

    @media (width > 720px){
        margin-block-start: 80px;
        inline-size: 10rem;
    }
}

nav ul{
    font-family: Myfont2;
    font-weight: 100;
    position: absolute;
    background-color: hsl(0, 0%, 0%);
    background-position: center;
    background-size: cover;
    padding-block-start: 120px;
    padding-inline: 0;
    inset-inline: 0%;
    margin-inline: 8%;
    display: none; 

    @media (width > 720px){
        display: flex;
        gap: 3%;
        justify-content: end; 
        align-items: center;           
        background: transparent;
        margin-block-start: 75px;
        margin-block-end: 0%;
        padding-block-start: 0px;            
    }
}

ul li {
    display: block;
    list-style: none;
    color: hsl(0, 0%, 100%);
    line-height: 2;
    font-size: 1.2rem ;

    @media (width > 720px) {
        text-transform: initial;
        display: inline;
    }
}

li a{
    position: relative;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    text-transform: uppercase;

    @media (width > 720px) {
        text-transform: initial;
    }

}

li a::after{
    content: "";
    height: 1.5px;
    background-color: white;
    left: 0;
    bottom: -5px;
    margin: 0;
    display: block;
    transition: 0.5s;
    position: absolute;
    transform: scaleX(0);

}

li a:hover::after{
    width: 100%;
    transform: scaleX(1);
}

header h1{
    margin-block-start: 150px;    
    margin-block-end: 200px;    
    font-size: clamp(2.2rem, 5vw + 1rem, 5rem);
    padding-block: 4%;
    padding-inline: 5%;
    margin-inline: 8%;
    border: solid 2px hsl(0, 0%, 100%);
    z-index: 99;
    max-inline-size: 100%;


    @media (width > 720px){
        margin-block-start: 270px;    
        max-inline-size: 700px;
        padding-block: 30px;
        padding: 30px;
    }
}

section{
    margin-block: 100px;

    @media (width > 600px){
        margin-block: 145px;
    }
}

.section-one{
    @media (width > 720px){
        display: flex;
    }
}
.section-one img{
    inline-size: 100%;
    block-size: auto;

    @media (width > 720px){
        inline-size: 400%;
        object-fit: contain;
    }
}

.section-one div{
    background-color: hsl(0, 0%, 100%);
    text-align: center;

    @media (width > 720px){
        text-align: start;
        position: static;
        margin-block-start: 13.5%;
        margin-inline-start: -17%;
        z-index: 1;
        padding-inline-start: 7%;
        inline-size: 350%;
    }
}

.section-one h2{
    font-size: clamp(1.65rem, 3vw + 0.75rem, 3.25rem);
    margin-block-start: 40px;
    margin-block-end: 20px;

    @media (width > 720px) {
        margin-block-start: 65px;
    }
}

.section-one p{
    font-size: clamp(0.85rem, 1vw + 0.5rem, 1.25rem);
    line-height: 1.5;
    margin-inline: 5%;

    @media (width > 720px) {
        margin-inline-start: 0%;
        margin-inline-end: 6.5%;
    }
}

.section-two{
    text-align: start;
}

.grider{
    display: grid;
    gap: 20px;

    @media (width > 600px) {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.section-two h3{
    padding-inline-start: 20px;
    margin-block-end: 25px;
    margin-block-start: 60px;
    font-size: clamp(1.35rem, 2vw + 0.9rem, 2.2rem);
    max-inline-size: 150px;

    @media (width > 600px) {
        max-inline-size: 250px;
        margin-block-start: 400px;
        margin-block-end: 30px;
        padding-inline-start: 45px;
        padding-inline-end: 40px;
    }
}

.box-one {
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding-block-end: 2.5rem;
}

.box-one h2{
    font-size: clamp(1.65rem, 3vw + 0.5rem, 3.5rem);
    margin-block: 0px;
    color: hsl(0, 0%, 0%);
    margin-inline: auto;

    @media (width > 600px) {
        margin-inline: 0%;
    }
}

.box-one h4{
    font-family: Myfont2;
    font-weight: 100;
    font-size: clamp(0.95rem, 1vw + 0.5rem, 1.5rem);    ;
    letter-spacing: 3px;
    color: hsl(0, 0%, 0%);
    border: 1px solid hsl(0, 0%, 0%);
    padding-inline: 30px;
    padding-block: 10px;
    max-inline-size: 150px;
    transition: ease 0.5s;
    display: none;

    @media (width > 600px) {
        display: block;
        max-inline-size: 180px;
    }
}

.mobile-see-all{
    font-family: Myfont2;
    font-weight: 100;
    font-size: clamp(0.95rem, 1vw + 0.5rem, 1.5rem);    ;
    letter-spacing: 3px;
    color: hsl(0, 0%, 0%);
    border: 1px solid hsl(0, 0%, 0%);
    padding-inline: 30px;
    padding-block: 10px;
    max-inline-size: 150px;
    margin-inline: auto;
    transition: ease 0.5s;
    display: block;

    @media (width > 600px) {
        display: none;
    }
}

.box-one h4:hover{
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 0%);
}

.mobile-see-all:hover{
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 0%);
}

.box-two{
    color: hsl(0, 0%, 100%);
    block-size: 100%;
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-deep-earth.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-deep-earth.jpg);
        background-size: cover;
    }
}

.box-two:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-deep-earth.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-deep-earth.jpg);
    }
}

.box-three{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-night-arcade.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-night-arcade.jpg)
    }
}

.box-three:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-night-arcade.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-night-arcade.jpg);
    }
}

.box-four{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-soccer-team.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-soccer-team.jpg)
    }

}

.box-four:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-soccer-team.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-soccer-team.jpg);
    }
}

.box-five{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-grid.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-grid.jpg)
    }
}

.box-five:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-grid.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-grid.jpg);
    }
}

.box-five h3{
    max-inline-size: 100px;
}

.box-six{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-from-above.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-from-above.jpg)
    }
}
.box-six h3{
    @media (width > 600px) {
        padding-inline-end: 20px;
    }
}

.box-six:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-from-above.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-from-above.jpg);
    }
}

.box-seven{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-pocket-borealis.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-pocket-borealis.jpg)
    }
}

.box-seven:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-pocket-borealis.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-pocket-borealis.jpg);
    }
}

.box-eight{
    color: hsl(0, 0%, 100%);
    background-image:linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-curiosity.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-curiosity.jpg)
    }
}

.box-eight:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-curiosity.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop//image-curiosity.jpg);
    }
}

.box-nine{
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/mobile/image-fisheye.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;  

    @media (width > 600px){
        background-image: linear-gradient(to right, hsla(0, 56%, 4%, 0.692), hsla(0, 0%, 100%, 0) 40%), url(images/desktop/image-fisheye.jpg)
    }
} 

.box-nine:hover{
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/mobile/image-fisheye.jpg);

    @media (width > 600px) {
        background-image: linear-gradient(hsla(0, 0%, 100%, 0.75), hsl(0, 0%, 100%, 0.75)), url(images/desktop/image-fisheye.jpg);
    }
}

footer{
    font-family: Myfont2;
    font-weight: 100;
    display: grid;
    justify-content: center;
    background-color: hsl(0, 0%, 0%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeats;
    color: hsl(0, 0%, 100%);
    text-align: center;
    text-transform: inherit;
    padding-block-end: 50px;
    font-size: 1rem;
    justify-content: center;
    margin-block-end: -10px;
    margin-inline: -10.5%;

    @media (width > 720px) {
        display: flex;
        justify-content: space-between;
        align-items: start;
    } 
}
footer ul{
    display: inline;
    padding: 0%;

    @media (width > 720px) {
        padding: 0%;
        inline-size: 420px;
        display: flex;
        gap: 5%;
        margin: 0%;
    }
}

footer li{
    text-align: center;
    margin: 0;
    padding-inline: 0;
}

footer p{
    margin: 0%;
    padding-block-start: 0px;
    color: hsl(0, 0%, 55%);
}

footer li a{
    inset-inline-start: 0%;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    text-transform:initial;
}


footer #logo2{
    padding-block-start: 50px;
    inline-size: 8rem;
    padding-block-end: 40px;
    

    @media (width > 720px){
        inline-size: 10rem;
        padding-block-end: 13.5px;
        margin: 0px;
        padding-block-end: 10px;
        padding-block-start: 0px;
    }
}

.social-icon{
    display: flex;
    gap: 5%;
    justify-content: center;
    align-items: baseline;
    padding-block-start: 40px;
    padding-block-end: 25px;
    position: relative;

    @media (width > 720px) {
        justify-content: end;
        padding-block-end: 24.5px;
        padding-block-start: 0px;
    }
}

.icons::after{
    content: "";
    height: 1.5px;
    background-color: white;
    bottom: -5px;
    left: 0;
    margin: 0;
    display: block;
    transition: 0.5s;
    position: relative;
    transform: scaleX(0);

}

.icons:hover::after{
    width: 100%;
    transform: scaleX(1);
}

.attribution{
    background-color: hsl(0, 0%, 0%);
    position: static;
    color: hsl(0, 0%, 100%);
    display: flex;
    justify-content: center;
    margin-block-end: -25px;
    padding-block-end: 20px;
    padding-inline: 20px;
    margin-inline: -10.5%;
}

.left{
    @media (width > 720px) {
        display: flex;
        flex-direction: column;
        justify-content: start;
        margin-block-start: 35px;
        margin-inline-start: 8%;
    }
}

.right{
    @media (width > 720px) {
        margin-block-start: 35px;
        margin-inline-end: 8%;
        text-align: end;
    }
}