/* defining font and variables */
:root{
    --primary: #492D53;
    --secondary: #CCFF80;
    --accent: #F0FAFE;
}

@font-face {
    font-family: "APTD";
    src: "H:/task2/font/aptos-display.ttf";
}

/* Media query to restrict user access. */

@media (max-aspect-ratio:(16/9.5))and (min-aspect-ratio:(16/8.5)){
    /* 1.882 to  */
    body{
        display:none;
    }
}

/* page css */
body{
    margin:0;
    height:100vh;
}

h1{
    margin:0;
}


/* header css */
header{
    display:flex;
    width:100%;
    height:18%;
    background-color: var(--secondary);
}

.header-section{
    display:flex;
    width: calc(100%/3);
    height:100%;
}

#header-left{
    display:inherit;
    align-items:center;
    justify-content: flex-start;
}

#logo{
    height:80%;
    aspect-ratio: 1/1;
    background-color:green;
    margin-left:4%;
}

#left-title{
    text-decoration: none;
    font-size:50px;
    color: var(--primary);
    font-family: "APTD";
}

#header-middle{
    display:inherit;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

#header-title{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: flex-start;
    margin-top:5%;
    height:60%;
    width:80%;
}

#page-title{
    margin:0;
    font-size:40px;
    color: var(--primary);
    font-family: "Aptos-Display";
}

#header-hr{
    border-style: none;
    border-top:2px solid var(--primary);
    width:90%; 
}

#header-right{
    display:inherit;
    align-items:flex-end;
    justify-content:flex-end;
}

#navigation{
    height:70%;
    width:50%;
    flex-direction: column;
    align-items:center;
}

#acc{
    display:flex;
    align-items:center;
    justify-content:space-around;
    height:35%;
}

.log-reg{
    text-decoration: none;
    color:var(--primary);
    font-size: 24px;
}

#setting-icon{
    height:100%;
    aspect-ratio: 1/1;
    background-image: url('../../assets/icons/settings.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color:#492D53
}

#nav-icons{
    display:flex;
    justify-content:space-evenly;
}

.nav-icon{
    width:15%;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    color:#492D53;
}

a#calc{
    background-image: url('../../assets/icons/calculator.svg');
}
a#energy{
    background-image: url('../../assets/icons/energy.svg');
}

a#articles{
    background-image: url('../../assets/icons/articles.svg');
}

a#booking{
    background-image: url('../../assets/icons/booking.svg');
}

/* footer css */

footer{
    display:flex;
    justify-content:center;
    height:38%;
    width:100%;
    background-color: var(--primary);
}

#footer-container{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:2%;
    height:85%;
    width:65%;
}

#footer-top{
    display:flex;
    height:90%;
}

.footer-section{
    width: calc(97%/2);
    height:95%;
}

#footer-seperator{
    width:3%;
    height:70%;
    margin-left:3%;
    border-left:2px solid var(--accent);
}

#about-us{
    display:flex;
    color: var(--accent);
    flex-direction: column;
}

#contact-us{
    display:flex;
    color: var(--accent);
    flex-direction: column;
}

#addr{
    margin:2% 0 2% 0;
}

#socials-inquiries{
    display:flex;
    align-items:center;
    width:70%;
    height:15%;
}

.socials-icon{
    width:15%;
    margin-right: 5%;
    aspect-ratio: 1/1;
    background-color:white;
    background-position:center;
    background-repeat:no-repeat;
    background-size:80%;
    border-radius: 100%;
}

a.x{
    background-image: url(../../assets/icons/X_logo_2023.svg);
}

a.ig{
    background-image: url(../../assets/icons/instagram-logo-facebook-2-svgrepo-com.svg);
    background-size:100%;
}

a.fb{
    background-image: url(../../assets/icons/facebook-svgrepo-com.svg);
    background-size:90%;
}

a.e{
    background-image:url(../../assets/icons/email.svg);
}

#inquiries{
    text-decoration: none;
    color:var(--accent);
}

#footer-bottom{
    display:flex;
    height:10%;
    align-items:center;
    justify-content:space-around;
}

#rolsatech{
    margin:0;
    color:var(--accent);
}

#legal{
    display:flex;
    width:35%;
    justify-content: space-between;
}

.legal{
    text-decoration: none;
    color:var(--accent);
}