* {
    margin-inline: 0;
    margin-block: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
}

body {
    background-image: linear-gradient(to bottom, skyblue, white);
    width: 100%;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    padding-inline: 2rem;
    padding-block: 0.5rem;
    opacity: 0.8;
    background-color: white;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    width: 100%;
}

@media screen and (min-width: 1020px) {
    .navbar .ham-container, .navbar .ham-checkbox-label {
        display: none;
    }
}

@media screen and (max-width: 1020px) {
    .navbar .links-container {
        display: none;
    }
}

.navbar .logo-container img{
        height: 3rem;
}

.navbar .logo-container a {
    text-decoration: none;
    color: rgb(30, 30, 30);
}

.navbar .logo-container p {
    
    font-size: 2rem;
    font-weight: bolder;
}

.navbar #ham-checkbox {
    display: none;
}

.navbar:has(#ham-checkbox:checked) .ham-checkbox-label .ham-container .box {
    border-radius: 1rem;
    transition: border-radius 0.2s;
}

.navbar:has(#ham-checkbox:checked) .ham-checkbox-label .ham-container .box .line {
    position: absolute;
}

.navbar:has(#ham-checkbox:checked) .ham-checkbox-label .ham-container .box #line2{
    width: 0;
    transition: width 0.2s;
}

.navbar:has(#ham-checkbox:checked) .ham-checkbox-label .ham-container .box #line1{
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

.navbar:has(#ham-checkbox:checked) .ham-checkbox-label .ham-container .box #line3{
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.navbar .ham-container .box {
    border: 2px solid rgb(30, 30, 30);
    border-radius: 0.2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem;
    background-color: white;
    transition: border-radius 0.2s;
}

.navbar .ham-container .box .line {
    border: 1px solid rgb(30, 30, 30);
    width: 1.2rem;
    transition: transform 0.2s;
}

.navbar .ham-container .box #line2 {
    transition: width 0.2s;
}

.navbar .links-container ul{
    list-style: none;
    display: flex;
}

.navbar .links-container ul a{
    text-decoration: none;
    color: rgb(30, 30, 30);
    margin-inline-start: 1rem;
    font-size: 1.5rem;
}

.navbar .links-container ul a:hover, .navmenu a:hover div, .navbar .ham-container .box:hover, .navbar .ham-container .box:hover .line, .navbar .logo-container p:hover {
    color: gray;
    border-color: gray;
}

.navmenu div {
    opacity: 1;
    text-align: center;
    transition: padding-block 0.15s ease, height 0.15s ease, font-size 0.15s ease;
}

.navmenuUp div {
    padding-block: 0px;
    height: 0px;
    font-size: 0px;
}

.navmenuDown div{
    padding-block: 1rem;
    height: 4rem;
    font-size: 1.5rem;
}

.navmenu a {
    text-decoration: none;
    color: rgb(82, 82, 82);
    font-size: 1.5rem;
}

.navmenu a:nth-child(even) div {
    background-color: rgba(242,242,242,0.8);
}

.navmenu a:nth-child(odd) div {
    background-color: rgba(221,221,221,0.8);
}

.hero {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding-block-start: 4rem;
}

@media screen and (max-width: 1425px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero .text-container .Heading1 {
        font-size: 8vw;
    }
    .hero .text-container .Heading2 {
        font-size: 3vw;
    }
    .hero .text-container .text {
        font-size: 2.2vw;
        margin-block-end: 0.5rem;
    }

    .hero .text-container {
        margin-block: 2rem;
        margin-inline: 5rem;
    }

    .hero .img-container {
        margin-block-start: 0rem;
        margin-block-end: 5rem;
    }

    .hero .img-container img {
        width: 80%;
        height: auto;
    }
}

@media screen and (min-width: 1425px) {
    .hero .img-container {
        margin-block: 5rem;
        margin-inline: 5rem;
    }

    .hero .text-container {
        margin-block: 5rem;
        margin-inline: 5rem;
        padding-block: 0.5rem;
    }

    .hero .text-container .Heading1 {
        font-size: 6rem;
    }
    .hero .text-container .Heading2 {
        font-size: 2.5rem;
    }
    .hero .text-container .text {
        font-size: 1.5rem;
        display: inline;
        margin-inline: 1rem;
    }
}

.hero .text-container .Heading1 {
    margin-block-end: 1rem;
    font-weight: bold;
}

.hero .text-container .Heading2 {
    margin-block-end: 2rem;
}

.hero .img-container img {
    border-radius: 2rem;
}

footer {
    text-align: center;
    background-color: white;
    position: sticky;
    bottom: 0;
    width: 100%;
}

footer p {
    padding-block: 1.5rem;
    font-size: 1.5rem;
}