body, html{
    height: 100%;
    margin: 0;
    padding: 0;

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 100;

    /* COLOR SCHEME */
    --DarkGrey: #363636;
    --DarkerGrey: #1f1f1f;
    --LightGrey: #4f4f4f;
    --LighterGrey: #7c7c7c;
    --Orange: #FF5722;
    --Green: #28A745;
}

/* CONTAINER SETTINGS */
.container-fluid{
    background-color: var(--DarkerGrey);
}

.container{
    background-color: var(--DarkGrey);
    color: white;
}

.container h1{
    background-color: var(--Orange);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 6px 6px 10px 1px var(--DarkerGrey);
}

/* HEADER SETTINGS*/
.header{
    background-color: var(--DarkerGrey);
    border-radius: 10px;
    font-size: 21px;
    padding: 10px;
    position: fixed;
    width: 1116px;
}

.header ul{
    list-style: none;
}

.header ul li{
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header li a{
    color: white;
    text-decoration: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    background-color: var(--DarkGrey);
}

.header li a:hover{
    background-color: var(--LighterGrey);
    color: white;
    transition: ease 300ms;
    transform:scale(1.1);
}

/* CONTENT SETTINGS */
.content{
    background-color: var(--DarkGrey);
    padding: 80px;
}

/* BOX SETTINGS */

.box1{
    background-color: var(--LightGrey);
    padding: 5px;
    border-radius: 10px;
    box-shadow: 12px 12px 10px 1px var(--DarkerGrey);
}

.box2{
    background-color: var(--LightGrey);
    padding: 5px;
    border-radius: 10px;
    box-shadow: 12px 12px 10px 1px var(--DarkerGrey);
}

.box3{
    background-color: var(--LightGrey);
    padding: 5px;
    border-radius: 10px;
    box-shadow: 12px 12px 10px 1px var(--DarkerGrey);
}

.box4{
    background-color: var(--LightGrey);
    padding: 5px;
    border-radius: 10px;
    box-shadow: 12px 12px 10px 1px var(--DarkerGrey);
}

.box5{
    background-color: var(--LightGrey);
    padding: 5px;
    border-radius: 10px;    
    box-shadow: 12px 12px 10px 1px var(--DarkerGrey);
}

/* COMPONENTS SETTINGS */
/*CPU*/
.cpu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cpu_text{
    flex: 2;
}

.cpu_image{
    flex: 1;
}

.cpu_image:hover{
    transform: scale(1.1);
}

/*RAM*/
.ram{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ram_text{
    flex: 2;
}

.ram_image{
    flex: 1;
}

.ram_image:hover{
    transform: scale(1.1);
}

/*CPUCOOLER*/
.cpuCooler{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cpuCooler_text{
    flex: 2;
}

.cpuCooler_image{
    flex: 1;
}

.cpuCooler_image:hover{
    transform: scale(1.1);
}

/*MOTHERBOARD*/
.motherboard{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.motherboard_text{
    flex: 2;
}

.motherboard_image{
    flex: 1;
}

.motherboard_image:hover{
    transform: scale(1.1);
}

/*STORAGE*/
.storage{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.storage_text{
    flex: 2;
}

.storage_image{
    flex: 1;
}

.storage_image:hover{
    transform: scale(1.1);
}

/*PSU*/
.psu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.psu_text{
    flex: 2;
}

.psu_image{
    flex: 1;
}

.psu_image:hover{
    transform: scale(1.1);
}

/*GPU*/
.gpu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gpu_text{
    flex: 2;
}

.gpu_image{
    flex: 1;
}

.gpu_image:hover{
    transform: scale(1.1);
}

/*CABLE*/
.cable{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cable_text{
    flex: 2;
}

.cable_image{
    flex: 1;
}

.cable_image:hover{
    transform: scale(1.1);
}