:root {
    --color1: rgb(236, 234, 234);
    --color2:  rgb(246, 245, 245);
    --color3: rgb(255, 255, 255);
    --color4: rgb(250,250,250);
    --color5: rgb(26, 124, 222);
    --color6: rgb(211, 233, 242)
}

/* Hero Section */
/* iphone */
div.iphone{
    /* width: 100vw; */
    background-color: var(--color2);
    margin: auto;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}
div.product > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
}
div.iphone > div{
    height: 34vh;
}
div.ProductTitle{
    font-size: 8vh;
    font-weight: bold;
    /* padding-top: 2vh; */

}
div.belowProductTitle{
    font-size: 3vh;
    font-weight: lighter;
}
div.shopProduct{
    display: flex;
    gap: 12px;
    margin: 2vh;
}
.LearnMore{
    background-color:var(--color5) ;
    color: var(--color3);
    border: 1px solid var(--color3);
    border-radius: 100px;
    padding:10px 20px;
    font-size: large;
    cursor: pointer;
    text-align: center;
}
.shop{
    background-color: var(--color2);
    color:var(--color5);
    border: 1px solid var(--color5);
    padding:10px 20px;
    border-radius: 100px;
    font-size: larger;
    cursor: pointer;
    text-align: center;
    align-self: center;
}
.macbook .shop{
    background-color: var(--color6);
}
.shop:hover{
    background-color: var(--color5);
    color: var(--color3);
    cursor: pointer;
}
/* Iphone */
div.iphone img{
    
    width: 55vw;
}

div.separator{
    height: 1vh;
    background-color: var(--color3);
}
/* College Sorted */
.CollegeSorted >div{
    background-color: var(--color2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img.CollegeSorted3 {
    width: 90vw;
}
img.CollegeSorted2 {
    width: 100vw;
}
img.CollegeSorted2{
    display: none;
}
div.CollegeSortedDetails {
    display: none;
}
/* Macbook */
div.macbook > div{
    height: 35vh;
    background-color: var(--color6);
}
.macbook img{
    width: 100vw;
}


/* Media Queries */

@media screen and (width < 1200px) {
    div.iphone img{
        
        width: 60vw;
    }   
}

@media screen and (width < 1000px) {
    div.ProductTitle{
        font-size: 7.5vh;
    }
    div.belowProductTitle{
        font-size: 2.8vh;
    }
    div.iphone img{
        width: 70vw;
    }
}

@media screen and (width < 900px) {
    div.iphone img{
        
        width: 85vw;
    }

}

@media screen and (width < 700px) {
    div.ProductTitle{
        font-size: 7vh;
    }
    div.belowProductTitle{
        font-size: 2.6vh;
    }

    div.iphone img{
        
        width: 100vw;
    }
    .LearnMore{
        font-size: medium;
    }
    .shop{
        font-size: medium;
    }

}
@media screen and (width < 500px) {
    div.ProductTitle{
        font-size: 5vh;
    }
    div.belowProductTitle{
        font-size: 2vh;
    }
    .LearnMore{
        text-align: center;
        font-size: xx-small;
    }
    .shop{
        text-align: center;
        font-size: medium;
    }
    .CollegeSorted3{
        display: none;
    }
    img.CollegeSorted2{
        display: flex;
    }
    div.CollegeSortedDetails{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        padding: 10px;
    }
    .CollegeSortedDetails .belowProductTitle{
        padding: 10px;
        width: 80vw;
        text-align: center;
    }
    .CollegeSortedDetails .shop{
        background-color: var(--color5);
        color: var(--color3);
        margin: 10px;
    }
}

@media screen and (width < 360) {
    div.shopProduct{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}