* {
    box-sizing: border-box;
}
body{
    margin: 0%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Bai Jamjuree', sans-serif;    
    min-height: 100vh;
}
.page{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 140px;
    justify-content: center;
    width: 100%;  
    max-width: 1440px;  
}


.title{
    color: hsl(210, 10%, 33%);
    font-size: 32px;
    font-weight: 600;
}
.small{
    color: hsl(201, 11%, 66%);
    font-size: 17px;
    width: 620px;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 40px;
}
.subtitle{
    color: hsl(210, 10%, 33%); 
    font-size: 20px;
    font-weight: 600;     
    margin: 0%;  
}
.tiny{
    margin: 0%;
    color: hsl(201, 11%, 66%);
    font-size: 14px;
}
.sect{
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}
p {
    margin: 0%;
}
.hero{
    background-image: url(./images/bg-header-desktop.png) ;
    background-size: 100%; 
    width: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero img{
    width: 100px;
    height: auto;
    margin-top: 80px;
    margin-bottom: 20px;
}
.hero h2{
    margin: 0%;
    font-size: 42px;
    font-weight: 600;
    color: hsl(210, 10%, 33%);
}
.download{
    display: flex;
    flex-direction: row;
    gap: 20px;
    color: white;
    font-size: 17px;
}
.ios{
    width: 200px;
    height: 50px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(171, 66%, 44%);
}
.mac{
    width: 200px;
    height: 50px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(233, 100%, 69%);
}
.pcinfo{
    flex-direction: row;
    align-self: center;
    justify-content: center;
    gap: 30px;
}
.pcinfo img{
    width: 600px;
    position: relative;
    left: -90px;
}
.info{
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 500px;
    height: auto;
}
.info .tiny{
    width: 300px;
    line-height: 30px;
}
.sect2 img{
    width: 800px;
}
.tools{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 1200px;
    gap: 20px;
}
.toolbox{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 290px;
    align-items: center;
    text-align: center;
}
.toolbox img{
    margin-bottom: 30px;
}
.toolbox p{
    font-size: 13px;
    color: hsl(201, 11%, 66%);
}
.companies{
    display: flex;
    gap: 80px;
}
.companies img{
    height: 40px;
}

.footer{
    display: flex;
    flex-direction: row;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-bottom: -100px;
}
.footer img{
    width: 50px;
    height: auto;
}
.links{
    width: 800px;
    height: 80px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 70px;
    row-gap: 10px;   
    justify-content: center;

}
.links p{
    color: hsl(210, 10%, 33%);
    margin: 0%;
    line-height: 20px;
}
.socials{
    margin-left: 80px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.socials img{
    width: 24px;
}
hr{
    border: none;
    height: 5px; 
    background-color: black;
    margin: 20px 0;
}
footer{
    width: 100%;
    margin-top: -10px;
    margin-bottom: 20px;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }