fixing database connections and patching possible nosqli

This commit is contained in:
ngn
2023-06-24 18:48:18 +03:00
parent ad6b29be01
commit d42990db29
36 changed files with 1125 additions and 1030 deletions

View File

@@ -1,29 +1,29 @@
<template>
<button @click="click"><slot></slot></button>
<button @click="click"><slot></slot></button>
</template>
<script>
export default {
props: ["click"]
props: ["click"]
}
</script>
<style scoped>
button {
text-align: center;
width: 540px;
font-size: 25px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
cursor: pointer;
transition: .4s;
text-align: center;
width: 540px;
font-size: 25px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
cursor: pointer;
transition: 0.4s;
}
button:hover {
box-shadow: var(--def-shadow);
box-shadow: var(--def-shadow);
}
</style>
</style>

View File

@@ -1,56 +1,54 @@
<template>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
export default {}
</script>
<style scoped>
div {
box-shadow: var(--def-shadow);
background: var(--dark-two);
width: 100%;
height: auto;
padding: 50px;
color: white;
box-shadow: var(--def-shadow);
background: var(--dark-two);
width: 100%;
height: auto;
padding: 50px;
color: white;
}
h1 {
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
font-size: 50px;
margin-bottom: 30px;
text-decoration: underline;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
font-size: 50px;
margin-bottom: 30px;
text-decoration: underline;
}
i {
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
}
a:hover {
font-weight: 900;
font-weight: 900;
}
i {
font-size: 30px;
margin-top: 3px;
font-size: 30px;
margin-top: 3px;
}
h2 {
font-size: 40px;
line-height: 60px;
font-size: 40px;
line-height: 60px;
}
a {
font-size: 40px;
color: white;
line-height: 60px;
text-decoration: none;
font-size: 40px;
color: white;
line-height: 60px;
text-decoration: none;
}
</style>
</style>

View File

@@ -1,31 +1,30 @@
<template>
<div class="header">
<h1>
<slot></slot>
</h1>
</div>
<div class="header">
<h1>
<slot></slot>
</h1>
</div>
</template>
<script>
export default {
}
export default {}
</script>
<style scoped>
div {
background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)), url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
width: 100%;
height: 100%;
background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)),
url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
width: 100%;
height: 100%;
}
h1 {
font-weight: 900;
font-size: 7.5vw;
padding: 150px;
text-align: center;
color: white;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
text-size-adjust: 80%;
font-weight: 900;
font-size: 7.5vw;
padding: 150px;
text-align: center;
color: white;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
text-size-adjust: 80%;
}
</style>
</style>

View File

@@ -1,27 +1,27 @@
<template>
<input v-on:keyup="keyup" :placeholder="placeholder" :type="type">
<input v-on:keyup="keyup" :placeholder="placeholder" :type="type" />
</template>
<script>
export default {
props:["keyup", "placeholder", "type"]
props: ["keyup", "placeholder", "type"]
}
</script>
<style scoped>
input {
width: 500px;
font-size: 25px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
transition: .4s;
width: 500px;
font-size: 25px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
transition: 0.4s;
}
input:focus {
box-shadow: var(--def-shadow);
box-shadow: var(--def-shadow);
}
</style>

View File

@@ -1,41 +1,41 @@
<template>
<div>
<h1>Currently logged in</h1>
<Button :click="click">Logout</Button>
</div>
<div>
<h1>Currently logged in</h1>
<Button :click="click">Logout</Button>
</div>
</template>
<script>
import axios from 'axios';
import Button from './Button.vue';
import axios from "axios"
import Button from "./Button.vue"
export default {
methods: {
async click(e) {
await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
localStorage.clear()
location.reload()
}
},
methods: {
async click(e) {
await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
localStorage.clear()
location.reload()
}
}
}
</script>
<style scoped>
h1{
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
h1 {
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
div{
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
div {
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -1,53 +1,55 @@
<template>
<nav>
<div>
<h3>[ngn]</h3>
</div>
<div>
<NavbarLink :out="false" url="/">Home</NavbarLink>
<NavbarLink :out="false" url="/projects">Projects</NavbarLink>
<NavbarLink :out="false" url="/resources">Resources</NavbarLink>
<NavbarLink :out="false" url="/blog">Blog</NavbarLink>
<NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun">Source</NavbarLink>
</div>
</nav>
<nav>
<div>
<h3>[ngn]</h3>
</div>
<div>
<NavbarLink :out="false" url="/">Home</NavbarLink>
<NavbarLink :out="false" url="/projects">Projects</NavbarLink>
<NavbarLink :out="false" url="/resources">Resources</NavbarLink>
<NavbarLink :out="false" url="/blog">Blog</NavbarLink>
<NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun"
>Source</NavbarLink
>
</div>
</nav>
</template>
<script>
import NavbarLink from "./NavbarLink.vue";
import NavbarLink from "./NavbarLink.vue"
export default {}
</script>
<style scoped>
nav {
background: var(--dark-two);
padding: 25px 35px 30px 35px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: solid 3px black;
animation-name: borderAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
box-shadow: var(--def-shadow);
background: var(--dark-two);
padding: 25px 35px 30px 35px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: solid 3px black;
animation-name: borderAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
box-shadow: var(--def-shadow);
}
div {
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
gap: 5px;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
gap: 5px;
}
h3 {
font-weight: 900;
font-size: 30px;
color: red;
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
font-weight: 900;
font-size: 30px;
color: red;
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
}
</style>
</style>

View File

@@ -1,60 +1,60 @@
<template>
<div>
<nuxt-link v-if="!out" :class="cname" id="link" :to="url">
<slot></slot>
</nuxt-link>
<a v-if="out" :class="cname" id="link" :href="url">
<slot></slot>
</a>
</div>
<div>
<nuxt-link v-if="!out" :class="cname" id="link" :to="url">
<slot></slot>
</nuxt-link>
<a v-if="out" :class="cname" id="link" :href="url">
<slot></slot>
</a>
</div>
</template>
<script>
export default {
props: ["url", "out"],
data() {
return {
cname: "notcurrent"
}
},
mounted(){
let url = window.location.pathname
if(url===this.url){
this.cname = "current"
}
}
props: ["url", "out"],
data() {
return {
cname: "notcurrent"
}
},
mounted() {
let url = window.location.pathname
if (url === this.url) {
this.cname = "current"
}
}
}
</script>
<style scoped>
.notcurrent {
margin-left: 20px;
font-weight: 700;
font-size: 25px;
text-decoration: none;
color: white;
cursor: pointer;
margin-left: 20px;
font-weight: 700;
font-size: 25px;
text-decoration: none;
color: white;
cursor: pointer;
}
.notcurrent:hover {
text-decoration: underline;
animation-name: underlineAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
text-decoration: underline;
animation-name: underlineAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
}
.current{
margin-left: 20px;
font-weight: 700;
font-size: 25px;
text-decoration: none;
color: white;
cursor: pointer;
text-decoration: underline;
animation-name: underlineAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
.current {
margin-left: 20px;
font-weight: 700;
font-size: 25px;
text-decoration: none;
color: white;
cursor: pointer;
text-decoration: underline;
animation-name: underlineAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
}
</style>
</style>

View File

@@ -1,57 +1,72 @@
<template>
<main>
<h1>Add New Post</h1>
<div class="textareas">
<Input :keyup="function() { }" id="title" placeholder="Post Title" type="text"/>
<Input :keyup="function() { }" id="author" placeholder="Author" type="text"/>
<h2>
Make the post private
<input id="private" type="checkbox"/>
</h2>
</div>
<textarea name="content" id="content" cols="30" rows="10" placeholder="Content"></textarea>
<Button :click="click">Post</Button>
</main>
<main>
<h1>Add New Post</h1>
<div class="textareas">
<Input
:keyup="function () {}"
id="title"
placeholder="Post Title"
type="text"
/>
<Input
:keyup="function () {}"
id="author"
placeholder="Author"
type="text"
/>
<h2>
Make the post private
<input id="private" type="checkbox" />
</h2>
</div>
<textarea
name="content"
id="content"
cols="30"
rows="10"
placeholder="Content"
></textarea>
<Button :click="click">Post</Button>
</main>
</template>
<script>
import axios from 'axios';
import Input from './Input.vue';
import Button from './Button.vue';
import axios from "axios"
import Input from "./Input.vue"
import Button from "./Button.vue"
export default {
methods: {
async click(e) {
const title = document.getElementById("title").value
const author = document.getElementById("author").value
const content = document.getElementById("content").value
const priv = document.getElementById("private").value
const token = localStorage.getItem("token")
const res = await axios.post("/api/blog/add", {
token: token,
title: title,
author: author,
content: content,
priv: priv==="on"
})
if(res.data["error"]!==0)
return alert("Error!")
alert("Post added!")
location.reload()
}
},
methods: {
async click(e) {
const title = document.getElementById("title").value
const author = document.getElementById("author").value
const content = document.getElementById("content").value
const priv = document.getElementById("private").value
const token = localStorage.getItem("token")
const res = await axios.post("/api/blog/add", {
token: token,
title: title,
author: author,
content: content,
priv: priv === "on"
})
if (res.data["error"] !== 0) return alert("Error!")
alert("Post added!")
location.reload()
}
}
}
</script>
<style scoped>
h1{
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
h1 {
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
h2{
h2 {
background: var(--dark-two);
font-size: 25px;
border-radius: 20px;
@@ -71,38 +86,38 @@ input[type="checkbox"] {
padding: 10px;
}
textarea{
width: 500px;
font-size: 20px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
resize: vertical;
height: 200px;
transition: .4s;
textarea {
width: 500px;
font-size: 20px;
padding: 20px;
border-radius: 20px;
background: var(--dark-two);
border: none;
color: white;
outline: none;
resize: vertical;
height: 200px;
transition: 0.4s;
}
.textareas {
flex-direction: column;
display: flex;
gap: 20px;
flex-direction: column;
display: flex;
gap: 20px;
}
textarea:focus {
box-shadow: var(--def-shadow);
box-shadow: var(--def-shadow);
}
main{
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
main {
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -1,51 +1,67 @@
<template>
<div>
<h1>Add Project</h1>
<Input :keyup="function() { }" id="name" placeholder="Project Name" type="text"/>
<Input :keyup="function() { }" id="desc" placeholder="Project Desc" type="text"/>
<Input :keyup="function() { }" id="url" placeholder="Project URL" type="text"/>
<Button :click="click">Post</Button>
</div>
<div>
<h1>Add Project</h1>
<Input
:keyup="function () {}"
id="name"
placeholder="Project Name"
type="text"
/>
<Input
:keyup="function () {}"
id="desc"
placeholder="Project Desc"
type="text"
/>
<Input
:keyup="function () {}"
id="url"
placeholder="Project URL"
type="text"
/>
<Button :click="click">Post</Button>
</div>
</template>
<script>
import axios from 'axios';
import Input from './Input.vue';
import Button from './Button.vue';
import axios from "axios"
import Input from "./Input.vue"
import Button from "./Button.vue"
export default {
methods: {
async click(e) {
const name = document.getElementById("name").value
const desc = document.getElementById("desc").value
const url = document.getElementById("url").value
const token = localStorage.getItem("token")
const res = await axios.get(`/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`)
if(res.data["error"]!==0)
return alert("Error!")
alert("Project added!")
location.reload()
}
},
methods: {
async click(e) {
const name = document.getElementById("name").value
const desc = document.getElementById("desc").value
const url = document.getElementById("url").value
const token = localStorage.getItem("token")
const res = await axios.get(
`/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`
)
if (res.data["error"] !== 0) return alert("Error!")
alert("Project added!")
location.reload()
}
}
}
</script>
<style scoped>
h1{
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
h1 {
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
div{
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
div {
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -1,51 +1,67 @@
<template>
<div>
<h1>Add Resource</h1>
<Input :keyup="function(){}" id="name" placeholder="Resource Name" type="text"/>
<Input :keyup="function(){}" id="tags" placeholder="Resource Tags (comma seperated)" type="text"/>
<Input :keyup="function(){}" id="url" placeholder="Resource URL" type="text"/>
<Button :click="click">Post</Button>
</div>
<div>
<h1>Add Resource</h1>
<Input
:keyup="function () {}"
id="name"
placeholder="Resource Name"
type="text"
/>
<Input
:keyup="function () {}"
id="tags"
placeholder="Resource Tags (comma seperated)"
type="text"
/>
<Input
:keyup="function () {}"
id="url"
placeholder="Resource URL"
type="text"
/>
<Button :click="click">Post</Button>
</div>
</template>
<script>
import Input from './Input.vue';
import Button from './Button.vue';
import axios from 'axios';
import Input from "./Input.vue"
import Button from "./Button.vue"
import axios from "axios"
export default {
methods: {
async click(e) {
const name = document.getElementById("name").value
const tags = document.getElementById("tags").value
const url = document.getElementById("url").value
const token = localStorage.getItem("token")
const res = await axios.get(`/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`)
if(res.data["error"]!==0)
return alert("Error!")
alert("Resource added!")
location.reload()
}
},
methods: {
async click(e) {
const name = document.getElementById("name").value
const tags = document.getElementById("tags").value
const url = document.getElementById("url").value
const token = localStorage.getItem("token")
const res = await axios.get(
`/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`
)
if (res.data["error"] !== 0) return alert("Error!")
alert("Resource added!")
location.reload()
}
}
}
</script>
<style scoped>
h1{
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
h1 {
color: var(--white);
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
div{
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
div {
background-color: var(--dark-three);
padding: 50px;
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
</style>

View File

View File

@@ -1,42 +1,42 @@
<template>
<nuxt-link :to="url">
<nuxt-link :to="url">
<h1>{{ title }}</h1>
<p>{{ info }}</p>
<h2>{{ desc }}</h2>
</nuxt-link>
<h2>{{ desc }}</h2>
</nuxt-link>
</template>
<script>
export default {
props: ["title", "desc", "info", "url"],
props: ["title", "desc", "info", "url"]
}
</script>
<style scoped>
a{
padding: 30px;
color: white;
background: var(--dark-two);
cursor: pointer;
text-decoration: none;
transition: .4s;
width: 70%;
a {
padding: 30px;
color: white;
background: var(--dark-two);
cursor: pointer;
text-decoration: none;
transition: 0.4s;
width: 70%;
}
a:hover{
box-shadow: var(--def-shadow);
a:hover {
box-shadow: var(--def-shadow);
}
h1{
font-size: 40px;
margin-bottom: 5px;
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
text-shadow: none;
h1 {
font-size: 40px;
margin-bottom: 5px;
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
text-shadow: none;
}
h2{
margin-top: 10px;
h2 {
margin-top: 10px;
}
</style>
</style>

View File

@@ -1,62 +1,62 @@
<template>
<main @click="redirect()">
<i class='bx bx-code-alt'></i>
<div>
<h1>{{ name }}</h1>
<h2>{{ desc }}</h2>
</div>
</main>
<main @click="redirect()">
<i class="bx bx-code-alt"></i>
<div>
<h1>{{ name }}</h1>
<h2>{{ desc }}</h2>
</div>
</main>
</template>
<script>
export default {
props: ["name", "desc", "url"],
methods: {
redirect(e) {
location.href=this.url
}
},
props: ["name", "desc", "url"],
methods: {
redirect(e) {
location.href = this.url
}
}
}
</script>
<style scoped>
main {
color: var(--white);
background: var(--dark-two);
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 40px;
cursor: pointer;
transition: .4s;
height: 100px;
width: 450px;
color: var(--white);
background: var(--dark-two);
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 40px;
cursor: pointer;
transition: 0.4s;
height: 100px;
width: 450px;
}
main:hover{
box-shadow: var(--def-shadow);
main:hover {
box-shadow: var(--def-shadow);
}
i{
font-size: 65px;
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
i {
font-size: 65px;
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
}
h1{
font-size: 35px;
margin-bottom: 10px;
h1 {
font-size: 35px;
margin-bottom: 10px;
}
h2{
font-size: 25px;
h2 {
font-size: 25px;
}
@media only screen and (max-width: 1416px) {
main{
width: 80%;
}
main {
width: 80%;
}
}
</style>

View File

@@ -1,28 +1,26 @@
<template>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
export default {}
</script>
<style scoped>
div{
display: flex;
flex-direction: row;
padding: 15px;
align-items: center;
justify-content: center;
gap: 30px;
div {
display: flex;
flex-direction: row;
padding: 15px;
align-items: center;
justify-content: center;
gap: 30px;
}
@media only screen and (max-width: 1416px) {
div {
flex-direction: column;
}
div {
flex-direction: column;
}
}
</style>

View File

@@ -1,66 +1,66 @@
<template>
<main @click="redirect()" class="mn">
<div class="resource">
<h1>{{ name }}</h1>
<div class="tags">
<Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
</div>
</div>
<i class='bx bx-right-arrow-alt' ></i>
</main>
<main @click="redirect()" class="mn">
<div class="resource">
<h1>{{ name }}</h1>
<div class="tags">
<Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
</div>
</div>
<i class="bx bx-right-arrow-alt"></i>
</main>
</template>
<script>
import Tag from './Tag.vue';
import Tag from "./Tag.vue"
export default {
props: ["tags", "name", "url"],
methods: {
redirect(e){
location.href = this.url
}
props: ["tags", "name", "url"],
methods: {
redirect(e) {
location.href = this.url
}
}
}
</script>
<style scoped>
main{
background: var(--dark-two);
padding: 30px 40px 30px 40px;
display: flex;
flex-direction: row;
color: var(--white);
justify-content: space-between;
align-items: center;
transition: .4s;
width: 80%;
cursor: pointer;
main {
background: var(--dark-two);
padding: 30px 40px 30px 40px;
display: flex;
flex-direction: row;
color: var(--white);
justify-content: space-between;
align-items: center;
transition: 0.4s;
width: 80%;
cursor: pointer;
}
main:hover{
box-shadow: var(--def-shadow);
main:hover {
box-shadow: var(--def-shadow);
}
.mn:hover i{
color: white;
.mn:hover i {
color: white;
}
.resource{
display: flex;
flex-direction: column;
gap: 10px;
.resource {
display: flex;
flex-direction: column;
gap: 10px;
}
.tags{
display: flex;
flex-direction: row;
gap: 10px;
.tags {
display: flex;
flex-direction: row;
gap: 10px;
}
i{
font-size: 70px;
cursor: pointer;
color: var(--dark-two);
transition: .4s;
i {
font-size: 70px;
cursor: pointer;
color: var(--dark-two);
transition: 0.4s;
}
</style>
</style>

View File

@@ -1,24 +1,20 @@
<template>
<p>
#<slot></slot>
</p>
<p>#<slot></slot></p>
</template>
<script>
export default {
}
export default {}
</script>
<style scoped>
p{
background: var(--dark-three);
color: white;
text-shadow: 1px 1px 2px white;
padding: 5px 10px 5px 10px;
font-size: 25px;
border-radius: 7px;
margin-top: 10px;
transition: .4s;
}
</style>
p {
background: var(--dark-three);
color: white;
text-shadow: 1px 1px 2px white;
padding: 5px 10px 5px 10px;
font-size: 25px;
border-radius: 7px;
margin-top: 10px;
transition: 0.4s;
}
</style>