/* ---------------------------------------------------------------------------------------------------- */
/* MODELO DE ORGANIZAÇÃO DO CSS */

/* selector { */

/* 0 SASS INHERITANCE*/
/* @extend, @mixin, e.g. clearfix */

/* 1 GENERATED CONTENT */
/* content */

/* 2 POSITION AND LAYOUT */
/* positiony, z-index, top, bottom, left, right, Flexbox properties, float, clear */

/* 3 DISPLAY AND VISIBILITY */
/* display, opacity, transform */

/* 4 CLIPPING */
/* overflow, clip  */

/* 5 ANIMATION */
/* animation, transition */

/* 6 BOX MODEL (FROM OUTSIDE IN) */
/* margin, box-shadow, border, border-radius, box-sizing, width, height, padding */

/* 7 BACKGROUND */
/* background, cursor */

/* 8 TYPOGRAPHY */
/* font-size, line-height, font-family, font-weight, font-style, text-align, text-transform, word-spacing, color */

/* 9 PSEUDO-CLASSES & PSEUDO-ELEMENTS (NESTED RULES) */
/* :hover, :focus, :active, :before, :after, :first-child, :last-child */

/* } */
/* ---------------------------------------------------------------------------------------------------- */

/* ================================================== */
/*                        GERAL                       */
/* ================================================== */
body {
    /* BACKGROUND */
    background-color:white;
    
    /* TYPOGRAPHY */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

img {
    /* BOX MODEL (FROM OUTSIDE IN) */
    width: 40%;
    transition: transform .2s; /* Animation */
}

img:hover {
    transform: scale(1.2);
}

.logo {
    /* BOX MODEL (FROM OUTSIDE IN) */
    margin: 2% auto;
    width: 700px;
    
    /* TYPOGRAPHY */    
     text-align: center;
}

.main {
    /* BOX MODEL (FROM OUTSIDE IN) */
    margin: 2% auto;
    width: 40%;

    /* TYPOGRAPHY */
    text-align: center;
}

.proj1, 
.proj2, 
.proj3, 
.proj4, 
.proj5, 
.proj6,
.proj7,
.proj8,
.proj9,
.proj10,
.proj11 {
    /* BOX MODEL (FROM OUTSIDE IN) */
    margin: 2% auto;
    padding: 5px 20px;
    border-radius:60px;
    width: 90%;

    /* BACKGROUND */
    background-color: rgb(24, 221, 24);
    
    /* TYPOGRAPHY */
    text-align: center; 
}

.contato {
    /* BOX MODEL (FROM OUTSIDE IN) */
    margin: 2% auto;    
    border-radius: 30px;
    padding: 10px;
    width: 90%;

    /* BACKGROUND */
    background-color: rgb(68, 209, 219);
    
    /* TYPOGRAPHY */
    text-align: center;
    color: rgb(255, 255, 255);
}

a {
    /* TYPOGRAPHY */
    text-decoration: none;
    color: rgb(0, 0, 0)
}

a:hover {
    /* BOX */
    padding: 10px;
    border-radius: 25px;
    
    /* BACKGROUND */
    background-color: white;
    
    /* TYPOGRAPHY */
    color:black;
}

a:visited {    
    /* TYPOGRAPHY */
    color:rgb(0, 0, 0);
    border-radius: 30px;
}

h1 {
    /* TYPOGRAPHY */
    font-size: 30px;
    text-align: center;
    color: black;
}

h2 {
    /* TYPOGRAPHY */
    font-size: 20px;
    text-align: center;
}

span {
    /* TYPOGRAPHY */
    font-weight: bold;
}