diff --git a/form-sass.html b/form-sass.html
new file mode 100644
index 0000000..ff60b73
--- /dev/null
+++ b/form-sass.html
@@ -0,0 +1,31 @@
+
+
+ CSS skin
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 76d1386..b91fd8f 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
CSS skin
-
+
diff --git a/skin.css b/skin.css
index 1632a5c..7c9ea7c 100644
--- a/skin.css
+++ b/skin.css
@@ -1,13 +1,166 @@
-.highlight {
- background-color: #ddd;
-}
-
-button.btn {
- border-radius: 3px;
- border-style: solid;
- border-width: 1px;
- font-weight: normal;
- line-height: 1.15;
- text-align: center;
- vertical-align: middle;
-}
\ No newline at end of file
+html {
+ text-align: center;
+}
+
+.btn {
+ color: #134fd7;
+ background-color: white;
+ border: #c9c9cc 1px solid;
+ border-radius: 3pt;
+ font-size: 1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding: 1.5% 5%;
+ margin-left: 0.7%;
+}
+
+.btn:hover {
+ background-color: #134fd7;
+ color: white;
+}
+
+.btn--primary {
+ color: white;
+ background-color: #134fd7;
+ border: #c9c9cc 1px solid;
+ border-radius: 3pt;
+ font-size: 1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding: 1.5% 5%;
+ margin-left: 0.7%;
+}
+
+.btn--primary:hover {
+ background-color: white;
+ color: #134fd7;
+}
+
+.btn--secondary {
+ color: #696a6b;
+ background-color: #eeeef0;
+ border: #696a6b 1px solid;
+ border-radius: 3pt;
+ font-size: 1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding: 1.5% 5%;
+ margin-left: 0.7%;
+}
+
+.btn--secondary:hover {
+ background-color: #696a6b;
+ color: #eeeef0;
+}
+
+.btn--large {
+ color: #134fd7;
+ background-color: white;
+ border: #c9c9cc 1px solid;
+ border-radius: 3pt;
+ font-size: 1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding: 1.5% 8%;
+ margin-left: 0.7%;
+ font-size: 1.2rem;
+}
+
+.btn--large:hover {
+ background-color: #134fd7;
+ color: white;
+}
+
+.btn--extra-large {
+ color: #134fd7;
+ background-color: white;
+ border: #c9c9cc 1px solid;
+ border-radius: 3pt;
+ font-size: 1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding: 1.5% 11%;
+ margin-left: 0.7%;
+ font-size: 1.3rem;
+}
+
+.btn--extra-large:hover {
+ background-color: #134fd7;
+ color: white;
+}
+
+.container {
+ width: 80%;
+ margin: auto;
+ background: #bebcb9;
+ text-align: left;
+}
+
+ul {
+ list-style: none;
+}
+
+ul li {
+ align-items: center;
+ justify-content: center;
+}
+
+.form_element--text {
+ width: 90%;
+ height: 6%;
+ margin-bottom: 1%;
+ border: inset 2px #c1c585;
+ border-radius: 10pt;
+ background-color: #728eaa;
+}
+
+.form_element--text:focus {
+ background-color: #c9c9cc;
+ border: solid 3px #728eaa;
+ outline: none;
+}
+
+#form_element--subject {
+ width: 90%;
+ height: 15%;
+ margin-bottom: 1%;
+ border: inset 2px #c1c585;
+ border-radius: 10pt;
+ background-color: white;
+}
+
+#form_element--subject:focus {
+ background-color: #c9c9cc;
+ border: solid 3px white;
+ outline: none;
+}
+
+#form_element--country {
+ width: 90%;
+ height: 6%;
+ margin-bottom: 1%;
+ border: inset 2px #c1c585;
+ border-radius: 10pt;
+ background-color: pink;
+}
+
+#form_element--country:focus {
+ background-color: #c9c9cc;
+ border: solid 3px pink;
+ outline: none;
+}
+
+.form_element--submit {
+ width: 90%;
+ height: 6%;
+ margin-bottom: 1%;
+ border: outset 2pt #b5bb5b;
+ border-radius: 10pt;
+ background-color: #134fd7;
+}
+
+.form_element--submit:focus {
+ background-color: #c9c9cc;
+ border: solid 3px #134fd7;
+ outline: none;
+}
diff --git a/skin.min.css b/skin.min.css
new file mode 100644
index 0000000..6b40205
--- /dev/null
+++ b/skin.min.css
@@ -0,0 +1 @@
+html{text-align:center}.btn{color:#134fd7;background-color:#fff;border:#c9c9cc 1px solid;border-radius:3pt;font-size:1rem;font-stretch:narrower;font-weight:lighter;padding:1.5% 5%;margin-left:0.7%}.btn:hover{background-color:#134fd7;color:#fff}.btn--primary{color:#fff;background-color:#134fd7;border:#c9c9cc 1px solid;border-radius:3pt;font-size:1rem;font-stretch:narrower;font-weight:lighter;padding:1.5% 5%;margin-left:0.7%}.btn--primary:hover{background-color:#fff;color:#134fd7}.btn--secondary{color:#696a6b;background-color:#eeeef0;border:#696a6b 1px solid;border-radius:3pt;font-size:1rem;font-stretch:narrower;font-weight:lighter;padding:1.5% 5%;margin-left:0.7%}.btn--secondary:hover{background-color:#696a6b;color:#eeeef0}.btn--large{color:#134fd7;background-color:#fff;border:#c9c9cc 1px solid;border-radius:3pt;font-size:1rem;font-stretch:narrower;font-weight:lighter;padding:1.5% 8%;margin-left:0.7%;font-size:1.2rem}.btn--large:hover{background-color:#134fd7;color:#fff}.btn--extra-large{color:#134fd7;background-color:#fff;border:#c9c9cc 1px solid;border-radius:3pt;font-size:1rem;font-stretch:narrower;font-weight:lighter;padding:1.5% 11%;margin-left:0.7%;font-size:1.3rem}.btn--extra-large:hover{background-color:#134fd7;color:#fff}.container{width:80%;margin:auto;background:#bebcb9;text-align:left}ul{list-style:none}ul li{align-items:center;justify-content:center}.form_element--text{width:90%;height:6%;margin-bottom:1%;border:inset 2px #c1c585;border-radius:10pt;background-color:#728eaa}.form_element--text:focus{background-color:#c9c9cc;border:solid 3px #728eaa;outline:none}#form_element--subject{width:90%;height:15%;margin-bottom:1%;border:inset 2px #c1c585;border-radius:10pt;background-color:#fff}#form_element--subject:focus{background-color:#c9c9cc;border:solid 3px #fff;outline:none}#form_element--country{width:90%;height:6%;margin-bottom:1%;border:inset 2px #c1c585;border-radius:10pt;background-color:pink}#form_element--country:focus{background-color:#c9c9cc;border:solid 3px pink;outline:none}.form_element--submit{width:90%;height:6%;margin-bottom:1%;border:outset 2pt #b5bb5b;border-radius:10pt;background-color:#134fd7}.form_element--submit:focus{background-color:#c9c9cc;border:solid 3px #134fd7;outline:none}
diff --git a/skin.scss b/skin.scss
new file mode 100644
index 0000000..918f58c
--- /dev/null
+++ b/skin.scss
@@ -0,0 +1,91 @@
+
+html{
+ text-align: center;
+}
+$pink:pink;
+$white:white;
+$blue: #134fd7;
+$grey:#c9c9cc;
+$light-grey:#eeeef0;
+$slim:1px;
+$dark-grey:#696a6b;
+$normal-size:1.5% 5%;
+$large-size:1.5% 8%;
+$extra-large: 1.5% 11%;
+$form-element-color:#728eaa;
+$height:6%;
+$border: inset 2px #c1c585;
+$larg-height: 15%;
+$btn-border: outset 2pt #b5bb5b;
+@mixin button($color, $background-color, $border-color, $thickness, $padding){
+ color: $color;
+ background-color: $background-color;
+ border: $border-color $thickness solid;
+ border-radius: 3pt;
+ font-size:1rem;
+ font-stretch: narrower;
+ font-weight: lighter;
+ padding:$padding;
+ margin-left: 0.7%;
+ &:hover{
+ background-color:$color;
+ color:$background-color;
+ }
+}
+.btn{
+ @include button($blue, $white, $grey, $slim, $normal-size);
+}
+.btn--primary {
+ @include button($white, $blue, $grey, $slim, $normal-size);
+}
+.btn--secondary{
+ @include button($dark-grey, $light-grey, $dark-grey, $slim, $normal-size);
+}
+.btn--large{
+ @include button($blue, $white, $grey, $slim, $large-size);
+ font-size: 1.2rem;
+}
+.btn--extra-large{
+ @include button($blue, $white, $grey, $slim, $extra-large);
+ font-size: 1.3rem;
+
+}
+.container{
+ width:80%;
+ margin: auto;
+ background: rgb(190, 188, 185);
+ text-align: left;
+}
+ul{
+ list-style: none;
+}
+ul li{
+ align-items: center;
+ justify-content: center;
+}
+@mixin form-element ($color, $border, $height){
+ width: 90%;
+ height: $height;
+ margin-bottom: 1%;
+ border: $border;
+ border-radius: 10pt;
+ background-color: $color;
+ &:focus{
+ background-color:#c9c9cc;
+ border: solid 3px $color;
+ outline:none;
+ }
+
+}
+.form_element--text{
+ @include form-element($form-element-color,$border,$height);
+}
+#form_element--subject{
+ @include form-element($white, $border, $larg-height);
+}
+#form_element--country{
+ @include form-element($pink, $border, $height);
+}
+.form_element--submit{
+ @include form-element($blue,$btn-border, $height);
+}
\ No newline at end of file