/* CSS Document */
:root{

    --yellow:#FBB03B;
    --blue:#0A8CF7;

    --bg:#242424;
    --card:#2F2F2F;

    --text:#FFFFFF;
    --muted:#BDBDBD;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

    display:flex;
    justify-content:center;

    padding:50px 20px;

}
p {
	text-align: center;
}

.container{

    width:100%;
    max-width:720px;

}

header{

    text-align:center;

    margin-bottom:32px;

}

.logo{

    width:120px;

    margin-bottom:18px;

}

h1{

    font-size:2.2rem;
    font-weight:800;

    margin-bottom:8px;

}

header p{

    color:var(--muted);

}

.card{

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:24px;

    margin-bottom:24px;

}

h2{

    display:flex;
    align-items:center;
    gap:.6rem;

    font-size:1.2rem;

    margin-bottom:20px;

    color:var(--yellow);

}

.status{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.status-item{

    text-align:center;

}

.status-item span{

    display:block;

    color:var(--muted);

    font-size:.85rem;

    margin-bottom:6px;

}

.status-item strong{

    font-size:1.1rem;

}

.downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.download{

    background:#3A3A3A;

    border:1px solid rgba(255,255,255,.06);

    border-radius:10px;

    padding:18px;

    color:white;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:14px;

    transition:.2s;
	
	position: relative;
    overflow: hidden;

}


.download:hover{

    background:var(--yellow);

    color:#242424;

}

.download i{

    font-size:1.5rem;

}

form{

    display:flex;

    flex-direction:column;

    gap:14px;

}

input,
textarea{

    background:#3A3A3A;

    border:none;

    border-radius:8px;

    padding:14px;

    color:white;

    font:inherit;

}

input:focus,
textarea:focus{

    outline:2px solid var(--yellow);

}

button{

    background:var(--yellow);

    color:#242424;

    border:none;

    border-radius:8px;

    padding:14px;

    font:inherit;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

button:hover{

    opacity:.9;

}
.download-info{

    background:#3A3A3A;

    border:1px solid rgba(255,255,255,.06);

    border-radius:10px;

    padding:20px;

}

.download-info h3{

    display:flex;

    align-items:center;

    gap:.6rem;

    color:var(--yellow);

    margin-bottom:14px;

    font-size:1rem;

}

.download-info ol{

    margin-left:18px;

    color:var(--muted);

    line-height:1.7;

    font-size:.95rem;

}

.download-info li + li{

    margin-top:8px;

}

.download-info code{

    background:#242424;

    padding:2px 6px;

    border-radius:4px;

    font-size:.9em;

    color:white;

}
.ribbon {

    position: absolute;

    top: 14px;
    right: -38px;

    width: 140px;

    background: var(--yellow);
    color: #242424;

    text-align: center;

    font-size: .75rem;
    font-weight: 700;

    padding: 4px 0;

    transform: rotate(45deg);

    text-transform: uppercase;

    letter-spacing: .05em;

}
@media (max-width:650px){

    .status{

        grid-template-columns:1fr;

    }

    .downloads{

        grid-template-columns:1fr;

    }

}