:root {
 --white: #ffffff;
 --white-dark: #b8b7b7;

 --purple: #9147ff;
 --purple-dark: #741ef5;

 --dark: #000000;
 --dark-clear: #141414;

 --gray: #292929;
 --gray-clear: #4e4e4e;

 --elixir-h2: #a076d0;
 --elixir-h4: #9e77ce;
 --elixir-text: #8d57e1;

 --node-h2: #68c83d;
 --node-h4: #6ac53d;
 --node-text: #8d57de;
 --node-js: #efda21;

 --react-h2: #00c1e0;
 --react-h4: #0abcda;
 --react-text: #8a56db;

 --dribbble: #e54786;
 --github: #000;
 --twitter: #18ccf8;
}

* {
 margin: 0;
 padding: 0;
 font-family: 'Poppins';
}

body {
 background-color: var(--dark-clear);
}

nav {
 background: var(--purple);
 
}

nav img {
 width: 60px;
 height: 60px;
 margin-left: 20px;
 margin-top: 15px;
}

button {
 position: relative;
 width: auto;
 display: inline-block;
 color: var(--dark);
 text-decoration: none;
 border-radius: 5px;
 border: solid 1px var(--white-dark);
 background: var(--white);
 text-align: center;
 padding: 16px 18px 14px;
 margin: 12px;
 font-family: 'Poppins';
 left: 1290px;
 top: -20px;
  
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
	
 -webkit-box-shadow: 0px 6px 0px var(--white-dark);
 -moz-box-shadow: 0px 6px 0px var(--white-dark);
 box-shadow: 0px 6px 0px var(--white-dark);
}

button:active{
 -webkit-box-shadow: 0px 2px 0px var(--white-dark);
 -moz-box-shadow: 0px 2px 0px var(--white-dark);
 box-shadow: 0px 2px 0px var(--white-dark);
 position: relative;
 top: -15px;
}

.logo {
 left: 10px;
}

.container {
 justify-content: center;
 display: flex;
 margin-top: 45px;
}

/* Card 1 */

.card1 a {
 text-decoration: none;
}

.minicard1 {
 background-color: var(--white);
 border-radius: 15px;
 width: 68px;
 height: 68px;
}

.card1 img {
 width: 48px;
 height: 42px;
 margin-top: 14px;
 margin-left: 10px;
}

.react {
 margin-top: 35px;
}

.react h2 {
 color: var(--react-h2);
 margin-left: 8px;
}

.react h4 {
 color: var(--white);
 font-family: sans-serif;
 font-size: 17px;
 margin-left: 10px;
 text-align: inherit;
}

.card1 {
 position: relative;
 min-width: 320px;
 height: 440px;
 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
             inset -5px -5px 15px rgba(255, 255, 255, 0.1),
             5px 5px 15px rgba(0, 0, 0, 0.3),
             -5px -5px 15px rgba(255, 255, 255, 0.1);
 border-radius: 15px;
 margin: 30px;
}

.box1 {
 position: absolute;
 top: 20px;
 left: 20px;
 right: 20px;
 bottom: 20px;
 background: #2a2b2f;
 border: 2px solid #1e1f23;
 border-radius: 15px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
 transition: 0.5s;
}

.card1 .box1:hover {
 transform: translateY(-50px);
 box-shadow: 0 40px 70px rgba(0, 0, 0, 0.5);
}

/* Card 2 */

.card2 a {
 text-decoration: none;
}

.minicard2 {
 background-color: var(--white);
 border-radius: 15px;
 width: 68px;
 height: 68px;
}

.card2 img {
 width: 44px;
 height: 49px;
 margin-top: 7px;
 margin-left: 10px;
}

.node {
 margin-top: 35px;
}

.node h2 {
 color: var(--node-h2);
}

.node h4 {
 color: var(--white);
 font-family: sans-serif;
 font-size: 17px;
 margin-left: 10px;
}

.card2 {
 position: relative;
 min-width: 320px;
 height: 440px;
 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
             inset -5px -5px 15px rgba(255, 255, 255, 0.1),
             5px 5px 15px rgba(0, 0, 0, 0.3),
             -5px -5px 15px rgba(255, 255, 255, 0.1);
 border-radius: 15px;
 margin: 30px;
}

.box2 {
 position: absolute;
 top: 20px;
 left: 20px;
 right: 20px;
 bottom: 20px;
 background: #2a2b2f;
 border: 2px solid #1e1f23;
 border-radius: 15px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
 transition: 0.5s;
}

.card2 .box2:hover {
 transform: translateY(-50px);
 box-shadow: 0 40px 70px rgba(0, 0, 0, 0.5);
}

/* Card 3 */

.card3 a {
 text-decoration: none;
}

.minicard3 {
 background-color: var(--white);
 border-radius: 15px;
 width: 68px;
 height: 68px;
}

.card3 img {
 width: 58px;
 height: 52px;
 margin-top: 7px;
 margin-left: 4px;
}

.elixir {
 margin-top: 35px;
}

.elixir h2 {
 color: var(--elixir-h2);
}

.elixir h4 {
 color: var(--white);
 font-family: sans-serif;
 font-size: 17px;
 margin-left: 10px;
}

.card3 {
 position: relative;
 min-width: 320px;
 height: 440px;
 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
             inset -5px -5px 15px rgba(255, 255, 255, 0.1),
             5px 5px 15px rgba(0, 0, 0, 0.3),
             -5px -5px 15px rgba(255, 255, 255, 0.1);
 border-radius: 15px;
 margin: 30px;
}

.box3 {
 position: absolute;
 top: 20px;
 left: 20px;
 right: 20px;
 bottom: 20px;
 background: #2a2b2f;
 border: 2px solid #1e1f23;
 border-radius: 15px;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
 transition: 0.5s;
}

.card3 .box3:hover {
 transform: translateY(-50px);
 box-shadow: 0 40px 70px rgba(0, 0, 0, 0.5);
}

/* Footer */

.descricao {
 height: 180px;
 background-color: var(--gray);
 color: var(--white);
 margin-top: 45px;
}

.descricao img {
 width: 60px;
 height: 60px;
 margin-left: 700px;
 margin-top: 50px;
}

.descricao h5 {
 margin-left: 650px;
 color: var(--white);
 text-decoration: none;
}

.social-link {
 display: flex;
 margin-top: -140px;
 margin-left: 8px;
}

.dribbble {
 color: var(--dribbble);
 margin-left: 15px;
}

.github {
 color: var(--github);
 margin-left: 15px;
}

.twitter {
 color: var(--twitter);
 margin-left: 15px;
}

h2 {
 margin-left: 15px;
}