@charset "utf-8";
@import url(./reset.css);
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*  Main                                                 */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {
	--primary-bg-dark: rgb(25, 23, 32);
    --primary-font-color: rgb(255, 255, 255);
    --primary-section-bg: rgb(255 255 255 / 0.05);
    --primary-border-color: rgb(255 255 255 / 0.07);
	--primary-red: #ff3c57;
	--primary-green: #33ab4e;
	--primary-purple: #833cff;
	--primary-orange: #ff833c;
	--primary-blue: #3c57ff;
	--primary-blue-hover: #364ee6;
}

body {
	background-color: #191720;
	font-family: 'Poppins', sans-serif;
}

.container {
	width: min(100% - 30px, 1080px);
	margin-inline: auto;
}

main {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h2 {
	font-size: 20px;
	font-weight: 600;
}

h3 {
	font-size: 18px;
	font-weight: 600;
}

h3 + h3 {
	margin-top: 4px;
}

h2,
h3,
p,
span {
	color: #fff;
}

section p,
article p {
	font-size: 18px;
	line-height: 1.6;
}

#four,
#increase {
	cursor: pointer;
}

#heading {
	margin-bottom: 40px;
}

#list {
	list-style: none;
	display: inline-block;
}

#list li {
	font-size: 20px;
	color: #f4f6f8;
	transition: all .25s ease-in-out;
	cursor: pointer;
}

#list li:hover {
	color: #0f9;
}

#list li+li {
	margin-top: 15px;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*  Buttons                                              */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.button {
    width: 100%;
    height: 45px;
    border-radius: 4px;
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    background-color: var(--primary-green);
    box-shadow: rgba(0, 0, 0, .25) 0px 26px 30px -10px, rgba(0, 0, 0, .25) 0px 16px 10px -10px;
    transition: all 0.25s ease-in-out;
	cursor: initial;
}

#message {
	visibility: hidden;
	opacity: 0;
}

#message.is-visible {
	visibility: visible;
	opacity: 1;
}

/* ----------------------------------------- */
/*                 Sections                  */
/* ----------------------------------------- */
.layout {
	width: 320px;
    padding: 40px 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section {
	box-shadow: 0 0 1.5px rgb(255 255 255 / 0.25);
    border-radius: var(--app-border-radius);
}

section + section {
	margin-top: 30px;
}

.title {
    text-transform: uppercase;
    background-color: var(--primary-section-bg);
    height: 46px;
    border-bottom: 1px solid rgb(0 0 0 / 0.4);
    border-top-left-radius: var(--app-border-radius);
    border-top-right-radius: var(--app-border-radius);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    padding: 16px 20px;
    border-bottom-left-radius: var(--app-border-radius);
    border-bottom-right-radius: var(--app-border-radius);
    border-top-width: 0;
}

section.button-section {
    box-shadow: none;
    border: none;
}

.offline {
    background-color: var(--primary-red);
}