diff --git a/README.md b/README.md index 1c7942c..a75256b 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@
Ship ID is similar to how DNA works. Parts of it correspond to parts of its appearance. The first digit corresponds to the class of the ship, the second to the cabin design, third to the engine design, etc...
diff --git a/src/Chapters/ChapterAbout/ChapterAbout.style.tsx b/src/Chapters/ChapterAbout/ChapterAbout.style.tsx
index 14267fe..7031377 100644
--- a/src/Chapters/ChapterAbout/ChapterAbout.style.tsx
+++ b/src/Chapters/ChapterAbout/ChapterAbout.style.tsx
@@ -121,7 +121,7 @@ export const ChapterMonaco = styled.div`
export const ChapterItalic = styled.em`
color: #42edf8 !important;
- text-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6);
+ /* text-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6); */
text-transform: none;
font-style: normal;
`;
diff --git a/src/Chapters/ChapterAbout/ChapterAbout.view.tsx b/src/Chapters/ChapterAbout/ChapterAbout.view.tsx
index c0e87fd..f3ac8e6 100644
--- a/src/Chapters/ChapterAbout/ChapterAbout.view.tsx
+++ b/src/Chapters/ChapterAbout/ChapterAbout.view.tsx
@@ -8,7 +8,7 @@ import { ShipSelector } from "../../ShipSelector/ShipSelector.controller";
import { PENDING, RIGHT, WRONG } from "./ChapterAbout.constants";
import { data } from "./ChapterAbout.data";
//prettier-ignore
-import { Button, ButtonBorder, ButtonText, ChapterCourse, ChapterGrid, ChapterStyled, ChapterH1, ChapterH2, ChapterValidator, ChapterValidatorContent, ChapterValidatorContentWrapper, ChapterValidatorInside, ChapterValidatorTitle } from "./ChapterAbout.style";
+import { Button, ButtonBorder, ButtonText, ChapterCourse, ChapterGrid, ChapterH1, ChapterH2, ChapterStyled, ChapterValidator, ChapterValidatorContent, ChapterValidatorContentWrapper, ChapterValidatorInside, ChapterValidatorTitle } from "./ChapterAbout.style";
monaco
.init()
@@ -50,7 +50,7 @@ const MonacoReadOnly = ({ height, value }: any) => {
folding: false,
readOnly: true,
fontSize: 14,
- fontFamily: "Electrolize"
+ fontFamily: "Roboto"
}}
/>
diff --git a/src/Chapters/ChapterConditionals/course.md b/src/Chapters/ChapterConditionals/course.md
index c139757..d690db4 100644
--- a/src/Chapters/ChapterConditionals/course.md
+++ b/src/Chapters/ChapterConditionals/course.md
@@ -4,15 +4,15 @@
Booleans are typed _bool_ in LIGO :
-```js
-const a: boolean = true; // or false
+```
+const a: bool = true // or false
```
# Comparing Values
Only values of the same type can be natively compared, i.e. int, nat, string, tez, timestamp, address, etc... However some values of the same type are not natively comparable, i.e. maps, sets or lists. You will have to write your own comparison functions for those.
-```js
+```
// Comparing Strings
const a : string = "Alice"
const b : string = "Alice"
@@ -35,18 +35,18 @@ const c : bool = (a = b) // false
Conditional logic enables forking the control flow depending on the state.
-```js
+```
function isSmall (const n : nat) : bool is
if n < 10n then true else false
```
⚠️ When the branches of the conditional are not a single expression, as above, we need a block:
-```js
+```
if x < y then
block {
x := x + 1;
-y := y - 1;
+y := y - 1
}
else skip;
```
diff --git a/src/Chapters/ChapterConditionals/exercise.ligo b/src/Chapters/ChapterConditionals/exercise.ligo
index 26da9fe..5d276ec 100644
--- a/src/Chapters/ChapterConditionals/exercise.ligo
+++ b/src/Chapters/ChapterConditionals/exercise.ligo
@@ -6,5 +6,5 @@ const my_ship_price : tez = 3tez * 1.20
function modify_ship (const my_ship : ship_code) : ship_code is
block {
// Type your solution below
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+ const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
} with modified_ship
\ No newline at end of file
diff --git a/src/Chapters/ChapterConditionals/solution.ligo b/src/Chapters/ChapterConditionals/solution.ligo
index 7871f07..206b7e5 100644
--- a/src/Chapters/ChapterConditionals/solution.ligo
+++ b/src/Chapters/ChapterConditionals/solution.ligo
@@ -6,7 +6,8 @@ const my_ship_price : tez = 3tez * 1.20
function modify_ship (const my_ship : ship_code) : ship_code is
block {
// Type your solution below
- if String.slice(2n, 1n, name) = "2" then
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+ var modified_ship : ship_code := my_ship;
+ if String.slice(2n, 1n, my_ship) = "2" then
+ modified_ship = String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
else skip;
} with modified_ship
\ No newline at end of file
diff --git a/src/Chapters/ChapterFunctions/course.md b/src/Chapters/ChapterFunctions/course.md
index 4bd3513..7da5049 100644
--- a/src/Chapters/ChapterFunctions/course.md
+++ b/src/Chapters/ChapterFunctions/course.md
@@ -1,6 +1,6 @@
# Chapter 6 : Functions
-LIGO functions are the basic building block of contracts. Each entrypoint of a contract is a functions and each smart contract must have at least one function named _main_ that dispatches controls to the other functions.
+LIGO functions are the basic building block of contracts. Each entrypoint of a contract is a function and each smart contract must have at least one function named _main_ that dispatches controls to the other functions.
When calling a function, LIGO makes a copy of the arguments but also the environment variables. Therefore any modification to these will not be reflected outside the scope of the function and will be lost if not explicitly returned by the function.
@@ -10,25 +10,25 @@ There are 2 types of functions in PascaLIGO, Block Functions and Blockless Funct
In PascaLIGO, blocks allows for the sequential composition of instructions into an isolated scope. Each block needs to include at least one instruction.
-```js
+```
block { a := a + 1 }
```
If we need a placeholder, we use the instruction _skip_ which leaves the state unchanged. The rationale for skip instead of a truly empty block is that it prevents you from writing an empty block by mistake.
-```js
+```
block { skip }
```
Blocks can also include declarations of values :
-```js
+```
block { const a : int = 1 }
```
Functions in PascaLIGO are defined using the following syntax :
-```js
+```
function () : is
block {
@@ -37,7 +37,7 @@ block {
For instance :
-```js
+```
function add (const a : int; const b : int) : int is
block {
const sum : int = a + b
@@ -48,7 +48,7 @@ function add (const a : int; const b : int) : int is
Functions that can contain all of their logic into a single expression can be defined without the need of a block. The add function above can be re-written as a blockless function:
-```js
+```
function add (const a: int; const b : int) : int is a + b
```
@@ -56,7 +56,7 @@ function add (const a: int; const b : int) : int is a + b
It is possible to define functions without assigning them a name. They are useful when you want to pass them as arguments, or assign them to a key in a record or a map.
-```js
+```
function increment (const b : int) : int is
(function (const a : int) : int is a + 1) (b)
const a : int = increment (1); // a = 2
@@ -64,7 +64,7 @@ const a : int = increment (1); // a = 2
If the example above seems contrived, here is a more common design pattern for lambdas: to be used as parameters to functions. Consider the use case of having a list of integers and mapping the increment function to all its elements.
-```js
+```
function incr_map (const l : list (int)) : list (int) is
List.map (function (const i : int) : int is i + 1, l)
```
@@ -77,7 +77,7 @@ At the moment, recursive function are limited to one (possibly tupled) parameter
In PascaLigo recursive functions are defined using the _recursive_ keyword
-```js
+```
recursive function sum (const n : int; const acc: int) : int is
if n<1 then acc else sum(n-1,acc+n)
```
diff --git a/src/Chapters/ChapterFunctions/exercise.ligo b/src/Chapters/ChapterFunctions/exercise.ligo
index 7575307..9dc0c0d 100644
--- a/src/Chapters/ChapterFunctions/exercise.ligo
+++ b/src/Chapters/ChapterFunctions/exercise.ligo
@@ -3,4 +3,4 @@ var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
// Type your solution below
-my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
diff --git a/src/Chapters/ChapterFunctions/solution.ligo b/src/Chapters/ChapterFunctions/solution.ligo
index 26e8c41..88999e5 100644
--- a/src/Chapters/ChapterFunctions/solution.ligo
+++ b/src/Chapters/ChapterFunctions/solution.ligo
@@ -5,5 +5,5 @@ const my_ship_price : tez = 3tez * 1.20
// Type your solution below
function modify_ship (const my_ship : ship_code) : ship_code is
block {
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+ const modified_ship = String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
} with modified_ship
diff --git a/src/Chapters/ChapterLists/course.md b/src/Chapters/ChapterLists/course.md
index 615761e..4bc7ceb 100644
--- a/src/Chapters/ChapterLists/course.md
+++ b/src/Chapters/ChapterLists/course.md
@@ -1,3 +1,3 @@
# Chapter 10 : Lists
-Comming soon ...
+Coming soon ...
diff --git a/src/Chapters/ChapterLists/exercise.ligo b/src/Chapters/ChapterLists/exercise.ligo
index 7575307..9dc0c0d 100644
--- a/src/Chapters/ChapterLists/exercise.ligo
+++ b/src/Chapters/ChapterLists/exercise.ligo
@@ -3,4 +3,4 @@ var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
// Type your solution below
-my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
diff --git a/src/Chapters/ChapterLists/solution.ligo b/src/Chapters/ChapterLists/solution.ligo
index 26e8c41..15ff85a 100644
--- a/src/Chapters/ChapterLists/solution.ligo
+++ b/src/Chapters/ChapterLists/solution.ligo
@@ -5,5 +5,5 @@ const my_ship_price : tez = 3tez * 1.20
// Type your solution below
function modify_ship (const my_ship : ship_code) : ship_code is
block {
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+ const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
} with modified_ship
diff --git a/src/Chapters/ChapterLoops/course.md b/src/Chapters/ChapterLoops/course.md
index a9a852e..66c4249 100644
--- a/src/Chapters/ChapterLoops/course.md
+++ b/src/Chapters/ChapterLoops/course.md
@@ -1,3 +1,57 @@
# Chapter 8 : Loops
-Comming soon ...
+LIGO integrate 2 kinds of loops. General while iterations and bounded for loops.
+
+## While loops
+
+While loops are define as follows :
+
+```
+while block {
+
+}
+```
+
+⚠️ If the while condition is never met, the block will will repeatedly be evaluated until the contract run out of gas or fails.
+
+## For Loops
+
+For-loops iterates over bounded intervals :
+
+```
+for to block {
+
+}
+```
+
+For instance :
+
+```
+var acc : int := 0;
+for i := 1 to 10 block {
+ acc := acc + i
+}
+```
+
+For-loops can also iterate through the contents of a collection, that is, a list, a set or a map. This is done with :
+
+```
+for in block {
+
+}
+```
+
+Here is an example where the integers in a list are summed up.
+
+```
+function sum_list (var l : list (int)) : int is block {
+ var total : int := 0;
+ for i in list l block {
+ total := total + i
+ }
+} with total
+```
+
+## Your mission
+
+Modify the contract so that the function iterates over all attributes of the ship and changes all occurences of "2" by "1".
diff --git a/src/Chapters/ChapterLoops/exercise.ligo b/src/Chapters/ChapterLoops/exercise.ligo
index 7575307..e0335fd 100644
--- a/src/Chapters/ChapterLoops/exercise.ligo
+++ b/src/Chapters/ChapterLoops/exercise.ligo
@@ -2,5 +2,12 @@ type ship_code is string
var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
-// Type your solution below
-my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+
+function modify_ship (const my_ship : ship_code) : ship_code is
+ block {
+ var modified_ship : ship_code := my_ship;
+ // Type your solution below
+ if String.slice(2n, 1n, name) = "2" then
+ modified_ship = String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
+ else skip;
+ } with modified_ship
\ No newline at end of file
diff --git a/src/Chapters/ChapterLoops/solution.ligo b/src/Chapters/ChapterLoops/solution.ligo
index 26e8c41..6e154a7 100644
--- a/src/Chapters/ChapterLoops/solution.ligo
+++ b/src/Chapters/ChapterLoops/solution.ligo
@@ -2,8 +2,14 @@ type ship_code is string
var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
-// Type your solution below
+
function modify_ship (const my_ship : ship_code) : ship_code is
block {
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
- } with modified_ship
+ var modified_ship : ship_code := my_ship;
+ // Type your solution below
+ for i := 0n to 5n block {
+ if String.slice(i, 1n, name) = "2" then
+ modified_ship = String.slice(0n, i, my_ship) ^ "1" ^ String.slice(i + 2n, 5n - i, my_ship)
+ else skip;
+ }
+ } with modified_ship
\ No newline at end of file
diff --git a/src/Chapters/ChapterMath/course.md b/src/Chapters/ChapterMath/course.md
index 9634ac3..767ed04 100644
--- a/src/Chapters/ChapterMath/course.md
+++ b/src/Chapters/ChapterMath/course.md
@@ -17,7 +17,7 @@ LIGO offers three built-in numerical types:
Addition in LIGO is accomplished by means of the + infix operator. Some type constraints apply, for example you cannot add a value of type tez to a value of type nat.
-```js
+```
const a : int = 5 + 10
const b : int = 5n + 10
const c : tez = 5mutez + 0.000_010tez
@@ -29,7 +29,7 @@ const c : tez = 5mutez + 0.000_010tez
Substractions follow the same principles.
-```js
+```
const a : int = 5 - 10
const b : int = 5n - 2n
const d : tez = 5mutez - 1mutez
@@ -39,7 +39,7 @@ const d : tez = 5mutez - 1mutez
Multiplications follow the same principles.
-```js
+```
const a : int = 5 * 5
const b : nat = 5n * 5n
const c : tez = 5n * 5mutez
@@ -49,7 +49,7 @@ const c : tez = 5n * 5mutez
Divisions follow the same principles.
-```js
+```
const a : int = 10 / 3
const b : nat = 10n / 3n
const c : nat = 10mutez / 3mutez
@@ -59,7 +59,7 @@ const c : nat = 10mutez / 3mutez
Modulos follow the same principles.
-```js
+```
const a : int = 120
const b : int = 9
const rem1 : nat = a mod b // 3
@@ -69,9 +69,9 @@ const rem1 : nat = a mod b // 3
You can cast an int to a nat and vice versa. Here is how:
-```js
-const a: int = int(1n);
-const b: nat = abs(1);
+```
+const a: int = int(1n)
+const b: nat = abs(1)
```
## Checking a nat
@@ -79,7 +79,7 @@ const b: nat = abs(1);
*is\_nat* returns a _nat_ or _None_
-```js
+```
const is_a_nat : option (nat) = is_nat (1)
```
diff --git a/src/Chapters/ChapterRecords/course.md b/src/Chapters/ChapterRecords/course.md
index 214ee13..6af576b 100644
--- a/src/Chapters/ChapterRecords/course.md
+++ b/src/Chapters/ChapterRecords/course.md
@@ -1,3 +1,3 @@
# Chapter 9 : Records
-Comming soon ...
+Coming soon...
diff --git a/src/Chapters/ChapterRecords/exercise.ligo b/src/Chapters/ChapterRecords/exercise.ligo
index 7575307..9dc0c0d 100644
--- a/src/Chapters/ChapterRecords/exercise.ligo
+++ b/src/Chapters/ChapterRecords/exercise.ligo
@@ -3,4 +3,4 @@ var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
// Type your solution below
-my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
diff --git a/src/Chapters/ChapterRecords/solution.ligo b/src/Chapters/ChapterRecords/solution.ligo
index 26e8c41..15ff85a 100644
--- a/src/Chapters/ChapterRecords/solution.ligo
+++ b/src/Chapters/ChapterRecords/solution.ligo
@@ -5,5 +5,5 @@ const my_ship_price : tez = 3tez * 1.20
// Type your solution below
function modify_ship (const my_ship : ship_code) : ship_code is
block {
- const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+ const modified_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
} with modified_ship
diff --git a/src/Chapters/ChapterStrings/course.md b/src/Chapters/ChapterStrings/course.md
index dd70683..3a97095 100644
--- a/src/Chapters/ChapterStrings/course.md
+++ b/src/Chapters/ChapterStrings/course.md
@@ -2,7 +2,7 @@
Strings are defined using the built-in string type as follows:
-```js
+```
const a: string = "Hello Captain Rogers";
```
@@ -10,19 +10,19 @@ const a: string = "Hello Captain Rogers";
Strings can be concatenated using the _^_ operator.
-```js
-const name: string = "Captain Rogers";
-const greeting: string = "Hello";
-const full_greeting: string = greeting ^ " " ^ name;
+```
+const name: string = "Captain Rogers"
+const greeting: string = "Hello"
+const full_greeting: string = greeting ^ " " ^ name
```
## Slicing Strings
Strings can be sliced using a built-in function _String.slice_ as follows:
-```js
-const name: string = "Captain Rogers";
-const slice: string = String.slice(0n, 1n, name);
+```
+const name: string = "Captain Rogers"
+const slice: string = String.slice(0n, 1n, name)
```
⚠️ Notice that the offset and length of the slice are natural numbers.
@@ -31,9 +31,9 @@ const slice: string = String.slice(0n, 1n, name);
The length of a string can be found using a built-in function _String.length_ as follows:
-```js
-const name: string = "Captain Rogers";
-const length: nat = String.length(name); // length = 14
+```
+const name: string = "Captain Rogers"
+const length: nat = String.length(name) // length = 14
```
## Your mission
diff --git a/src/Chapters/ChapterStrings/solution.ligo b/src/Chapters/ChapterStrings/solution.ligo
index 7575307..9dc0c0d 100644
--- a/src/Chapters/ChapterStrings/solution.ligo
+++ b/src/Chapters/ChapterStrings/solution.ligo
@@ -3,4 +3,4 @@ var my_ship : ship_code := "020433"
my_ship := "222031"
const my_ship_price : tez = 3tez * 1.20
// Type your solution below
-my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(4n, 3n, my_ship)
+my_ship := String.slice(0n, 2n, my_ship) ^ "1" ^ String.slice(3n, 3n, my_ship)
diff --git a/src/Chapters/ChapterTypes/course.md b/src/Chapters/ChapterTypes/course.md
index b3e2107..0bbcb18 100644
--- a/src/Chapters/ChapterTypes/course.md
+++ b/src/Chapters/ChapterTypes/course.md
@@ -10,7 +10,7 @@ LIGO comes with all basic types built-in like _string_, _int_ or _tez_ for accou
Type aliasing consists in renaming a given type, when the context calls for a more precise name. This increases readability and maintainability of your smart contracts. For example we can choose to alias a string type as an animal breed - this will allow us to comunicate our intent with added clarity.
-```js
+```
type breed is string
const dog_breed : breed = "Saluki"
```
@@ -19,7 +19,7 @@ const dog_breed : breed = "Saluki"
The type account_balances denotes a map from addresses to tez
-```js
+```
type account_balances is map (address, tez)
const ledger : account_balances =
@@ -34,7 +34,7 @@ map [("tz1KqTpEZ7Yob7QbPE4Hy4Wo8fHG8LhKxZSx" : address) -> 10mutez]
Often contracts require complex data structures, which in turn require well-typed storage or functions to work with. LIGO offers a simple way to compose simple types into structured types.
The first of those structured types is the record, which aggregates types as fields and index them with a field name. In the example below we define an account type whick keeps the balance and number of previous transactions for a given account.
-```js
+```
type account is record [
balance : tez;
transactions : nat
@@ -54,6 +54,6 @@ const my_account : account = record [
1- There is an online editor in the top right corner of this page. In the editor, define *ship\_code* as a string type.
-2- Then define the constant *my\_ship* as a *ship\_code* of value _'020433'_.
+2- Then define the constant *my\_ship* as a *ship\_code* of value _"020433"_.
3- Then go ahead and validate your mission for a comparative view with the solution.
diff --git a/src/Chapters/ChapterVariables/course.md b/src/Chapters/ChapterVariables/course.md
index d5e8e97..2ce2e35 100644
--- a/src/Chapters/ChapterVariables/course.md
+++ b/src/Chapters/ChapterVariables/course.md
@@ -4,7 +4,7 @@
Constants are immutable by design, which means their values cannot be reassigned. Put in another way, they can be assigned once, at their declaration. When defining a constant you need to provide a name, type and a value:
-```js
+```
const age: int = 25;
```
@@ -12,8 +12,8 @@ const age: int = 25;
Variables, unlike constants, are mutable. They cannot be declared in a global scope, but they can be declared and used within functions, or as function parameters.
-```js
-var c: int := 2 + 3;
+```
+var c: int := 2 + 3
c := c - 3
```
diff --git a/src/NotFound/NotFound.view.tsx b/src/NotFound/NotFound.view.tsx
index 9414f0f..74f0a22 100644
--- a/src/NotFound/NotFound.view.tsx
+++ b/src/NotFound/NotFound.view.tsx
@@ -2,4 +2,4 @@ import * as React from "react";
import { NotFoundStyled } from "./NotFound.style";
-export const NotFound = () => COMMING SOON... ;
+export const NotFound = () => COMING SOON... ;
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 0b228b6..3ee3bdc 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -1,6 +1,6 @@
import { createGlobalStyle } from "styled-components/macro";
-import { slideRightEnter, slideRightExit, slideLeftEnter, slideLeftExit } from "./animations";
+import { slideLeftEnter, slideLeftExit, slideRightEnter, slideRightExit } from "./animations";
export const GlobalStyle = createGlobalStyle`
* {
@@ -32,6 +32,7 @@ a:hover {
}
p {
+ font-family: "Roboto", sans-serif;
display: block;
margin-block-start: 10px;
margin-block-end: 10px;