initial commit

This commit is contained in:
Luke Ogburn
2019-03-30 23:03:43 -04:00
commit 3d9e0c7717
29 changed files with 740 additions and 0 deletions

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
conn.php
.*
!.gitignore

17
enc.php Normal file
View File

@@ -0,0 +1,17 @@
<?php
function encrypt($plaintext, $key){
$cipher = "aes-128-gcm";
if (in_array($cipher, openssl_get_cipher_methods())){
$ivlen = openssl_cipher_iv_length($cipher);
$iv = openssl_random_pseudo_bytes($ivlen);
$res = openssl_encrypt($plaintext, $cipher, $key, $options=0, $iv, $tag);
return array($res, $iv, $tag);
}
}
function decrypt($ciphertext, $key, $iv, $tag){
$cipher = "aes-128-gcm";
if (in_array($cipher, openssl_get_cipher_methods())){
return openssl_decrypt($ciphertext, $cipher, $key, $options=0, $iv, $tag);
}
}
?>

6
error_log Normal file
View File

@@ -0,0 +1,6 @@
[27-Mar-2019 11:52:42 America/New_York] PHP Notice: Undefined index: 500ID in /home/lukeuxao/public_html/500/global.php on line 12
[27-Mar-2019 11:52:42 America/New_York] PHP Notice: Undefined index: 500KEY in /home/lukeuxao/public_html/500/global.php on line 13
[27-Mar-2019 12:19:38 America/New_York] PHP Notice: Undefined index: 500ID in /home/lukeuxao/public_html/500/global.php on line 12
[27-Mar-2019 12:19:38 America/New_York] PHP Notice: Undefined index: 500KEY in /home/lukeuxao/public_html/500/global.php on line 13
[29-Mar-2019 13:02:35 America/New_York] PHP Notice: Undefined index: 500ID in /home/lukeuxao/public_html/500/global.php on line 12
[29-Mar-2019 13:02:35 America/New_York] PHP Notice: Undefined index: 500KEY in /home/lukeuxao/public_html/500/global.php on line 13

37
global.php Normal file
View File

@@ -0,0 +1,37 @@
<?php
if(!isset($_COOKIE["500ID"]) && !isset($_COOKIE["500KEY"]) && !isset($_COOKIE["500TOKEN"]) && !isset($dontCheckUserLogin)){
header("Location: /500/user/signin.php");
}
$root = "/home/lukeuxao/public_html/500/";
require "conn.php";
conn();
if(!isset($dontCheckUserLogin)){
$current_user = $_COOKIE["500ID"];
$current_key = $_COOKIE["500KEY"];
$stmt = $conn->prepare("SELECT id FROM users WHERE username=:unm");
$stmt->bindParam(":unm", $current_user);
$stmt->execute();
$userID = $current_userID = $stmt->fetch(PDO::FETCH_ASSOC)['id'];
$stmt = $conn->prepare("SELECT token FROM user_tokens WHERE user_id=:usr");
$stmt->bindParam(":usr", $userID);
$stmt->execute();
$dbToken = $stmt->fetchAll(PDO::FETCH_ASSOC);
$userVerified = false;
foreach($dbToken as $token){
if(password_verify($_COOKIE["500TOKEN"], $token['token'])){
$userVerified = true;
break;
}
}
if(!$userVerified){
header("Location: /500/user/signin.php");
}
}
?>

16
index.php Normal file
View File

@@ -0,0 +1,16 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Home";
$css = "";
require $root."/res/head.php";
?>
</head>
<body>
<?php require $root."/res/top.php"; ?>
</body>
</html>

12
read/delete.php Normal file
View File

@@ -0,0 +1,12 @@
<?php
if($_GET["del"]){
$postID = $_GET["post"];
$stmt = $conn->prepare("DELETE FROM posts WHERE id = :id");
$stmt->bindParam(":id", $postID);
$stmt->execute();
header("Location: /500/read");
}
?>

23
read/index.php Normal file
View File

@@ -0,0 +1,23 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Your Writings";
$css = "read";
require $root."/res/head.php";
?>
</head>
<body>
<?php
require $root."/res/top.php";
if(isset($_GET["post"])){
require "open.php";
}else{
require "list.php";
}
?>
</body>
</html>

12
read/list.php Normal file
View File

@@ -0,0 +1,12 @@
<?php
$stmt = $conn->prepare("SELECT * FROM posts WHERE user_id = :usr ORDER BY date DESC");
$stmt->bindParam(":usr", $current_userID);
$stmt->execute();
$posts = $stmt->fetchAll(PDO::FETCH_OBJ);
foreach($posts as $post){
$link = $post->id;
$date = date("F j, Y", strtotime($post->date));
echo "<h3><a href=?post=$link>$date</a></h3>";
}
?>

31
read/open.php Normal file
View File

@@ -0,0 +1,31 @@
<div id=open>
<?php
if(isset($_GET["del"])){
require "delete.php";
}
require $root."enc.php";
$pid = $_GET["post"];
$stmt = $conn->prepare("SELECT * FROM posts WHERE id = :pid");
$stmt->bindParam(":pid", $pid);
$stmt->execute();
$post = $stmt->fetch(PDO::FETCH_OBJ);
if($current_userID != $post->user_id){
echo "Hey, that's not your post!";
exit();
}
$text = $post->text;
$iv = $post->iv;
$tag = $post->tag;
$text = decrypt($text, $current_key, $iv, $tag);
echo "<h3>".date("F j, Y", strtotime($post->date))."</h3>";
echo "<p>".str_word_count($text)." words <a href=?post=".$_GET["post"]."&del=1 class=hoverColor>delete</a></p>";
echo "<pre>".$text."</pre>";
?>
</div>

21
read/read.css Normal file
View File

@@ -0,0 +1,21 @@
h3{
text-align: center;
}
h3>a.postLink{
color: var(--main-light-color) !important;
text-decoration: none !important;
}
#open{
width: 60%;
margin-left: auto;
margin-right: auto;
}
pre{
font-family: inherit;
font-size: 1em;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

64
res/global.css Normal file
View File

@@ -0,0 +1,64 @@
/* Defining vars */
:root {
/* ----------- COLORS ----------- */
/* The two dark colors, lighter one second */
--main-dark-color: #151515;
--main-back-color: #3a3a3a;
/*The orange-ish pink color*/
--main-theme-color: #f66e50;
/* Text color, etc */
--main-light-color: #dfdfdf;
/* ----------- OTHERS ----------- */
--border-radius: 0.2em;
}
body{
font-family: sans-serif;
margin: 0;
background-color: var(--main-dark-color);
color: var(--main-light-color);
}
a{
color: var(--main-theme-color);
}
button{
margin-top: 1em;
background-color: var(--main-theme-color);
color: white;
border: none;
border-radius: var(--border-radius);
padding: 0.5em 1em;
cursor: pointer;
}
button[disabled]{
opacity: 0.6;
cursor: not-allowed;
}
.hoverColor{
color: var(--main-back-color);
text-decoration: none;
}
.hoverColor:hover{
color: var(--main-theme-color);
}
/* Top bar */
#top{
display: grid;
grid-template-columns: 5fr repeat(3, 1fr);
background-color: var(--main-theme-color);
}
.topLink{
text-align: center;
cursor: pointer;
color: white;
text-transform: uppercase;
text-decoration: none;
padding: 0.7em 0;
}

11
res/head.php Normal file
View File

@@ -0,0 +1,11 @@
<meta charset=utf-8>
<title><?=$title?> | 500 Words</title>
<link rel=icon href=\i\favicon.ico type=image/x-icon>
<link rel=stylesheet href=/500/res/global.css type=text/css>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
$css = is_array($css)?$css:array($css);
foreach($css as $file){
echo "<link rel=stylesheet href=".$file.".css type=text/css>\n";
}
?>

28
res/read.php Normal file
View File

@@ -0,0 +1,28 @@
<?php
require "enc.php";
require "conn.php";
conn();
$pid = $_GET["post"];
$usr = 4;
$stmt = $conn->prepare("SELECT * FROM posts WHERE id = :pid AND user_id = :uid");
$stmt->bindParam(":pid", $pid);
$stmt->bindParam(":uid", $usr);
$stmt->execute();
$post = $stmt->fetch(PDO::FETCH_OBJ);
//make sure the post belongs to the current user
$stmt = $conn->prepare("SELECT * FROM dec_info WHERE posts_id = :pid");
$stmt->bindParam(":pid", $pid);
$stmt->execute();
$dec_info = $stmt->fetch(PDO::FETCH_OBJ);
$text = $post->text;
$key = $dec_info->enc_key;
$iv = $dec_info->iv;
$tag = $dec_info->tag;
echo decrypt($text, $key, $iv, $tag);
?>

16
res/skelly.php Normal file
View File

@@ -0,0 +1,16 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "";
$css = "";
require $root."/res/head.php";
?>
</head>
<body>
<?php require $root."/res/top.php"; ?>
</body>
</html>

6
res/top.php Normal file
View File

@@ -0,0 +1,6 @@
<div id=top>
<div></div>
<a class=topLink href=/500/write><div>Write</div></a>
<a class=topLink href=/500/read><div>Read</div></a>
<a class=topLink href=/500/user><div>Settings</div></a>
</div>

59
user/crtuser.php Normal file
View File

@@ -0,0 +1,59 @@
<?php
$dontCheckUserLogin = true;
require "/home/lukeuxao/public_html/500/global.php";
require $root."enc.php";
//making sure the username isn't already in use
$user = $_POST['username'];
$stmt = $conn->prepare("SELECT * FROM users WHERE username=:usr");
$stmt->bindParam(":usr", $user);
$stmt->execute();
$array = $stmt->fetch(PDO::FETCH_ASSOC);
if($array != ""){
header('Location: signup.php?userexists=true');
}else{
//setting some vars
$user = $_POST['username'];
$plainTextPass = $_POST['password'];
$pass = password_hash($plainTextPass, PASSWORD_DEFAULT);
$key = bin2hex(openssl_random_pseudo_bytes(rand(100, 300)));
$plaintextKey = $key;
$enc = encrypt($key, $plainTextPass);
$key = $enc[0];
$iv = $enc[1];
$tag = $enc[2];
//inserting the new user
$stmt = $conn->prepare("INSERT INTO users (username, password, enc_key, enc_iv, enc_tag) VALUES (:unm, :psw, :key, :iv, :tag)");
$stmt->bindParam(":unm", $user);
$stmt->bindParam(":psw", $pass);
$stmt->bindParam(":key", $key);
$stmt->bindParam(":iv", $iv);
$stmt->bindParam(":tag", $tag);
$stmt->execute();
$cstrong = true;
$unhashedToken = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
$token = password_hash($unhashedToken, PASSWORD_DEFAULT);
$time = $cookietime = time() + (60*60*24*30);
$stmt = $conn->prepare("SELECT id FROM users WHERE username = :usr");
$stmt->bindParam(":usr", $user);
$stmt->execute();
$res = $stmt->fetch(PDO::FETCH_ASSOC);
$userID = $res['id'];
$time = date("Y-m-d G:i:s", $time); //for the sql
$stmt = $conn->prepare("INSERT INTO user_tokens (token, user_id, expires) VALUES (:tkn, :usr, :exp)");
$stmt->bindParam(":tkn", $token);
$stmt->bindParam(":usr", $userID);
$stmt->bindParam(":exp", $time);
$stmt->execute();
setcookie("500TOKEN", $unhashedToken, $cookietime, "/500", NULL, true, true);
setcookie("500ID", $user, $cookietime, "/500", NULL, true, true);
setcookie("500KEY", $plaintextKey, $cookietime, "/500", NULL, true, true);
header("Location: /500/write");
}
?>

32
user/index.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "User Page";
$css = "user";
require $root."/res/head.php";
?>
</head>
<body>
<?php require $root."/res/top.php"; ?>
<h2><?=$current_user?></h3>
<?php
$stmt = $conn->prepare("SELECT COUNT(id) FROM posts WHERE user_id = :usr");
$stmt->bindParam(":usr", $current_userID);
$stmt->execute();
$res = $stmt->fetch(PDO::FETCH_ASSOC);
$times = $res["COUNT(id)"];
if($times == 1){
$times = "once";
}else{
$times = $times." times";
}
?>
<p>You have written <?=$times?> so far.</p>
<a href=signin.php>Switch accounts</a><br>
<a href=signout.php>Log out</a>
</body>
</html>

32
user/policy.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
$dontCheckUserLogin = true;
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Privacy Policy";
$css = "policy";
require $root."/res/head.php";
?>
</head>
<body>
<h3>PRIVACY POLICY</h3>
<p>By signing up, you agree that that data collected, outlined below, may be processed as stated below.</p>
<p>Data that may be collected: </p>
<ul>
<li>Username/password (password is securely encrypted, username is not)</li>
<li>Your writings (securely encrypted with your personal key, which is auto-generated securely, then encrypted using your password)</li>
<li>Your IP address and time zone (encrypted)</li>
<li>Time/date of your posts (encrypted)</li>
</ul>
<h3>How your data is used</h3>
<p>
Your writings are encrypted with a two-way encryption method. This means that they can be decrypted, which allows you to view them whenever you want. Your password is used to encrypt a randomly-generated key, which in turn encrypts your data. Since your password is encrypted with a one-way encryption method, no-one can decrypt it. The only way to find your password is to guess it. By encrypting this way, all data is securely stored and only someone who knows your password can read your data.<br><br>
Your IP address and time zone are only used to verify your login patterns in order to prevent hacking. If you login from the US and then from Russia within two seconds, something's up. However, no-one needs to know where your logging in from, only if it's near where you were before. Because of this, the information is encrypted so that it can be checked for similarity, but not understood.
</p>
</body>
</html>

42
user/pwdchk.php Normal file
View File

@@ -0,0 +1,42 @@
<?php
$dontCheckUserLogin = true;
require "/home/lukeuxao/public_html/500/global.php";
require $root."enc.php";
//Getting vars from $_POST
$formPass = $_POST['password'];
$user = $_POST["username"];
//checking the username and password
//Getting the real, hashed password
$stmt = $conn->prepare("SELECT * FROM users WHERE username=:unm");
$stmt->bindParam(":unm", $user);
$stmt->execute();
$array = $stmt->fetch(PDO::FETCH_ASSOC);
$hashedPass = $array['password'];
$userID = $array['id'];
//checking password, starting session, redirecting
if(password_verify($formPass, $hashedPass)){
$cstrong = true;
$unhashedToken = bin2hex(openssl_random_pseudo_bytes(64, $cstrong));
$token = password_hash($unhashedToken, PASSWORD_DEFAULT);
$time = time() + (60*60*24*30);
$plaintextKey = decrypt($array["enc_key"], $formPass, $array["enc_iv"], $array["enc_tag"]);
setcookie("500TOKEN", $unhashedToken, $time, "/500", NULL, true, true);
setcookie("500ID", $user, $time, "/500", NULL, true, true);
setcookie("500KEY", $plaintextKey, $time, "/500", NULL, true, true);
$time = date("Y-m-d G:i:s", $time); //for the sql
$stmt = $conn->prepare("INSERT INTO user_tokens (token, user_id, expires) VALUES (:tkn, :usr, :exp)");
$stmt->bindParam(":tkn", $token);
$stmt->bindParam(":usr", $userID);
$stmt->bindParam(":exp", $time);
$stmt->execute();
header("Location: /500/write");
}else{
header("Location: signin.php?usrpass=inc");
}
?>

66
user/sign.css Normal file
View File

@@ -0,0 +1,66 @@
body{
margin: 0;
}
#formWrapper{
margin-top: 10vh;
align-content: center;
text-align: center;
}
form{
display: inline-block;
padding: 2em 6em;
border: 1px solid #333;
border-radius: var(--border-radius);
margin-left: auto;
margin-right: auto;
}
input[type=text], input[type=password]{
border: 0px;
border-radius: var(--border-radius);
margin-bottom: 2px;
padding: 3px 6px;
background-color: var(--main-back-color);
color: var(--main-light-color);
}
input[type=text]:hover, input[type=password]:hover{
border-bottom: 1px solid var(--main-theme-color);
margin-bottom: 1px;
}
input[type=text]:focus, input[type=password]:focus{
border-bottom: 2px solid var(--main-theme-color);
margin-bottom: 0;
}
button[type=submit]{
margin-top: 1em;
background-color: var(--main-theme-color);
color: white;
border: none;
border-radius: var(--border-radius);
padding: 0.5em 1em;
cursor: pointer;
}
/* Cookie banner */
#cookie{
display: none;
}
label[for=cookie]{
cursor: pointer;
border-bottom: 1px solid var(--main-light-color);
}
#cookie:checked+#cookies{
display: none;
}
#cookies{
font-family: sans-serif;
font-size: 1em;
display: block;
background-color: var(--main-theme-color);
color: var(--main-light-color);
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
padding-bottom: 1em;
}

40
user/signin.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
$dontCheckUserLogin = true;
require "/home/lukeuxao/public_html/500/global.php";
if(isset($_GET["usrpass"])){
$note = "<small style='color: red;'>Incorrect username or password</small><br>";
}else{
$note = "";
}
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Sign In";
$css = "sign";
require $root."/res/head.php";
?>
</head>
<body>
<div id=formWrapper>
<form method=POST action=pwdchk.php>
<h1>SIGN IN</h1>
<p>Username:</p>
<input type=text name=username autocomplete=off autofocus>
<p>Password:</p>
<input type=password name=password autocomplete=off><br>
<?php echo $note; ?>
<button type=submit>SUBMIT</button><br>
<p>Need an account? <a href=signup.php>Sign up.</a></p>
</form>
</div>
<input type=checkbox id=cookie>
<div id=cookies>
<p>This site uses cookies to keep you logged in and for encryption purposes.<br>
By signing in to this website, you agree to the usage of these cookies.<br>
Cookies are not used for any other reasons than stated above.</p>
<label for=cookie>I understand, dismiss this banner</label>
</div>
</body>
</html>

7
user/signout.php Normal file
View File

@@ -0,0 +1,7 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
setcookie("500ID", "", time()-3600, "/500", NULL, true, true);
setcookie("500KEY", "", time()-3600, "/500", NULL, true, true);
setcookie("500TOKEN", "", time()-3600, "/500", NULL, true, true);
header("Location: signin.php");
?>

40
user/signup.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
$dontCheckUserLogin = true;
require "/home/lukeuxao/public_html/500/global.php";
if(isset($_GET["userexists"])){
$note = "<br><small style='color: red;'>That username is already in use.<br>Please choose another.</small><br>";
}else{
$note = "";
}
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Sign Up";
$css = "sign";
require $root."/res/head.php";
?>
</head>
<body>
<div id=formWrapper>
<form method=POST action=crtuser.php>
<h1>SIGN UP</h1>
<p>Username:</p>
<input type=text name=username autocomplete=off autofocus>
<?php if($note != ""){echo $note;} ?>
<p>Password:</p>
<input type=password name=password autocomplete=off><br>
<button type="submit">SUBMIT</button><br>
<p>Have an account? <a href=signin.php>Sign in.</a></p>
</form>
</div>
<input type=checkbox id=cookie>
<div id=cookies>
<p>This site uses cookies to keep you logged in and for encryption purposes.<br>
By signing up for this website, you agree to the usage of these cookies.<br>
Cookies are not used for any other reasons than stated above.</p>
<label for=cookie>I understand, dismiss this banner</label>
</div>
</body>
</html>

2
write/error_log Normal file
View File

@@ -0,0 +1,2 @@
[29-Mar-2019 13:05:44 America/New_York] PHP Notice: Undefined index: 500ID in /home/lukeuxao/public_html/500/global.php on line 12
[29-Mar-2019 13:05:44 America/New_York] PHP Notice: Undefined index: 500KEY in /home/lukeuxao/public_html/500/global.php on line 13

32
write/fork.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
//Getting the proper file for submitting or saving (Placed here for the <title>)
$place = $_POST["submit"];
//The functions of this page are at the bottom so that the HTML will show (no idea if that actually works, but I think it has in the past so)
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = $place." post";
$css = "";
require $root."/res/head.php";
?>
</head>
<body>
<h2>Your secrets are safe here.</h2>
<pre>
<?php include $place.'.php'; ?>
</pre>
</body>
</html>
<?php
if($_POST["submit"] != "submit" && $_POST["submit"] != "save"){
//POST informatin missing
echo "Umm... POST information is missing - how/why are you here?";
exit();
exit(); //just in case lol
}
?>

40
write/index.php Normal file
View File

@@ -0,0 +1,40 @@
<?php
require "/home/lukeuxao/public_html/500/global.php";
?>
<!DOCTYPE html>
<html>
<head>
<?php
$title = "Write";
$css = "write";
require $root."/res/head.php";
?>
</head>
<body>
<?php require $root."/res/top.php"; ?>
<script>
function wordCount(thing) {
regex = /(\S\s)|(([A-Z]|[a-z])(\.|\!|\?|\z))/;
numOfParenthesis = 5; //how many par. sets are in the regex
wordsLeft = 500-((thing.value.split(regex).length-1)/numOfParenthesis);
//if(wordsLeft<0){
// wordsLeft = 0;
//}
document.getElementById("counter").innerHTML = wordsLeft;
if(wordsLeft<=0){
document.getElementById("submitWriting").disabled = false;
}else{
document.getElementById("submitWriting").disabled = true;
}
}
</script>
<form action=fork.php method=POST>
<h2 id=counter>500</h2>
<textarea onkeyup=wordCount(this) placeholder='Write your words here...' name=words></textarea>
<div id=writeButtons>
<button type=submit name=submit value=save id=saveWriting>SAVE</button>
<button type=submit name=submit value=submit id=submitWriting disabled>SUBMIT</button>
</div>
</form>
</body>
</html>

1
write/save.php Normal file
View File

@@ -0,0 +1 @@
You are in save.php

15
write/submit.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
require $root."enc.php";
$enc = encrypt($_POST["words"], $current_key);
$postID = bin2hex(openssl_random_pseudo_bytes(7));
$stmt = $conn->prepare("INSERT INTO posts (id, user_id, text, iv, tag) VALUES (:id, :uid, :txt, :iv, :tag)");
$stmt->bindParam(":id", $postID);
$stmt->bindParam(":uid", $current_userID);
$stmt->bindParam(":txt", $enc[0]);
$stmt->bindParam(":iv", $enc[1]);
$stmt->bindParam(":tag", $enc[2]);
$stmt->execute();
header("Location: /500/read/?post=".$postID);
?>

29
write/write.css Normal file
View File

@@ -0,0 +1,29 @@
textarea{
display: block;
width: 60%;
height: calc(100vh - (1em + 1.4em + 4.5em + 2.5em) - 5em);
margin-left: auto;
margin-right: auto;
background-color: var(--main-back-color);
color: var(--main-light-color);
border: none;
resize: none;
font-family: inherit;
font-size: 1em;
padding: 1em 0.5em;
border-radius: var(--border-radius);
}
#writeButtons{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
width: 20%;
margin-top: 0.7em;
margin-left: auto;
margin-right: auto;
}
#counter{
text-align: center;
color: var(--main-light-color);
font-weight: 500;
}