:root {
    --amd-red: #ed1c24;
}

.amd-red {
    color: var(--amd-red;);
}

.bg-amd-red {
    background-color: var(--amd-red);
}

.bg-amd-dark {
    background-color: #000;
}

.nav-link {
    height: 50px;
    display: flex;
	align-items: center;
    justify-content: center;
}

.amd-ul {
    border-bottom: 2px solid #f06529;
}

.heading {
    color: #fff;
}

.tab-amd {
    font-family: "Quicksand", sans-serif;
    padding: 10vh 10vw;
    width: 100vw;
    color: white;
}

.tab-intel {
    font-family: "Nunito Sans", sans-serif;
    padding: 10vh 10vw;
    width: 100vw;
    color: white;
}

.intel-inputs {
    max-width: 60vw;
    font-size: 2rem;
    display: inline-flex;
    gap: 5px;
}

.tab-intel select {
    height: 53px;
    background: none;
    border: none;
    color: #fff;
    border-bottom: 3px solid #00c7fd;
}

.tab-intel select option {
    background-color: #00285a;
}

.tab-intel input {
    height: 53px;
    color: #fff;
    background-color: #00285a;
    border: none;
}

.tab-intel input.brand {
    border-bottom: 3px solid #8bae46;
}

.tab-intel input.generation {
    border-bottom: 3px solid #edb200;
}

.tab-intel input.sku {
    border-bottom: 3px solid #ff8f51;
}

.tab-intel input.suffix {
    border-bottom: 3px solid #ff5662;
}

.tab-intel input.processor {
    border-bottom: 3px solid #ff5662;
}



h1.amd {
    text-align: center;
    padding: 0.5rem;
    font-size: 1.5rem;
    background: linear-gradient(to bottom, #fefffe, #a5a5aa); /* Gradient background */
    -webkit-background-clip: text; /* Apply gradient to text */
    -webkit-text-fill-color: transparent; /* Hide original text color */
}

footer {
    height: 60px;
    background-color: #232328;
    color: #fff;
}

.tab-amd .deco {
    border-left: 5px solid #f06529;
    margin-right: 8px;
}

.tab-intel .deco {
    border-left: 5px solid #00c7fd;
    margin-right: 8px;
}

.response {
    text-align: center;
    margin-top: 70px;
    font-size: 18px;
    color: #fff;
}

input.ryzen {
    background: none;
    color: #f66522;
    font-size: 5rem;
    border: none;
    width: 50px;
    border-bottom: 5px solid #f06529;
    text-align: center; /* Center text horizontally */
}

input.scheme {
    background-color: #232328;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid #f06529;
    font-size: 15rem;
    font-weight: 600;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #fefffe, #a5a5aa); /* Gradient background */
    -webkit-background-clip: text; /* Apply gradient to text */
    -webkit-text-fill-color: transparent; /* Hide original text color */
    height: 250px;
    width: 250px; /* Set a fixed width or adjust as needed */
    text-align: center; /* Center align text */
}

.scheme-box {
    color: #fff;
    align-items: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #232328;
    padding: 0 10px 0 10px;
    border: none;
    border-top: 30px solid #707483;
    height: 500px;
    width: auto;
    display: flex;
    justify-content: center;
    flex-direction: column; /* Ensure contents are centered vertically */
}