@charset "utf-8";
/* CSS Document */

main {
    font-size: 100%;
}

main section {
    width: calc(0.9*(100vw - 250px) - 120px);
    background-color: #fefefe;
    margin: 20px calc(0.05*(100vw - 250px));
    padding: 20px 60px;
    text-align: center;
}

main section h1 {
    text-decoration: underline;
    text-decoration-color: var(--base-color);
}

main section form {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

main section form input[type="text"] {
    padding: 10px;
    margin: 15px auto;
    width: 280px;
}

main section form input[type="submit"], .exit-button {
    width: 150px;
    padding: 10px 20px;
    background-color: var(--base-color);
    color: #fefefe;
    border: none;
    margin: auto;
    cursor: pointer;
}

.color{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--text-color);
	cursor: pointer;
}

.green-blue{
	background: linear-gradient(180deg, rgba(1,128,61,0.5046393557422969) 0%, rgba(1,127,128,0.5046393557422969) 100%);
}

.pink-yellow{
	background: linear-gradient(180deg, rgba(255,0,241,1) 15%, rgba(238,238,18,1) 100%);
}

.group {
    display: flex;
    justify-content: center;
}

.group label {
    display: flex;
    margin: 10px 20px;
    cursor: pointer;
}

.group label input {
    margin-right: 8px;
}

hr {
    width: 100px;
}

.exit-button {
    display: flex;
    justify-content: center;
    color: #fefefe;
    background-color: #252525;
}

@media (max-width: 500px) {	
	main {
		font-size: small;
	}
}

@media (max-width: 1175px) {
    main {
        margin-top: 100px;
    }

    main section {
        width: calc(0.9*100vw - 120px);
        margin: 20px calc(0.05*100vw);
        padding: 20px 60px;
    }
}