@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Kite+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Kite+One&family=Roboto:wght@100&display=swap');
body {margin: 0px;
/* background-color: #b1ff2e; */
font-family: 'Roboto', sans-serif;
}

/* Navbar */
.navbar {display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0%;
    max-height: 44px;
    justify-content: space-evenly;
    align-content: center;
    padding: 0px 22px;
    background: white;
    font-size: 12px;
    font-weight: 12000;
    width: 100%;
}

nav div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    padding: 0px 8px;
 }


.navleft {justify-self: left;}
a {text-decoration: none;}
a:visited {color: black;}

/* img control large */
/* .imgl {
    border-radius: 0px;
    height: auto;
    max-width: 100%;
    display: none;
    min-height: 694px;
    flex-grow: 1;
} */
/* img control medium */
.imgm {
    border-radius: 0px;
    height: auto;
    max-width: 100%;
}
/* img control small */
.imgs {
    border-radius: 0px;
    height: 580px;
    max-width: 100%;
    flex: 1;
    object-fit: fill;
    
}
/* uni */
.uni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    background-image:url(./images/hero_bts2023_startframe__f787lg06y3ue_mediumtall.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* macbookair */
.macbook {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    background-image:url(./images/hero_macbook_air_15_midnight__ct0pgwizvree_mediumtall.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* iphone 14 */
.iphone14 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    background-image:url(./images/hero_iphone14_yellow__eun20sn4imi6_mediumtall.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
/* 6 item flexbox */
.promos {
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 12px;
    width: 100%;
    margin: 6px;    
}



/* Website created by */
.brandsig {display: flex;
align-content: center;}

.brandsig-content-center{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 60px;
    background: #464545
}

.logo p {color: #b1ff2e;}

.brand p {font-family: 'Gruppo', sans-serif;
    color: #b1ff2e;
    font-size: large;
    align-content: center;
    margin-bottom: 20px;
}


.sig p {color: white; padding-right: 7px;}


.brandsig-content-right {
    position: fixed;
    align-content: center;
    bottom: 0%;
    right: 0%;
    padding-right:10px;
    padding-top: 5px;
    margin-top: 10px;
    float: right;
}

.icon-style {
    height: 30px;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 5px;
    border: 0px; 
    align-content: center;  
}

.icon-style:hover {
    background:#b1ff2e;
    padding: 2px;
}

/* hamburger menu */

#hamburger {
    display: none;
    margin-top: 10px;
}

#hamburger div {
    height: 2px;
    width: 3px;
    background-color: rgb(155, 151, 151);
    margin: 6px 0;
}

@media (max-width: 920px) {
    .navbar
    {height: 48px;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;}
    
    #hamburger 
    {display: block;
    align-content: center;
    padding-right: 30px;}
    .links
    {display: none;}
    .navleft
    {justify-content: left;
    width: 25%;}
    .navright
    {justify-content: right;
    width: 75%;}

}

/* @media (min-width: 1080px){
    .imgm
    {display: none}
    .imgl
    {display: block;}

} */
/* animation */
    /* .square{
        width:300px;
        height: 300px;
        background-color: red;
        animation: rainbow 0.5s infinite;
    }

    .square:hover {
        border-radius: 50%;
    }
    @keyframes rainbow {
        0%, 100%{background-color: red}
        16%{background-color: orange}
        32%{background-color: yellow}
        48%{background-color: green}
        54%{background-color: blue}
        70%{background-color: indigo}
        86%{background-color: violet}
    } */